测试JQuery自动完成ui用黄瓜 [英] Testing JQuery autocomplete ui with cucumber

问题描述

我有这个黄瓜sceanario：

 当我用john填写 wait 
然后等待
当我点击John Doe时
然后显示页面
  

b $ b

步骤定义：

 然后/ ^ wait $ / do 
 sleep 2 
 end 
 
当/ ^（?: | I）点击（[^] *）$ / do | selector | 
 find（：contains（'＃{selector} ））。单击
 end 
  

它通过但不选择用户。 最终用户在显示页面中等于john。

我甚至不能在javascript控制台中工作。选择任何内容。

  $（：contains（'John Doe'） ）
＃=> [< a class =ui-corner-alltabindex =-1... 
  

如何编写自动完成选择？是纯JavaScript还是黄瓜。

解决方案

 当/ ^我键入（[^ \] *）into自动完成列表（[^ \] *）和我选择（[^ \] *）$ / do | typed，input_name，should_select | 
 page.driver.browser.execute_script％Q {$（'input [data-autocomplete]'）。trigger（focus）} 
 fill_in（＃{input_name}，：with = ; typed）
 page.driver.browser.execute_script％Q {$（'input [data-autocomplete]'）。trigger（keydown）} 
 sleep 1 
 page.driver。 browser.execute_script％Q {$（'。ui-menu-item a：contains（＃{should_select}）'）。trigger（mouseenter）。 } 
 end 
  

使用方法

 我在自动完成列表input_id中键入Foo，并选择Foobar
  

I got this cucumber sceanario:

When I fill in "End User" with "john"
Then wait
Then wait
When I click "John Doe"
Then show me the page

Step definitions:

Then /^wait$/ do
  sleep 2
end

When /^(?:|I )click "([^"]*)"$/ do |selector|
  find(":contains('#{selector}')").click
end

It passes but it doesn't select a user."End User" equals "john" in 'show me the page'.

I even can't get it to work in a javascript console. The following code does not select anything.

$(":contains('John Doe')").last().trigger('click')
# => [<a class=​"ui-corner-all" tabindex=​"-1"...

How can I script a autocomplete select? Be it in pure javascript or in cucumber.

解决方案

Give this a go

When /^I type in "([^\"]*)" into autocomplete list "([^\"]*)" and I choose "([^\"]*)"$/ do |typed, input_name,should_select|
   page.driver.browser.execute_script %Q{ $('input[data-autocomplete]').trigger("focus") }
   fill_in("#{input_name}",:with => typed)
   page.driver.browser.execute_script %Q{ $('input[data-autocomplete]').trigger("keydown") }
   sleep 1
   page.driver.browser.execute_script %Q{ $('.ui-menu-item a:contains("#{should_select}")').trigger("mouseenter").trigger("click"); }
end

Use like so

And I type in "Foo" into autocomplete list "input_id" and I choose "Foobar"

这篇关于测试JQuery自动完成ui用黄瓜的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！