在Puppeteer中单击带有内部元素且带有特定文本的外部元素

Question

如何通过操纵p单击包含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表达式来查询子元素。从链接中引用：

  

descendant轴指示上下文节点的所有子节点及其所有子节点，依此类推。

您的XPath表达式如下：

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

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