Jquery 如何从自动完成中选择li

在文本框中，当您键入时，我们有自动完成功能，它会生成一个采用以下结构的列表：

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

也就是说，我得到了这个错误：

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

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

---

页面上存在

li

元素，我查看了源代码以确定它是否存在，因此我真的很困惑，因为它找不到它。

可能是因为自动完成是在页面呈现之后生成的，因此执行脚本可能不会拾取它

---

尝试使用jQuery命令

live

将触发器附加到document.ready之后呈现的项目。

可能是因为自动完成是在页面呈现之后生成的，因此执行脚本可能不会拾取它

---

尝试使用jQuery命令

live

将触发器附加到document.ready之后呈现的项目。

以下代码对我适用。我已经去掉了所有多余的代码。要记住的关键点是，调用函数时列表项存在（即，一旦页面“就绪”，我就访问它）

在您的情况下，您应该只在填充自动建议后执行$（'li'），否则它将为空。还要注意，eq（）是基于零的-因此第一个元素是eq（0），而不是eq（1）

$（文档）.ready（函数（）{
console.log（$（'li'）.eq（0））；//输出第一个列表元素项1
});

第1项
第2项
第3项
第4项

以下代码对我很有用。我已经去掉了所有多余的代码。要记住的关键点是，调用函数时列表项存在（即，一旦页面“就绪”，我就访问它）

在您的情况下，您应该只在填充自动建议后执行$（'li'），否则它将为空。还要注意，eq（）是基于零的-因此第一个元素是eq（0），而不是eq（1）

$（文档）.ready（函数（）{
console.log（$（'li'）.eq（0））；//输出第一个列表元素项1
});

第1项
第2项
第3项
第4项

我可能不会尝试使用page.execute\u脚本方法单击自动完成列表项。理想情况下，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

我相信这应该行得通，而且比在你的黄瓜步骤中尝试破解JS代码要好

请注意，page.find方法返回一个Capybara:：Node:：元素（我相信）。：text散列选项告诉capybara只查找包含指定文本的元素。如果找不到元素，capybara将引发异常

如果出于任何原因，您的li中实际上没有可点击的文本，您可以将选择器更改为

”。结果ul li:first“

，但理想情况下，您可以使用该定义，而不仅仅是选择第一项

您可能会遇到一个bug（找不到有关“node”方法的某些内容或一些恶作剧）。如果在执行此操作时遇到一个无法解释的奇怪错误，并且该错误不是很明显，那么您可能需要在cucumber的支持目录的env.rb中注释掉以下行：

require 'cucumber/rails/capybara_javascript_emulation'

monkeypatch cucumber在水豚升级时坏了，我上次检查时还没有作为稳定版本部署

希望这能解决您的问题：）

编辑以添加：

我只是再次看了看你的问题，我想让你知道为什么$（“li”）会返回空值。当您在此脚本执行之前添加“并且我应该看到…”步骤时，capybara内置了等待元素出现默认超时，当您在页面上查找尚未出现的元素时，它会使用默认超时。如果它没有在指定的时间内出现（我认为默认情况下是5秒？），那么水豚会给你一个失败的测试

然而，当您运行execute_脚本调用时，您绕过了Capybara的所有令人敬畏的框架，并试图使用jquery直接与DOM交互——只是Capybara还没有“等待”对象出现，所以您的javascript可能找不到它

---

我相信我使用page.find发布的解决方案对您有效，因为该方法会在引发错误之前等待元素出现在页面上。查找程序在这里有更详细的解释：在显示自述文件的“查找”子标题下。

我可能不会尝试使用page.execute\u 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

我相信这应该行得通，而且比在你的黄瓜步骤中尝试破解JS代码要好

请注意，page.find方法返回一个Capybara:：Node:：元素（我相信）。：text散列选项告诉capybara只查找

require 'cucumber/rails/capybara_javascript_emulation'