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

【问题标题】：Selenium: How to relate an id or a class to a specific div?Selenium：如何将 id 或类与特定的 div 相关联？
【发布时间】：2018-09-27 10:28:25
【问题描述】：

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

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

所有按钮的类和/或 ID 都相同。
例如，这是 chart1 的最大化/最小化按钮：

<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>

这里是chart2的同一个按钮：

<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 我想点击哪个按钮？

【问题讨论】：

我在您的问题中添加了katalon-studio 标签。可能更熟悉katalon-studio 的人能够更好地指导您。
Check this guide on HTML。 HTML 标记中使用的 ID 必须是唯一的，因为它们用于准确识别您的 DOM 元素之一。在这里，它们被标记为table。如果您想识别多个 DOM 元素，请改用您的 class。
您好，感谢您的快速回答！希望掌握katalon的人可以帮助我！关于类和 ID，所有按钮都在同一个 HTML 中，具有相同的类和 ID，正如您在我发布的代码中看到的那样，那么我该如何区分它们呢？还是一样的问题...
@GinoMempin 有什么理由放弃标签katalon-studio，因为OP 的问题是基于Katalon Recorder？我错过了什么吗？
@DebanjanB 嗯..我没有故意删除你添加的标签，我确定我只是编辑了内容。尽管有人进行了编辑，但我确实收到了一条消息，并且只有在更“实质性”的情况下，我的编辑才会被保存。我不确定，也许是错误合并我们的编辑？无论如何，如果我的编辑删除了您的标签，我很抱歉。（不过我没有代表可以立即把它放回去）。

标签： java selenium testing highcharts katalon-recorder

【解决方案1】：

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

假设您有 6 个图表，它们都有一个与 id='table' 的链接，并且它们都有一个跨度，这意味着 //a[@id='table']/span 将返回 6 个元素。使用 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();

等等

绝对确定，在您要测试的页面上按 F12 键。然后进入控制台，输入：

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

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

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

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

【讨论】：

非常感谢！！