在 Playwright (Python) 中，当页面上有多个按钮时，所有按钮都具有相同的名称，我如何选择正确的按钮？答案

【问题标题】：In Playwright (Python) when there are multiple buttons on a page, all with the same name, how do i select correct button?在 Playwright (Python) 中，当页面上有多个按钮时，所有按钮都具有相同的名称，我如何选择正确的按钮？
【发布时间】：2022-09-26 16:08:54
【问题描述】：

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

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

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

那只是一个 CSS 选择器。因此您可以将适当的父元素添加到选择器以唯一标识它。在不知道网页的情况下，我们无法具体回答，但例如诸如#header div button:has-text(\"Continue\") 之类的东西。
请分享minimal reproducible example，页面和你想要的元素。没有这些信息，就不可能提供帮助。谢谢。

标签： python playwright

【解决方案1】：

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

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

按 ID
按唯一类
其他独特的东西。

例子：

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

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

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

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

这个选择器火柴文本使用“等于”.

使用剧作家：

button:has-text("Continue")

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

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

CSS选择器是快速地但有点限制使用文本。

Xpath是相当慢但在文本/父/子元素等中工作更强大。

我会建议总是使用具有唯一标识符的父元素并向下到达您的实际元素，该元素将接收交互。

【讨论】：

【解决方案2】：

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

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

例如，

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

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

 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 的 Selectors 文档 -> Selectors

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

与 :nth-child() 不同，元素不必是兄弟，它们可以位于页面上的任何位置。在上面的 sn-p 中，所有三个按钮都匹配 :text("Buy") 选择器， :nth-match() 选择第三个按钮。

【讨论】：