我知道常见的方法,如evaluate
用于捕获puppeteer
中的元素,但我很好奇为什么我不能像JavaScript那样获得href
属性
const page = await browser.newPage();
await page.goto('https://www.example.com');
let links = await page.$$('a');
for (let i = 0; i < links.length; i++) {
console.log(links[i].getAttribute('href'));
console.log(links[i].href);
}
await page.$$('a')
返回一个包含ElementHandles的数组 - 这些是具有自己的Pupeteer特定API的对象,它们没有用于HTML元素或DOM节点的常用DOM API。因此,您需要通过page.evaluate()
在浏览器上下文中检索属性/属性,或者使用相当复杂的ElementHandles API。这是两种方式的示例:
'use strict';
const puppeteer = require('puppeteer');
(async function main() {
try {
const browser = await puppeteer.launch();
const [page] = await browser.pages();
await page.goto('https://example.org/');
// way 1
const hrefs1 = await page.evaluate(
() => Array.from(
document.querySelectorAll('a[href]'),
a => a.getAttribute('href')
)
);
// way 2
const elementHandles = await page.$$('a');
const propertyJsHandles = await Promise.all(
elementHandles.map(handle => handle.getProperty('href'))
);
const hrefs2 = await Promise.all(
propertyJsHandles.map(handle => handle.jsonValue())
);
console.log(hrefs1, hrefs2);
await browser.close();
} catch (err) {
console.error(err);
}
})();
我不知道为什么会有这样的痛苦,但这是我刚才遇到的时候发现的。
async function getHrefs(page, selector) {
return await page.$$eval(selector, anchors => [].map.call(anchors, a => a.href));
}