What's the expected behavior of puppeteer's ElementHandle.getProperty()?

Question

Puppeteer 1.0.0-post. The getProperty() method seems somewhat magical. For example, if your page contains:

<a href="/foo/bar.html">link</a>

Then this will return not a relative but an absolute URL:

const propertyHandle = await elementHandle.getProperty('href');
const href = await propertyHandle.jsonValue();
// href is 'https://localhost:8080/foo/bar.html'

On the other hand, if you were to do the more roundabout:

const hrefHandle = await page.evaluateHandle(element => element.getAttribute('href'), elementHandle);
const href = await hrefHandle.jsonValue();
// href is '/foo/bar.html'

As far as I can tell, the puppeteer documentation doesn't mention this behavior of getProperty()?

It gets uglier, for instance if you want to get the style attribute of an element. It looks like puppeteer's getProperty() actually tries to parse the style in some way, which parsing is buggy/incomplete. The only way to get the raw text is with the roundabout call to evaluateHandle(...).

Is this an intended feature and simply a documentation bug? Or is it just, outright, a puppeteer bug?

Thanks.

Answer 1

See HTML - attributes vs properties for difference between HTML attributes and DOM properties.

You can easily see the difference without Puppeteer, too. For example, on this page:

document.getElementById('nav-questions').href    
// returns "https://stackoverflow.com/questions"

document.getElementById('nav-questions').getAttribute('href')    
// returns "/questions"