javascript - 使用 page.evalute() 返回 DOM 元素

Question

在我的测试脚本中，我试图像这样访问我页面上的一个元素:

const browser = await puppeteer.launch({headless: false});

const page = await browser.newPage();

(async () => {

    const myElement = await page.evaluate( () => {
        let overflowDiv = document.querySelectorAll('.overflow')[0];
        let buttonDiv = overflowDiv.children[1];
        let listsButton = buttonDiv.children[0]; 
        return listsButton;   
    });

    await page.click(myElement);
...
};

当我运行此脚本时，出现错误 'No node found for selector: undefined' 。我不明白为什么 myElement 在这种情况下未定义。也许我不明白 page.evaluate() 是如何工作的？

Answer 1

问题是我使用 page.evaluate() 而不是 page.evaluateHanlde() 引起的。必须使用 page.evaluateHanlde() 为 DOM 节点创建句柄。

解决方法如下:

(async () => {

    const listsButtonEl = await page.evaluateHandle(() => {
        let overflowDiv = document.querySelectorAll('.overflow')[0];
        let buttonDiv = overflowDiv.children[1];
        let listsButton = buttonDiv.children[0]; 
        return listsButton;   
    });
    await listsButtonEl.click();

}();