如何通过Capybara / Poltergeist测试触发JQuery“更改”功能

时间:2018-09-25 18:01:39

标签: jquery cucumber capybara poltergeist

在表单上,​​我们具有以下选择字段:

<select class="hundred js-select2 js-country-check select2-hidden-accessible" name="pledge[pledgor_home_country]" id="pledge_pledgor_home_country" tabindex="-1" aria-hidden="true">
  <option value="GB">United Kingdom</option>
  <option value="US">United States</option>
  <option value="DE">Germany</option>
  <option value="AU">Australia</option>
  <option value="BR">Brazil</option>
  <option value="BG">Bulgaria</option>
  <option value="CA">Canada</option>
  <option value="CN">China</option>
  <option value="DK">Denmark</option>
  <option value="EE">Estonia</option>
  <option value="FI">Finland</option>
  <option value="FR">France</option>
  <option value="HK">Hong Kong</option>
  <option value="IS">Iceland</option>
  <option value="IN">India</option>
  <option value="IE">Ireland</option>
  <option value="IL">Israel</option>
  <option value="KE">Kenya</option>
  <option value="LB">Lebanon</option>
  <option value="LU">Luxembourg</option>
  <option value="NL">Netherlands</option>
  <option value="NO">Norway</option>
  <option value="PL">Poland</option>
  <option value="PT">Portugal</option>
  <option value="SG">Singapore</option>
  <option value="ES">Spain</option>
  <option value="SE">Sweden</option>
  <option value="CH">Switzerland</option>
  <option value="TR">Turkey</option>
</select>

我们有一个与之关联的JQuery函数:

 $('#pledge_pledgor_home_country').change(function() { //change stuff on the page})

我想在我们的功能测试中对此进行某种检查,所以我尝试了这种变化:

When("I select a non-EU country such as Switzerland") do
  find('#pledge_pledgor_home_country').find('option[value="CH"]').select_option    
  script = "$('#pledge_pledgor_home_country').change();"
  page.execute_script(script)
end

但是我无法使其正常工作-Capybara#execute_script方法始终返回nil,因此我没有得到任何反馈,并且页面内容也没有按预期更改。如果我save_and_open_page,并且仅从控制台直接运行行$('#pledge_pledgor_home_country'),它将返回html <select>元素,而不是我从在同一页面中的同一脚本上运行时获得的JQuery对象。铬。但是我不确定这是否与测试问题或无头浏览器中运行脚本的问题有关。

我还尝试在此Capybara测试中使用以下脚本:script = "$('#pledge_pledgor_home_country').trigger('change');"。那也不起作用。

在Gemfile中,我们有以下内容:

group :development, :test do
  gem "poltergeist", "~> 1.18.1"
  gem "phantomjs", "~> 2.1.1.0", require: 'phantomjs/poltergeist'
end

在Rails项目的features / support文件夹中,我已经设置了JS驱动程序:

Capybara.javascript_driver = :poltergeist

Capybara.register_driver :poltergeist do |app|
  Capybara::Poltergeist::Driver.new(app, timeout: 1.day, js_errors: false)
end

黄瓜功能文件如下所示:

@javascript
@vcr
Scenario: Updating GDPR display by country
  Given I am on the new pledge page # (just loads the page) in question
  When I select a non-EU country such as Switzerland
  ...

我不确定目前还可以尝试什么。有(好的)方法吗?

1 个答案:

答案 0 :(得分:1)

您正在使用Poltergeist作为驱动程序,就JS / CSS支持而言(由于PhantomJS的放弃),它基本上等效于7年的Safari版本。这导致出现问题的两个可能原因-首先是您的页面中可能存在与PhantomJS不兼容的现代JS,从而阻止了更改处理程序的安装。第二个可能的问题是,在选择失去焦点之前,更改事件可能不会触发。

第二个问题最容易测试-选择选项后,单击页面上的另一个元素。

第一个问题更加棘手,因为PhantomJS不会报告某些不兼容性(例如使用let / const),而只是默默地不解析JS。最初,首先要打开驱动程序注册中的错误(js_errors:true),这样您就不会主动隐藏错误并修复报告的JS错误。但是,真正的解决方案是通过水豚硒驱动程序而不是poltergeist来使用无头铬或Firefox,因此您对当前的JS / CSS有所支持。

在其他问题上,execute_script不会返回任何结果,但是evaluate_script将会是并且如果您希望从JS获得结果,则应该使用该结果。但是,在测试中使用execute/evaluate_script解决“问题”是一个可怕的想法,因为您现在正在做用户永远无法有效地将实际问题隐藏在应用程序中的事情。

请注意,在js-select2元素上的select类中,我假设您实际上有一个JS驱动的select小部件正在替换select。这为第一个潜在的问题提供了更多的证据,因为如果该库正在加载,您可能将无法使用select_option-这是因为JS小部件通常会隐藏原始元素,使其不可交互,因此您需要查找并单击组成窗口小部件的各个元素(通常是ul / li元素)。