在 Rails 3 中使用 Cucumber/Capybara 测试 jQuery 标记自动完成答案

【问题标题】：Testing jQuery Tokenizing Autocomplete with Cucumber/Capybara in Rails 3在 Rails 3 中使用 Cucumber/Capybara 测试 jQuery 标记自动完成
【发布时间】：2012-07-29 13:08:42
【问题描述】：

我需要在我的应用程序中测试自动完成功能，但我遇到了一些问题。我正在使用这个脚本：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>

但是，当我运行 cucumber 时，出现了这个错误：

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)

【问题讨论】：

也许是一个非常愚蠢的问题...但是您确定 Cucumber 已导航到正确的页面吗？我只是问，因为我没有看到“访问“主页””类型的步骤，但您可能刚刚从问题中排除了该部分。
是的，我已经从问题中排除了那部分。
错误显然不应该出现，if cucumber/capybara 看到的 HTML 与您发布的相同。对我来说，解决这个问题的第一步是确认 cucumber 看到了正确的 HTML。也许在“我填写...”之前添加一个步骤，编写页面正文（调用 page.body），然后您可以检查源代码。

标签： ruby-on-rails ruby testing cucumber capybara

【解决方案1】：

我有一个解决您的问题的方法。也许它可以帮助某人

page.execute_script %Q{ $('li.token-input-dropdown-item2-facebook:first').trigger('mousedown') }

【讨论】：