Javascript 在水豚中，如何使#find等待具有相同类的不同元素出现？

在Capybara中，您可以隐式地等待一个元素出现

find（'.slide'，可见：true）

如何检测新幻灯片/不同幻灯片是否可见？因此，我可以做一些目前不起作用的事情（Capybara在隐藏当前.slide之前找到它，而不是等待当前幻灯片隐藏和新幻灯片显示）：

例如 我有这样的标记：

<ul>
    <li class="slide active" style="background: green;">
    </li>
    <li class="slide" style="background: blue;">
    </li>
    <li class="slide" style="background: pink;">
    </li>
</ul>
<a href="#" class="next-slide">Next slide</a>

---

完整的JSFIDLE:

最简单的选择可能是给每张幻灯片增加一个类或id-ie

<ul>
    <li class="slide slide-0 active" style="background: green;">
    </li>
    <li class="slide slide-1" style="background: blue;">
    </li>
    <li class="slide slide-2" style="background: pink;">
    </li>
</ul>

3.times do |i|
  find(".slide-#{i}", visible: true).fill_in('image[description]', with: 'foo')
  click_link 'Next slide'
end

3.3倍于我|
查找（“.slide-#{i}”，可见：true）
单击链接“下一张幻灯片”
结束

实际上，您无需修改应用程序的源代码即可完成此操作：

(1..3).each do |i|
  find("ul > .slide.active:nth-child(#{i})").fill_in('image[description]', with: 'foo')
  click_link 'Next slide'
end

find（“ul>.slide.active:第n个子项（#{i}）”）

将等待第

i

个幻灯片变为活动状态，这正是您想要的

---

此代码假定

ul

的前3个子项是幻灯片。

我认为，需要更改已测试应用程序源代码的方法不能称为最简单的方法。

<ul>
    <li class="slide slide-0 active" style="background: green;">
    </li>
    <li class="slide slide-1" style="background: blue;">
    </li>
    <li class="slide slide-2" style="background: pink;">
    </li>
</ul>

3.times do |i|
  find(".slide-#{i}", visible: true).fill_in('image[description]', with: 'foo')
  click_link 'Next slide'
end

(1..3).each do |i|
  find("ul > .slide.active:nth-child(#{i})").fill_in('image[description]', with: 'foo')
  click_link 'Next slide'
end