Selenium：如何将 id 或 class 与特定的 div 相关联？

Question

我在提问之前尝试进行搜索，但没有找到（或理解）我的问题的正确答案。

我正在测试一些图表（由 Highcharts 6 提供支持）。我在同一个 url 上有 6 个不同的图表。每个都在一个 div 容器中，容器中有不同的元素（按钮等）。

所有按钮的 class and/or ID 都相同。
例如，这是图表 1 的 Maximize/Minimize 按钮：

<a class="has-tooltip btn btn-default change" role="button" title="" id="table" data-original-title="TEXT">
<span class="fa fa-lg ik-wi-icon-th"></span></a>

这是图表 2 的相同按钮：

<a class="has-tooltip btn btn-default change" role="button" title="" id="table" data-original-title="TEXT">
<span class="fa fa-lg ik-wi-icon-th"></span></a>

它们完全一样。所以我尝试使用 Katalon Recorder 弄清楚它是如何注意到我点击了不同的按钮，这就是我得到的结果：

driver.findElement(By.xpath("//a[@id='table']/span")).click(); click1
driver.findElement(By.xpath("//a[@id='table']/span")).click(); click2

driver.findElement(By.xpath("(//a[@id='table']/span)[2]")).click(); click1
driver.findElement(By.xpath("(//a[@id='table']/span)[2]")).click(); click2

这个[2]从哪里来的？
如何告诉 Selenium 我想点击哪个按钮？

Answer 1

2 明智地来自 DOM HTML 中的第二个 //a[@id='table']/span。

假设你有 6 个图表，它们都有一个 link 和 id='table'，它们下面都有一个跨度，这意味着 //a[@id='table']/span 将 return6个元素。使用 xpath，只有当您确定您的图表顺序不会改变时，您才可以点击第一个图表：

driver.findElement(By.xpath("//a[@id='table']/span")).click();

第二个：

driver.findElement(By.xpath("(//a[@id='table']/span)[2]")).click();

第三名：

driver.findElement(By.xpath("(//a[@id='table']/span)[3]")).click();

等等

为了绝对确定，在您要测试的页面上按 chrome 中的 F12。然后转到控制台，然后输入：

$x("//a[@id='table']/span")

大概会return6个元素。当您打开这些元素中的每一个并将鼠标悬停在它们上面时，Chrome 将突出显示它找到的元素。现在，如果您想要找到第五个元素 Chrome，请在控制台中输入：

$x("(//a[@id='table']/span)[5]")

现在看看元素 returned 是否是页面上的第五个。

Selenium：如何将 id 或 class 与特定的 div 相关联？

Selenium: How to relate an id or a class to a specific div?

java

testing

selenium

highcharts

katalon-recorder