javascript - 选择 capybara 验收测试

Question

我正在寻求一些帮助，以使用 Capybara 测试框架对 Selectize jQuery 插件进行验收测试。

我们在 Selectize 布局其生成的 HTML 的方式上遇到问题，选择下拉列表和下拉列表中包含的值之间没有明确的链接

正如您从我的 jsfiddle 中看到的:http://jsfiddle.net/et4t20wz/

$('.test').selectize({
创建:假，
dropdownParent:'body'
});

查看源代码，包含的 div 内有 3 个选择，下拉列表的值包含在 body 标记内。

我需要一种方法让我们的测试团队能够在两个元素之间创建 1 - 1 连接。到目前为止，我们已经找到了一个相当弱的连接，因为我们知道第一个 Selectize 值将存储在第一个 div.selectize-dropdown 中，我们可以使用此逻辑映射到第一个 div.selectize-control

这是相当脆弱的，可能不是最好的方法，但却是迄今为止我们能想到的最好的方法。我们在网络上找到了一些解决方案，但遗憾的是它们似乎已经过时或依赖于不同的 DOM 结构。

例如:http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/

希望我们不是唯一遇到此问题的人，并且有人可以提供一些帮助/建议

提前致谢。

Answer 1

我相信链接只是在 html 中定位的，组成 selectize 控件的两个 div 会立即插入到转换的 select 元素之后。因此，如果您知道原始选择的 id，您应该能够使用同级选择器获取关联的 div

page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')

或

page.first(:css, '#test ~ div.selectize-dropdown')

如果您已经单击了 div.selective-control(或者可能是其中的输入)，那么 .selectize-dropdown 中的元素应该是可见的，您可以单击它们