jquery - 如何从自动完成中选择 li

Question

在文本框中，当您键入时，我们会自动完成，生成采用以下结构的列表:

<div class="results">
  <ul>
    <li class="even">
    <li class="odd">
    <li class="even">
    etc...

我正在使用 Cucumber(加上 Capybara 和 Webdriver)编写测试，我需要选择第一个 li。

我猜

page.execute_script 没有传递正确的 jQuery，因为下面的代码片段一直返回 null。

page.execute_script %Q{ $('li').eq(1).trigger("mouseenter").click(); }

也就是说，我收到此错误:

TypeError: $("li") is null (Selenium::WebDriver::Error::UnexpectedJavascriptError)

我刚刚开始学习 jQuery，所以有人能告诉我出了什么问题、为什么错以及可能如何修复它吗？

页面上存在 li 元素，我查看了源代码来确定，所以我很困惑它找不到它。

Answer 1

我可能不会尝试使用 page.execute_script 方法单击自动完成列表项。理想情况下，Cucumber 的 When 步骤应始终 100% 模仿用户能够执行的操作。我不希望他们打开 JavaScript 控制台并开始键入脚本来执行以选择列表项;)

显然我知道这不是你想要的，但这就是你用你的方法测试的。

更好的方法是在你的 cucumber 步骤定义之一中类似于以下内容:

When /^I follow the autocomplete link containing "([^"]*)"$/ do |link_text|
  page.find(:css, ".results ul li", :text => link_text).click
end

我相信这应该可行，而且比尝试在 cucumber 步骤中侵入 JS 代码要好。

请注意，page.find 方法返回一个 Capybara::Node::Element (我相信)。 :text 哈希选项告诉 capybara 只查找包含指定文本的元素。如果未找到该元素， capybara 将引发异常。

如果出于某种原因，您的 li 实际上没有可点击的文本，您可以将选择器更改为 ".results ul li:first"，但理想情况下您可以使用该定义进行更多操作而不仅仅是选择第一项。

您可能会遇到一个错误(未找到有关“节点”方法的信息或一些 shinanigans)。如果您在执行此操作时遇到无法解释的奇怪错误，并且不能立即明显看出它是什么，那么您可能需要在 Cucumber 支持目录的 env.rb 中注释掉以下行:

require 'cucumber/rails/capybara_javascript_emulation'

当 capybara 升级时，放在那里的monkeypatch cucumber 坏了，我上次检查还没有部署为稳定版本。

希望这能解决您的问题:)

编辑添加:

我刚刚再次查看了您的问题，觉得我可能想让您知道为什么 $("li") 将返回 null。当您在此脚本执行之前添加“我应该看到...”步骤时， capybara 具有内置的等待元素出现默认超时，当您在页面上查找不存在的元素时，它会使用该超时还没有。如果它没有在指定的时间内出现(我想默认是5秒？)那么 capybara 会给你一个失败的测试。

但是，当您运行execute_script调用时，您将绕过Capybara所有出色的框架并尝试使用jquery直接与DOM交互 - 除了Capybara还没有“等待”对象出现，因此您的javascript可能不会找到它。

我相信我使用 page.find 发布的解决方案适合您，因为该方法确实会等待元素出现在页面上，然后才会引发错误。查找器在这里有更详细的解释:https://github.com/jnicklas/capybara在显示自述文件的“Finding”副标题下。