Watir 中按钮元素的元素不可见错误答案

【问题标题】：Element not visible error for button element in WatirWatir 中按钮元素的元素不可见错误
【发布时间】：2015-07-26 12:11:17
【问题描述】：

我正在使用 watir 对应用程序执行自动化测试，并在选择选择列表的选项并填写表单后尝试单击提交按钮。但是单击按钮时，它会引发 element not found 错误

按钮标签的html sn-p

<button type="submit" class="md-primary md-raised md-button md-default-
theme" ng-transclude=""><span class="ng-binding 
ng-scope">Submit</span><div style="" class="md-ripple-container">
</div>   
</button>

红宝石脚本

require "watir"
require "watir-webdriver"
browser =  Watir::Browser.new :firefox
browser.goto 'https://54.69.254.137/webui#/landing'
browser.driver.manage.window.maximize
browser.button(:class =>'sign-in md-button md-default-theme').click
browser.text_field(:id =>'input_001').set('abcadmin@example.com')
browser.text_field(:id =>'input_002').set('password')
browser.button(:class =>'md-primary md-raised md-button md-default-  
theme').click
browser.input(:id =>'input_002').when_present.click
browser.element(aria_label:'What do you want to do?').when_present.click
browser.element(:id =>'select_option_00G').when_present.click
browser.element(aria_label:'About what?').when_present.click
browser.element(:id =>'select_option_00P').when_present.click
browser.textarea(:id =>'input_00N').when_present.set('Discuss about 
javascript and later test the application??')
browser.button(:class =>'md-primary md-raised md-button md-default-   
theme').click

它会抛出以下错误

Selenium::WebDriver::Error::ElementNotVisibleError: Element is not 
currently visible and so may not be interacted with

我尝试过使用

browser.button(:class =>'md-primary md-raised md-button md-default-    
theme').when_present.click

，但它会抛出超时错误。无法纠正错误。请帮助!!

【问题讨论】：

异常表示元素已找到但不可见。你能看到元素吗？您也可能定位错误的元素。例如，如果页面上有多个提交按钮，第一个是隐藏的，而你试图点击第二个，就会出现这个异常。
span 元素正在覆盖/设置按钮元素的样式。只需点击跨度
与@Justin Ko 所说的相呼应，class 不能保证是唯一的。尽管我尽可能避免使用它，但这可能是使用 XPath 定位元素的一种情况。即browser.button(:xpath => '<xpath here>').click。这应该没有问题（您可以使用 Chrome 开发人员工具轻松获取 XPath。或者，如果只有一个提交按钮，您可以尝试browser.span(:text, 'Submit').click。
嗨！！！！ browser.span(:text, 'Submit').click, 工作....谢谢大家...

标签： angularjs watir watir-webdriver

【解决方案1】：

您正在尝试一次选择多个课程。为此，您必须使用 css 选择器而不是类选择器，它看起来像这样：

browser.button(:css =>'.md-primary.md-raised.md-button.md-default-   
theme').click

只有当你选择一个类名时，类选项才会起作用，例如

browser.button(:class =>'md-primary').click

【讨论】：

这并不完全正确。 :class 定位器确实适用于多个类。但是，没有特殊的逻辑来处理处于不同顺序的类。
有道理，但这让我想知道问题中的代码是什么不起作用。这些类的顺序似乎正确。
根据错误信息，问题不在于找到按钮。问题在于按钮不可见。鉴于 class 属性看起来很一般，我猜想选择了错误的按钮（因为 Watir 使用了第一个匹配项）。

【解决方案2】：

当前端开发人员想要对一个看起来很无聊的元素（例如按钮或复选框）进行风格化时，我在工作的地方经常遇到这个错误。

在这种特殊情况下，span 元素正在覆盖/设置按钮元素的样式。只需点击跨度即可。

browser.span(:text, 'Submit').click

【讨论】：

【解决方案3】：

元素不可见表示该元素已找到，但被隐藏或隐藏，以致真正的用户无法直接点击按钮。

导致该错误的两个潜在原因，一个是其他东西覆盖了您想要的元素。另一个是在dom中匹配的元素不止一个，而被选中的元素（除非你给出索引值，watir会取它找到的第一个）是不可见的。

确定是哪种情况的快速方法是首先获取匹配元素的计数。这很容易通过在脚本尝试单击按钮之前将 put 插入到您的脚本中（为了便于阅读，在两行上）

buttons_found = browser.buttons(:class =>'md-primary md-raised md-button md-default-theme').size
puts "I found #{buttons_found} matching buttons"

如果返回的不是 1，那么您可能正在选择隐藏按钮。也许改为通过让 watir 查看容器元素内部来选择它，或者找到一种更独特的方式来识别您想要的按钮。

请注意，使用类组合可能有点脆弱，因为类通常用于驱动 CSS 格式化。这会产生两个问题，一个是任何具有相同格式的按钮都可能具有相同的类组合，如果视觉设计发生变化，类也可能发生变化例如，如果找到多个，那么您可以尝试选择按钮通过它的文本，例如：

browser.button(:text 'Submit').click

如果只找到一个元素，则查看是否有其他元素可能掩盖了您想要的元素，然后尝试单击该元素。

【讨论】：