使用 selenium webdriver 定位由 javascript 创建的元素

Posted 2023-02-26

【中文标题】使用 selenium webdriver 定位由 javascript 创建的元素

【英文标题】：Locate an element created by javascript using selenium webdriver

【发布时间】：2017-05-11 13:28:16

【问题描述】：

我是 Selenium 和 Java 的新手，我在一个使用 selenium (java) 的自动化测试项目中工作，今天我遇到了 driver.findElement 问题，我想找到的元素是由 javascript 创建的，我确定使用 WebDriverWait 等待目标元素呈现，即使我使用 thread.sleep 并等待它大约几分钟，但 webdriver 仍然无法找到该元素。

这是我的问题，在 html/js 代码中我有一个按钮，单击此按钮 javascript 将创建一个 div，我需要使用 selenium 定位它以使 Automatio 测试工作。

点击按钮后，javascript 使 div 看起来像：

<div id="zm-view-frame" class="fade in"><div class="zm-view-header"><div class="zm-view-back"><a onclick="WFLandingpage.closePreview();" id="zm-view-close" class="button" href="javascript:void(0);"><span>Close</span></a></div><div id="zm-view-button"><a href="javascript:void(0);" onclick="WFLandingpage.showDesktop(this)" class="zm-display-desktop"><span>Desktop</span></a><a href="javascript:void(0);" onclick="WFLandingpage.showTablet(this)" class="zm-display-tablet"><span>Tablet</span></a><a href="javascript:void(0);" onclick="WFLandingpage.showMobile(this)" class="zm-display-phone"><span>Mobile</span></a><a href="javascript:void(0);" onclick="WFLandingpage.rotateView()" class="zm-display-rotate"><span>Rotate</span></a></div></div><iframe id="zm-display-iframe" src="page=mvc_landingpages&amp;act=templatepage&amp;preview=1&amp;templateId=landingpage3" style="padding-top: 63px; margin: 0px auto;" scrolling="yes"  ></iframe></div>

然后，在 java 代码中我写了：

this.wait.until(ExpectedConditions.visibilityOfElementLocated(By.id("zm-view-frame")));

然后：

Tester.Browser.findElement(By.id("zm-view-frame")).click();

当然，我已经定义了 this.wait ：

public WebDriverWait wait = new WebDriverWait(Tester.Browser, 100);

我得到一个等待超时异常

我什至使用了许多类型的 By，例如 Xpath、css 选择器、类……但仍然没有运气。

我还使用 Selenium IDE for firefox 来获取元素，将其导出到 java 代码并在我的编辑器中查看，然后做同样的事情，但它不再适合我了。

我真的被困在这个问题上，你能给我一些帮助吗？

抱歉我的英语不好，非常感谢！

更新 - 这是我的 html 结构： html structure

更新 - 我发现了错误并有解决方案

原因：在上面的代码之前，我有几行代码来检查 iframe 是否可用，代码如下：

this.wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(locator));

而且我不知道该代码使驱动程序切换到该 iframe，因此我上面查找元素的代码位于错误的位置（上下文）。

解决方案：所以我需要回到默认上下文（回到父级），我这样编码：

Tester.Browser.switchTo().defaultContent();

非常感谢@Naveen 提醒我检查那个案例:)。

【问题讨论】：

检查您要查找的元素是否在框架元素内，即您的元素是<iframe> 标签的子元素。如果是，那么首先你必须切换到框架，然后找到元素。请参考我的回答***.com/questions/40758138/… 了解更多关于切换黑白帧的信息。

感谢@Naveen，我已经检查过了，它位于我正在处理的父页面的 上

正如我在 HTML 中看到的，类被定义为fade in。您确定该元素显示在网页上吗？或者您需要执行一些操作，例如（悬停等）以显示元素？

嗨@Naveen 感谢您指出我检查元素是否保留，经过几次调试后我找到了原因：该元素位于父级的 上，这是真的，但在上面的代码之前我使用@ 987654331@ 检查我的其他 iframe 是否可用，我不知道它在检查后切换到那个 iframe。为了解决这个问题，我使用Tester.Browser.switchTo().defaultContent(); 回到父母身边，现在一切正常，再次感谢兄弟！！！

很好，你解决了这个问题。您可以将其发布为答案，以便其他社区成员可以从中受益。一旦切换到一帧，您应该始终再次切换到默认帧以找到元素。

【参考方案1】：

我找到了错误并有解决方案

原因：在上面的代码之前，我有几行代码来检查 iframe 是否可用，代码如下：

this.wait.until(ExpectedConditions.frameToBeAvailableAndSwitchToIt(locator));

而且我不知道该代码使驱动程序切换到该 iframe，因此我上面查找元素的代码位于错误的位置（上下文）。

解决方案：所以我需要回到默认上下文（回到父级），我这样编码：

Tester.Browser.switchTo().defaultContent();

非常感谢@Naveen 提醒我检查那个案例:)。