如何使用 Selenium 测试 jQuery TokenInput 字段

Question

我无法使用 selenium 测试表单中的 Tokeninput 字段。情况是，当我们输入某些内容时，它会提供一个可供选择的选项列表，但这些选项不是 DOM 的一部分。文本填充该字段，但不选择该项目。

我写的代码是：

Given admin user is on schedule interview page
And he select "obie[1]" and "DHH[1]" from the candidate name(s) auto sugget field

**step defination**
Given /^he select "([^"]*)" and "([^"]*)" from the candidate name\(s\) auto sugget field$/ do |arg1, arg2|

within(:css, "#interview_template_candidate_names_input") do

    fill_in('tmp',:with => arg1)              --tmp is name of the token input field
    find("li:contains('obie[1])'").click
    save_and_open_page
  end
 end

Answer 1

我终于成功地完成了这项工作。要点如下： https://gist.github.com/1229684

该列表是 dom 的一部分（ div.token-input-dropdown），它被添加为 body 元素的最后一个子元素，这可能就是您没有看到它的原因。

如果您了解 tokeninput 插件正在做什么，您可以更好地了解您需要做什么。对于您创建的每个 tokeninput，插件：

1. 创建一个 ul.token-input-list （紧接在 input#your_input_id 之前）
2. 创建一个 ul.token-input- list input#token-input-your_input_id
3. 隐藏 input#your_input_id
4. 创建一个 div.token-input-dropdown

所以最具挑战性的部分是找到正确的ul.token-input-list，因为您必须根据其相对于原始输入的位置找到它，并且 selenium webdriver 不允许您导航 dom。

之后，您只需在 div.token-input-dropdown li 上填写 input#token-input-your_input_id 和“click”即可与您正在寻找的选项相匹配。