使用 page.evalute() 返回 DOM 元素答案

【问题标题】：Using page.evalute() to return DOM element使用 page.evalute() 返回 DOM 元素
【发布时间】：2018-01-09 15:46:57
【问题描述】：

在我的测试脚本中，我试图访问页面上的元素，如下所示：

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() 是如何工作的？

【问题讨论】：

你调试过吗，listsButton的值是多少？我敢打赌是undefined
page.evaluate() 函数 listsButton 的内部正是我们所期望的。但在page.click() 上它是未定义的。

标签： javascript html testing

【解决方案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();

}();

【讨论】：