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

Question

是否有任何方法(在 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')

Answer 1

简答
此 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 表达式中。