在 Playwright (Python) 中，当页面上有多个按钮时，它们都具有相同的名称，我如何 select 正确的按钮？

Question

如果我正在实现字符串定位器，例如：

continue_button: str = "button:has-text(\"Continue\")"

如果同一页面上有多个按钮说继续，但用于不同的路径，我如何 select 正确的继续...有没有办法向该字符串定位器添加索引？

Answer 1

创建定位器/选择器有几个好的实践。 使用剧作家，每个常见和独特的选择器都有关于如何做和做什么的官方文档。

更多信息在https://playwright.dev/docs/selectors#text-selector

关于您的情况，我建议始终使用父选择器来定位元素。 当有一个按钮时，尝试找到它的唯一父级。

• 按编号
• 由独特的 class
• 还有一些独特的东西。

例子：

<dv id=test>
 <button id=continue-test>Continue</button>
</div>

在这种情况下，您可以使用按钮的唯一 ID 而不是文本。 选择器 css: #continue-test但如果您没有按钮的唯一标识符，您可以使用父按钮和 go 按钮。 选择器 css： #test > button

使用 css 匹配文本是不可能的，但使用 XPATH 可以如下所示：

//button[text()="Continue"] 

此选择器使用"equals"匹配文本。

使用剧作家：

button:has-text("Continue")

使用 has-text 和引号 - 使用 equals 匹配文本。 如果您使用另一个选择器，例如text=Continue ，这将匹配包含文本“继续”的所有元素

所有这些都在剧作家选择器的官方文档中通过示例进行了解释。 这并不意味着不使用XPATH来实现目标。

CSS选择器速度很快，但仅限于处理文本。

Xpath速度较慢，但在文本/父/子元素等中工作的功能要强大得多。

我建议始终使用具有唯一标识符的父元素和 go 向下到达您的实际元素，该元素将接收交互。

Answer 2

我喜欢剧作家的事实是因为这样的场景以及处理它的容易程度。

如果您有一个名为abc的字符串，并且该字符串在单个页面上多次出现，那么您可以使用第nth-match条件来选择第nth元素。

例如，

await page.locator(':nth-match(:text("abc"), 3)').click();

将 select 3rd出现单词abc 。 同样，在你的情况下，如果你想 select 第一或第二或第三，你可以简单地做

 await page.locator(':nth-match(:text("Continue"), 1)').click();
 
 await page.locator(':nth-match(:text("Continue"), 2)').click();
 
 await page.locator(':nth-match(:text("Continue"), 3)').click();

请参阅 Playwright -> 选择器的选择器文档

这与前面提到的nth-child概念不同

不像：nth-child()，元素不必是兄弟，它们可以在页面的任何地方。 在上面的代码片段中，所有三个按钮都 match:text("Buy") 选择器，并且:nth-match() 选择第三个按钮。