多个元素匹配时指定元素

Question

如何使用水豚 select 使用 within 的项目？

我有以下HTML

<div id ="projects"> 
  ...
  <div class="card">lorem</div>
  <div class="card">ipsum</div>
</div>

我需要 select 第二个 div 和 class='card'。

  within(:css, '#attachments') do
    within(:css, '.card') do
     expect(page).to have_text('ipsum')
    end
  end

但不确定该怎么做。

Answer 1

您可以使用

within all(:css, ".card")[1] do
  expect(page).to have_text('ipsum')
end

顺便说一句，如果您没有在 spec_helper.rb 中设置不同的 default_selector，例如

Capybara.default_selector = :xpath

你可以直接使用

within all(".card")[1] do
 expect(page).to have_text('ipsum')
end

因为默认情况下，水豚会使用 :css 作为 default_selector。

Answer 2

select 该元素有多种方法，这取决于两个 div 之前的 ... 文档结构到底是什么（是否有其他 div 等）。 @fabersky 的答案中显示了一种不依赖于该结构的方法，即使用 all 并索引到结果 (all('.card')[1]) - 如果页面是高度动态的，您可能想要指定最小值，例如 (all('.card', minimum: 2)[1])。另一种选择是编写一个 XPath 以仅匹配正确的元素（通常更好的做法是更喜欢 select 或者 return 单个元素而不是使用 all 并尽可能索引到结果).

within(:css, '#attachments') do
  within(:xpath, XPath.css('.card')[2]) do
    expect(page).to have_text('ipsum')
  end
end

在这种情况下，[2] 是 XPath 表达式的一部分（变为 .//*[contains(concat(' ', normalize-space(@class), ' '), ' card ')][2]），因此索引从 1

开始

多个元素匹配时指定元素

Specify the element when multiple elements matching

rspec

capybara