node.js - 在 Puppeteer 中单击带有特定文本的内部元素的外部元素

Question

如何通过 puppeteer 单击包含带有特定文本的 span 的外部元素？

例如，我有以下 HTML 代码:

<div role="button">
  <div>
    <span>
      <span>OK</span>
    </span>
  </div>
</div>

我想单击最外面的元素(角色=按钮)。为了单击带有“确定”文本的范围，我将执行以下操作:

const [button] = await page.$x("//span[contains(., 'Ok')]");
if (button) {
    await button.click();
}

但是如何使用此文本标识符单击外部元素？

Answer 1

您可以使用descendant查询子元素的表达式。引用链接:

The descendant axis indicates all of the children of the context node, and all of their children, and so forth.

您的 XPath 表达式如下所示:

//div[@role='button' and descendant::span[contains(., 'Ok')]]

根据您的使用案例，您可能还想查看this information关于 contains(text(), ...) 和 contains(., ...) 的区别。