使用 puppeteer 将 ElementHandle 转换为 DOM 元素？

Question

这是我目前DOM从以下获取每个属性的方式ElementHandle：

 let section: ElementHandle = await page.waitForSelector(".selector-list li");
 let tagName = await section.$eval('a', (e) => e.tagName);

但在这里tagName。如果我想检查更多属性怎么办？

我不想$eval为每个属性写。

题：

如何转换 ElementHandle为 Dom 对象，以便我能够浏览所有属性？我想获得A一个 Dom 对象。

Answer 1

使用ElementHandle.evaluate()：

const elementHandle = await page.waitForSelector('.selector-list li')

elementHandle.evaluate((domElement) => {
    domElement.tagName  
    // etc ...
})

打字稿：

const elementHandle: ElementHandle = await page.waitForSelector('.selector-list li')

elementHandle.evaluate((domElement) => {
    domElement.tagName  
    // etc ...
})

Answer 2

更好的方法是通过page.evaluate执行页面上的代码并返回结果。这样你就可以返回一个带有值的数组：

const result = await page.evaluate(() => {
    const elements = document.querySelectorAll(".selector-list li");
    // do something with elements, like mapping elements to an attribute:
    return Array.from(elements).map(element => element.tagName);
});

result然后将是一个包含tagName每个元素的属性值的数组。