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

Question

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

 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

更好的方法是通过 page.evaluate 和 return 结果在页面上执行代码。这样你就可以 return 一个包含以下值的数组：

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。

Answer 2

使用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 ...
})

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

Converting an ElementHandle to a DOM element using puppeteer?

dom

puppeteer

dom-element