Selenium WebDriver：点击表格行内可见按钮

Question

非常抱歉，这个问题比较长。

更具体地说，我正在尝试点击显示在第四行的铅笔图标（编辑按钮）。

这是我尝试执行的代码：

WebElement ele = driver.findElement(By.xpath("//a[contains(@title, 'Edit Row')]"));
JavascriptExecutor executor = (JavascriptExecutor)driver;
Executor1.executeScript("arguments[0].click();", ele);

以下是HTML代码：

我运行selenium代码后，驱动程序实际上点击了第一行（Administration | NA）的编辑按钮，而不是第四行。我发现不仅是第一行，其他行也有相同的HTML代码，唯一的区别是铅笔/编辑按钮被隐藏，因为我不是创建该行值的人。

我也尝试了以下代码：

driver.findElement(By.xpath("//a[contains(@title, 'Edit Row')]")).click();

我随后收到了错误提示。

element is not currently visible and so may not be interacted with

似乎驱动程序仍在查看第一行中隐藏的编辑按钮，而不是第四行中明显可见的按钮。

有没有办法根据值而不是行号点击编辑按钮？原因是将来我输入的测试值可能不会出现在第四行，而是在第一行或第十行等其他行。

最后但并非最不重要的，我的Safari似乎无法运行JS Executor代码，每次尝试后都会返回以下错误：

org.openqa.selenium.WebDriverException: 'undefined' is not a function (WARNING: The server did not provide any stacktrace information)

有人可以帮我解释一下吗？

谢谢！

- dannydvo10

---

也许这个问题可以帮到你：https://dev59.com/C3nZa4cB1Zd3GeqPqXdg - Arg0n

首先...不要使用JSE。它会允许您单击用户无法交互的元素，这通常是不希望的。铅笔图标仅在悬停在该行上时显示，还是一直存在？对我来说，只有第四行可编辑，正如您的屏幕截图所示，这似乎很奇怪。 - JeffC

嗨JeffC，第四行可编辑是因为它是我创建的，而其他行是其他普通或高级用户添加的，所以我实际上没有权利编辑它们。 - dannydvo10

Answer 1

由于只显示一个编辑图标，下面的代码应该有效。

driver.findElement(By.cssSelector("a[title='Edit Row']")).click();

我认为你遇到隐藏元素问题的原因是使用了JSE进行点击。Selenium只与可见元素交互，就像用户一样。JSE允许您与不可见元素交互。使用JSE，您找到了一个匹配XPath但不可见的元素，然后尝试单击它...因此出现错误。

- JeffC

Answer 2

你应该根据字段文本来查找元素，这样它就能找到相应的编辑链接。

functional_area = "Business Development / Innovation"

WebElement ele = driver.findElement(By.xpath("//span[@class='xspTextComputedField'][contains(@text, '" + functional_area + "')]/following-sibling::div/a[contains(@title, 'Edit Row')]"));

你可以通过参数化文本（例如财务）使其更具动态性。

- Vignesh Paramasivam

---

嗨Vignesh，谢谢你提供的代码，不幸的是，我收到了“无法定位元素”的错误 :^( - dannydvo10

你把我的之前代码中的“Financial”改成了“Business Development”吗？无论如何，我现在已经修改了代码，将功能区域作为参数传入。请试一试。 - Vignesh Paramasivam

Answer 3

我建议你先在Firefox中尝试一次，然后使用Firepath插件在Firebug中尝试相同的xpath。

尝试检查铅笔图标的xpath。只有一个匹配元素且其中没有动态值，那么你就可以使用它。否则，请评估此xpath。

  //a[contains(@title, 'Edit Row')]

您可以找到一个或多个匹配的元素。然后尝试在所需元素的一个属性中找到差异。如果您能够使用该奇怪的属性创建xpath，则它就是正确的，否则请使用列表，在循环中交叉检查，然后进行处理。

- murali selenium

Answer 4

感谢murali和JeffC的建议，我已经成功让驱动程序点击了显示的铅笔，代码如下：

List<WebElement> EditButtons = driver.findElements(By.cssSelector("a[title='Edit Row']"));

        for(WebElement button : EditButtons) {
         if(button.isDisplayed()) {
             button.click();
          }
        }

虽然它只解决了问题的一半，但我正在尝试根据旁边的值单击显示的编辑按钮。如果我创建另一行，其值为'Test234'，并且该行位于第4行下面，则不会单击'Test234'的编辑按钮。有什么建议吗？我尝试过这个，但似乎不起作用，驱动程序仍然会单击它看到的第一个可见编辑按钮：

List<WebElement> EditButtons = driver.findElements(By.cssSelector("a[title='Edit Row']"));
String textvalue = driver.findElement(By.xpath("//span[contains(text(),'test456')]")).getText();

        for(WebElement button : EditButtons) {
         if(button.isDisplayed() && textvalue.equalsIgnoreCase("test456")) {
             button.click();
          }
        }

更新：好的，问题已解决，我切换回使用xpath而不是cssSelector，然后稍微修改了Vagnesh的建议（谢谢Vagnesh！！），现在驱动程序可以直接点击我搜索的文本旁边可见的编辑按钮，而无需经过循环。

driver.findElement(By.xpath("//span[contains(text(), 'Enter my desired Text here')]/following::div//a[contains(@title,'Edit Row')]")).click();

- dannydvo10