アプリケーションでオートコンプリートをテストする必要がありますが、いくつか問題があります。私はこのスクリプトを使用しています: http://loopj.com/jquery-tokeninput/ そしてこのチュートリアルに従っています: http://railscasts.com/episodes/258-token-fields
同様のソリューションをいくつか試しましたが、成功しませんでした: http://blog.aentos.com/post/1114672143/testing-ajax-autocomplete-fields-with-cucumber-and
キュウリ (シナリオ):
When I fill in "token-input-article_tag_tokens" with "R"
Then I should see the following autocomplete options:
| Ruby |
And I click on the "Ruby" autocomplete option
カピバラ (手順):
Then /^I should see the following autocomplete options:$/ do |table|
table.raw.each do |row|
page.should have_css('div.token-input-dropdown-facebook ul li', :text => "#{row[0]}")
end
end
When /^I click on the "([^"]*)" autocomplete option$/ do |link_text|
page.execute_script %Q{ $('.token-input-dropdown-facebook ul li:contains("#{link_text}")').trigger("mouseenter").click(); }
end
HTML (フォーム):
<div class="controls">
<ul class="token-input-list-facebook">
<li class="token-input-input-token-facebook">
<input type="text" autocomplete="off" style="outline: none; width: 30px; " id="token-input-article_tag_tokens">
<tester style="position: absolute; top: -9999px; left: -9999px; width: auto; font-size: 13px; font-family: 'Helvetica Neue', Helvetica, Arial, sans-serif; font-weight: normal; letter-spacing: normal; white-space: nowrap; "></tester>
</li>
</ul><input class="text_field" data-pre="[]" id="article_tag_tokens" name="article[tag_tokens]" size="30" type="text" style="display: none; ">
</div>
HTML (JQuery によって生成されたオートコンプリート リスト)
<div class="token-input-dropdown-facebook" style="display: block; position: absolute; top: 931px; left: 192px; ">
<ul style="display: block; ">
<li class="token-input-dropdown-item2-facebook token-input-selected-dropdown-item-facebook">
<b>R</b>uby
</li>
</ul>
</div>
しかし、キュウリを実行すると、次のエラーが発生します。
And I fill in "token-input-article_tag_tokens" with "R"
cannot fill in, no text field, text area or password field with id, name, or label 'token-input-article_tag_tokens' found (Capybara::ElementNotFound)