选择 Capybara 验收测试

Question

我正在使用 Capybara 测试框架对 Selectize jQuery 插件的验收测试寻求帮助。

Selectize 对它生成的 HTML 进行布局的方式存在问题，选择下拉列表和下拉列表中包含的值之间没有明确的链接

你可以从我的 jsfiddle 中看到：http://jsfiddle.net/et4t20wz/

$('.test').selectize({ create: false, 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

所以我们设法使用我在这里找到的解决方案解决了这个问题： Capybara integration tests with jquery.selectize

然而，代码并没有真正起作用。所以我最终使用了我编写的这个脚本。

  var selectize = jQuery('#key').selectize()[0].selectize;

  jQuery(selectize.setValue(selectize.search('#value').items[0].id));

Answer 2

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

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

或

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

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