javascript - 如何在 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 表达式将查询包含文本“Button text”的按钮:

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