puppeteer 的 ElementHandle.getProperty() 的预期行为是什么？答案

【问题标题】：What's the expected behavior of puppeteer's ElementHandle.getProperty()?puppeteer 的 ElementHandle.getProperty() 的预期行为是什么？
【发布时间】：2018-02-07 00:41:44
【问题描述】：

Puppeteer 1.0.0-发布。 getProperty() 方法似乎有些神奇。例如，如果您的页面包含：

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

那么这将返回的不是 relative 而是一个 absolute URL：

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

另一方面，如果你要走更多的环岛：

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

据我所知，puppeteer 文档没有提到 getProperty() 的这种行为？

它变得更丑了，例如，如果你想获得一个元素的style 属性。看起来 puppeteer 的 getProperty() 实际上试图以某种方式解析样式，这种解析是错误的/不完整的。获取原始文本的唯一方法是调用evaluateHandle(...)。

这是一个预期的功能，只是一个文档错误？还是它完全是一个木偶虫？

谢谢。

【问题讨论】：

标签： node.js puppeteer

【解决方案1】：

请参阅HTML - attributes vs properties 了解 HTML 属性和 DOM 属性之间的区别。

您也可以在没有 Puppeteer 的情况下轻松看出差异。例如，在这个页面上：

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

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

【讨论】：

谢谢！请允许我在这里有一个“duh”的时刻。这很有帮助。