如何单击没有任何唯一 class 属性的按钮

Question

我在单击一个按钮时遇到了麻烦，该按钮生成的长 class 不是唯一的，使用 xpath 选择器。它有 2 个嵌套元素 - svg 和 span。我不确定我是应该使用它们来寻找这个按钮，还是应该通过 class 寻找并选择例如第二个选项。

我试过以下选择器：

xpath = "//button[contains(@class, 'styled_ShareButton')](1)"

xpath = "//button span[contains('Add to favorites')]"

xpath = "//button[contains(@span, 'fa-heart')]"

xpath = "//svg[contains(@class, 'fa-heart')]"

但其中 none 有效。

这是我感兴趣的按钮（这是具有相同 class 的 2 个按钮中的第 2 个）

<button class="styled__ShareButton-sc-1jdjzg3-3 feqRzW Button-sc-1emfup8-0 kFlIhg">
<svg aria-hidden="true" data-prefix="far" data-icon="heart" class="svg-inline--fa fa-heart fa-w-16 " role="img" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512"><path fill="currentColor"></path></svg>
<span>Add to favourites</span>
</button>

谁能告诉我如何点击它或者指出我在以前的选择器中犯的错误？谢谢。

Answer 1

浏览器建议的默认 xpath 有效：

xpath = "//*[@id=\'react-app-root\']/div/div/div[2]/div/div[1]/button[2]"

但如果有人有更好看的解决方案，我仍然会很感激。

Answer 2

这似乎是 data attribute.

的完美用例

该属性可用于唯一标识测试中的按钮，并且对 UI 结构中的更改更具弹性。

Answer 3

您可以尝试以下 XPaths :

xPath = "//span[contains(text(), 'Add to favourites')]//parent::button"

或

xPath = "(//*[@id='react-app-root']//button[contains(@class, 'styled__ShareButton')])[last()]"

或

xPath = "//*[@id='react-app-root']//span[contains(text(), 'Add to favourites')]//parent::button"

或

xPath = "(//*[@id='react-app-root']//button[contains(@class, 'styled__ShareButton')])[2]"

或

xPath = "(//button[contains(@class, 'styled__ShareButton')])[2]"

或

xPath = "(//button[contains(@class, 'styled__ShareButton')])[last()]"

Answer 4

所需的元素是一个动态元素，因此要找到您必须诱导 WebDriverWait 的元素才能使 元素可点击 并且您可以使用以下任一解决方案：

cssSelector:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.cssSelector("button[class^='styled__ShareButton-sc-'] span"))).click();

xpath:

new WebDriverWait(driver, 20).until(ExpectedConditions.elementToBeClickable(By.xpath("//button[@class]//span[text()='Add to favourites']"))).click();

如何单击没有任何唯一 class 属性的按钮

How to click a button without any unique class attribute

java

selenium

xpath

css-selectors

webdriverwait