puppeteer - 如何在 Puppeteer 中单击带有文本的元素

原文 标签 puppeteer

是否有任何方法(在 API 中找不到)或解决方案来单击带有文本的元素?
例如我有 html:

<div class="elements">
    <button>Button text</button>
    <a href=#>Href text</a>
    <div>Div text</div>
</div>
而且我想单击包含文本的元素(单击 .elements 内的按钮),例如:
Page.click('Button text', '.elements')

最佳答案

简答
此 XPath 表达式将查询包含文本“按钮文本”的按钮:

const [button] = await page.$x("//button[contains(., 'Button text')]");
if (button) {
    await button.click();
}
也尊重<div class="elements">围绕按钮,使用以下代码:
const [button] = await page.$x("//div[@class='elements']/button[contains(., 'Button text')]");
说明
为了解释为什么在某些情况下使用文本节点( text() )是错误的,让我们看一个例子:
<div>
    <button>Start End</button>
    <button>Start <em>Middle</em> End</button>
</div>
首先我们来看看使用contains(text(), 'Text')时的结果:
  • //button[contains(text(), 'Start')]将同时返回 两个节点(如预期)
  • //button[contains(text(), 'End')]只会返回 节点(第一个)为 text()返回包含两个文本( Start End )的列表,但 contains只会检查第一个
  • //button[contains(text(), 'Middle')]将返回 结果为 text()不包含子节点的文本

  • 以下是 contains(., 'Text') 的 XPath 表达式,它适用于元素本身,包括其子节点:
  • //button[contains(., 'Start')]将同时返回 两个按钮
  • //button[contains(., 'End')]将再次返回 两个按钮
  • //button[contains(., 'Middle')]将返回 (最后一个按钮)

  • 所以在大多数情况下,使用 . 更有意义。而不是 text()在 XPath 表达式中。

    关于puppeteer - 如何在 Puppeteer 中单击带有文本的元素,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47407791/

    相关文章:

    javascript - Node Puppeteer, page.on( "request") 抛出一个 "Request is already handled!"

    javascript - Document.querySelector()返回未定义的值

    javascript - 如何在puppeteer中使用querySelector将特定元素获取到<dl>

    javascript - 创建屏幕截图之前,可以使用Puppeteer修改DOM中的元素吗?

    puppeteer - 你如何打包 puppeteer 应用程序?

    javascript - 如何在 playwright 中运行自定义 js 函数

    url - page.click 不是一个函数

    javascript - puppeteer 在当前窗口而不是新窗口中启动新标签页

    unit-testing - 在 Visual Studio Code 编辑器中完全禁用 Jest 测试运行器的自动运行

    javascript - 如何通过Puppeteer ExposureFunction使用date.js?