Puppeteer：如何点击带有特定标签的按钮？

Question

要点击带有特定标签的按钮，我会这样做：

const button = await this.page.$$eval('button', (elms: Element[], label: string) => {
    const el: Element = elms.find((el: Element) => el.textContent === label)
    console.log(el);
    return el;
}, label);
await button.click(); // button is undefined

console.log 在浏览器中打印一个元素，我可以在该元素上.click()。作品。但是 return 值没有到达按钮。

为什么？

$$eval 的文档说：

returns: > Promise which resolves to the return value of pageFunction

Answer 1

您正在从 $$eval 函数返回找到的 DOM 元素，并且无法返回 DOM 元素；返回的变量必须是serialazable，否则就是undefined。

根据 docs:

If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined

Answer 2

您也可以在评估中搜索您想要的元素并从那里单击。

await page.evaluate(label => {
    $(`button:contains('${label}')`)[0].click()
}, label)

无需 return 要单击的元素。

如 Vaviloff 所述，“return 值未到达按钮”的问题是

If the function passed to the page.evaluate returns a non-Serializable value, then page.evaluate resolves to undefined

Answer 3

这是我使用上述两个答案中的信息得出的结果。

await this.page.$$eval('button', (elms: Element[], label: string) => {
    (elms.find(el => el.textContent === label) as HTMLElement).click();
}, label);

Puppeteer：如何点击带有特定标签的按钮？

Puppeteer: How can I click on a button with certain label?

dom

click

typescript

puppeteer