如何强制 Selenium WebDriver 单击当前不可见的元素？

Question

我正在使用 Selenium 2 Java API 和 FirefoxDriver。 当我填写表单时，复选框会根据表单输入添加到页面中。

我想使用 Selenium 模拟点击这些复选框。 该元素在常规浏览器中可见且可用，但 selenium 断言该元素不可见。

"Element is not currently visible and so may not be interacted with"

我可以强制硒忽略元素的不可见状态吗？ 如何强制 Selenium 与不可见元素相互作用？

Answer 1

Selenium 通过以下标准确定元素是否可见（使用 DOM 检查器来确定哪些 css 适用于您的元素，确保查看计算样式）：

• visibility != hide
• display != none（也针对每个父级进行检查）元素）
• 不透明度！= 0（单击元素时不会检查此选项）
• 高度和宽度都 > 0
• 对于输入，属性类型！=隐藏

您的元素与这些条件之一匹配。如果您没有能力更改元素的样式，则可以使用以下方法强制使用 javascript 进行更改（由于您提到了 Selenium2 API，因此将假设为 WebDriver）：

((JavascriptExecutor)driver).executeScript("arguments[0].checked = true;", inputElement);

但是，如果您依赖，则不会触发 javascript 事件在该输入的更改事件上，您也必须触发它（有很多方法可以做到这一点，最简单的是使用该页面上加载的任何 javascript 库）。

可见性检查的来源 -

https://github。 com/SeleniumHQ/selenium/blob/master/javascript/atoms/dom.js#L577

定义此的 WebDriver 规范 -

https://dvcs.w3 .org/hg/webdriver/raw-file/tip/webdriver-spec.html#widl-WebElement-isDisplayed-boolean

Answer 2

有时，这意味着页面上有多个元素具有您尝试搜索的相同属性，并且您正在“与错误的元素交谈”。

如果您的元素无法通过 :id 或 :name （或 :class）唯一标识，则可能会很棘手。

有时通过 :xpath 搜索元素会有所帮助，但在某些情况下甚至这是不切实际的。

在这些情况下，您可能必须获取符合您的条件的所有元素，并通过索引引用正确的元素。它很脏，但很管用。

我正在使用 Ruby on Rails 应用程序中的 Selenium / Watir，所以在我的例子中，示例是：

browser = Watir::Browser.new(:firefox, :profile => "default")       
browser.goto("http://www.google.com/analytics")
# login
browser.divs(:text, "+ New Property").last.click

希望这会有所帮助。

Answer 3

我有一个类似的问题，但它与元素在视口中不可见有关。我截取了屏幕截图，发现浏览器窗口太窄，看不到该元素。我做了其中之一，它起作用了：

driver.maximize_window()

请参阅： WebDriver .maximize_window()

Answer 4

或者您可以使用 Selenium Action Class 来模拟用户交互 -
例如

    WebDriver = new FirefoxDriver();

    WebElement menu = driver.findElement(By.xpath("")); // the triger event element

    Actions build = new Actions(driver); // heare you state ActionBuider
    build.moveToElement(menu).build().perform(); // Here you perform hover mouse over the needed elemnt to triger the visibility of the hidden
    WebElement m2m= driver.findElement(By.xpath(""));//the previous non visible element
    m2m.click();

Answer 5

还有另一种情况，可见元素将被识别为不可见：

• 当元素经过 CSS 转换时
• 当元素的父元素经过 CSS 转换时

为了检查您不想与之交互的元素是否经过 CSS 转换，在 CHROME 上执行以下操作： this：

1. 打开检查器
2. 查找有趣的元素（或更可能是其父元素，据说是div元素）
3. 如果有参数，则选择“计算”选项卡
4. ：webkit-transform：matrix（...）这意味着该元素已进行CSS转换，并且硒 2 可能无法识别为可见元素

Answer 6

不可见也可能是由于元素应该慢慢出现的时间造成的。
在这种情况下，强制浏览器稍等一下可能会有所帮助。

例如，请参阅让 WebDriver 等待元素出现的问题存在。

Answer 7

此页面上有很多很好的答案。

1. 我通常从 Maximize.window() 开始，实际上我是在
   driver Factory 或任何初始化驱动程序的地方。这是默认执行的操作 - 始终如此。
2. 由于一些 JavaScript 延迟，它通常是一个等待元素。

上面对两者进行了各种详细讨论。我没有看到的答案是 ScrollToElement。听起来您正在处理元素列表，而在处理时您正在创建更多元素、复选框。这可能会导致列表中的元素移出可见页面。有时您可以用肉眼看到该元素，但就是无法单击它。处理列表时，有时必须插入滚动。

• 设置断点并检查您正在使用的元素是否位于
  窗口边缘、右上/左下。有时当这是
  如果您无法通过 selenium 访问它，但您可以手动单击
  你的鼠标。

因为我遇到过这个问题，所以我创建了一个 PageScroll.java 并将滚动脚本放在那里。以下是此类中的一些方法：

public static void scrollToTop(WebDriver driver) {
      ((JavascriptExecutor) driver)
        .executeScript("window.scrollTo(0,0)");
    }

    public static void scrollToBottom(WebDriver driver) {
      ((JavascriptExecutor) driver)
        .executeScript("window.scrollTo(0, document.body.scrollHeight)");
    }

    public static void scrollToElementTop(WebDriver driver, WebElement element) {
      ((JavascriptExecutor) driver).executeScript(
        "arguments[0].scrollIntoView(true);", element);
    }

    public static void scrollToElementBottom(WebDriver driver, WebElement element) {
      ((JavascriptExecutor) driver).executeScript(
        "arguments[0].scrollIntoView(false);", element);
    }

请参阅 使用 Selenium 将元素滚动到视图中
获取更多示例

Answer 8

我在 Internet Explorer 9 中使用 selenium 2 也遇到了同样的问题，但我的修复方法确实很奇怪。我无法点击表单内的输入 ->硒重复，它们不可见。

当我的形体有弯曲的阴影时就会发生这种情况 -> http://www.paulund.co.uk/creating- Different -css3-box-shadows-effects：在具体的“效果2”中

，我不知道为什么以及如何这个伪元素解决方案停止了硒测试，但它对我有用。

Answer 9

您不能强制访问/更改用户通常无权访问的元素，因为 Selenium 旨在模仿用户交互。

如果发生此错误，请检查：

• 元素在您的视口中是否可见，尝试最大化 Webdriver 正在使用的当前窗口（例如 在node.js中最大化()，maximize_window()in Python），
• 你的元素不会出现两次（在同一个选择器下），并且你选择了错误的元素，
• 如果你的元素是隐藏的，那么考虑让它可见，
• 如果尽管存在限制，您仍想访问/更改隐藏元素的值，然后使用 Javascript（例如 executeScript() 在 node.js 中，execute_script()（Python）。

Answer 10

我只是通过等待元素显示属性来解决这个错误

waitFor() { element.displayed }

Answer 11

我在 django 站点上使用 selenium 进行功能测试时遇到 ElementNotVisibleException 异常，其中引导标志符号作为模板中的链接：

<a href="{% url 'item-add' %}"><span class="glyphicon glyphicon-plus text-danger"></span></a>

在我的功能测试期间，引导样式未加载，然后尝试单击此类链接将引发 ElementNotVisibleException。我设法使它们可点击只需在标签中添加一个空格，如下所示：

<a href="{% url 'item-add' %}"><span class="glyphicon glyphicon-plus text-danger"> </span></a>

Answer 12

在这里添加我的沙粒：如果一个元素位于固定 div 后面，它将被视为不可见，并且您将无法单击它；这件事最近发生在我身上，我按照上面的建议执行一个脚本解决了这个问题，它的作用是：

document.evaluate("<xpath locator for element to be clicked>", document, null, XPathResult.ANY_TYPE, null).iterateNext().click()", locator);

Answer 13

我只是在 ror 项目中使用水豚时解决了这个错误，方法是添加：

Capybara.ignore_elements = true

到features/support/env.rb。

Answer 14

接受的答案对我有用。下面是一些代码，用于查找使 Selenium 认为它不可见的父元素。

function getStyles(element){
	
	computedStyle = window.getComputedStyle(element);

	if(computedStyle.opacity === 0
	|| computedStyle.display === "none"
	|| computedStyle.visibility === "hidden"
	|| (computedStyle.height < 0 && computedStyle.height < 0)
	|| element.type === "hidden") {
		console.log("Found an element that Selenium will consider to not be visible")
		console.log(element);
		console.log("opacity: " + computedStyle.opacity);
		console.log("display: " + computedStyle.display);
		console.log("visibility: " + computedStyle.visibility);
		console.log("height: " + computedStyle.height);
		console.log("width: " + computedStyle.width);
	}

	if(element.parentElement){
		getStyles(element.parentElement);
	}
}

getStyles(document.getElementById('REPLACE WITH THE ID OF THE ELEMENT YOU THINK IS VISIBLE BUT SELENIUM CAN NOT FIND'));