如何使用Selenium测试jQuery TokenInput字段 [英] How to test jQuery TokenInput field using Selenium

问题描述

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

I'm unable to test a Tokeninput field in a form using selenium. The situation is when we type something, it gives a list to options to select but those options aren't part of the DOM. The text fills the field but doesn't select the item.

我写的代码是:

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

推荐答案

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

I finally succeeded in making this work. Here's the gist: https://gist.github.com/1229684

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

The list is part of the dom (div.token-input-dropdown), it's added as the last child of the body element, which is probably why you didn't see it.

如果您了解tokeninput插件的功能，则可以更好地了解您需要做什么.对于您创建的每个令牌输入，插件:

If you understand what the tokeninput plugin is doing, you can get a better idea of what you need to do. For each tokeninput you create, the plugin:

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

1. creates a ul.token-input-list (immediately before input#your_input_id)
2. creates a ul.token-input-list input#token-input-your_input_id
3. hides the input#your_input_id
4. creates a div.token-input-dropdown

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

So the most challenging part is finding the correct ul.token-input-list, because you have to find it based on its position relative to the original input, and the selenium webdriver doesn't let you navigate the dom.

然后，您只需在div.token-input-dropdown li选项上填写与您要查找的内容相匹配的input#token-input-your_input_id和"click".

After that, you just fill in the input#token-input-your_input_id and "click" on the div.token-input-dropdown li option that matches what you're looking for.

这篇关于如何使用Selenium测试jQuery TokenInput字段的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！