TDD Ruby with Capybara：如何使用 Capybara 验证特定页面元素中的特定页面值

Question

我正在使用 Capybara 测试我的 Ruby/Sinatra 应用程序是否正确呈现页面。

我能够测试该页面是否包含某些值，使用如下语句：

expect(page).to have_content('Campaign_1')

但是，我想做的是检查页面的特定元素是否包含预期值。

例如，各种 'child' 元素：

<li id="campaign_1" style="margin-bottom:25px">

例如 'media-heading name' 子元素的值为 'Campaign_1'，根据下面的代码片段：

<h6 class="media-heading name">Campaign_1</h6>

或者 'media-heading country' 子元素的值 'United Kingdom' 根据下面的代码片段：

<h6 class="media-heading country">United Kingdom</h6>

以下是 .erb 文件内容的副本。

  <ul class="list-group" >
    <% @all_campaigns.each do |campaign| %>
      <a href="/campaign/<%= campaign.name %>" style="text-decoration: none">
        <li id="<%= campaign.name.downcase %>" style="margin-bottom:25px">
          <div class="media">
            <div class="media-left">
              <img src="/images/<%= campaign.image %>.jpeg" class="media-object">
            </div>
          </div>
          <br>
          <div class="media-body">
            <h6 class="media-heading name"><%= campaign.name %></h6>
            <br>
            <div class="left_right_Container">
              <h6 class="media-heading country"><%= campaign.country %></h6>
              <h6 class="media-heading sector"><%= campaign.sector %></h6>
            </div>
            <br>
            <br>
            <h5 class="media-heading target_amount">Target Amount: £<%= campaign.target_amount %></h5>
          </div>
          <div class="progress">
            <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40"
            aria-valuemin="0" aria-valuemax="100" style="width:<%= campaign.percentage %>%">
              <span class=""><%= campaign.percentage %>% Funded</span>
            </div>
          </div>
        </li>
      </a>
    <% end %>
  </ul>

上面的 .erb 文件导致在应用程序运行时创建下面的 HTML（还有更多，这只是一个片段）：

  <li id="campaign_1" style="margin-bottom:25px">
    <div class="media">
      <div class="media-left">
        <img src="/images/Image_1.jpeg" class="media-object">
      </div>
    </div>
    <br>
    <div class="media-body">
      <h6 class="media-heading name">Campaign_1</h6>
      <br>
      <div class="left_right_Container">
        <h6 class="media-heading country">United Kingdom</h6>
        <h6 class="media-heading sector">Automotive</h6>
      </div>
      <br>
      <br>
      <h5 class="media-heading target_amount">Target Amount: £1000000</h5>
    </div>
    <div class="progress">
      <div class="progress-bar progress-bar-success" role="progressbar" aria-valuenow="40" aria-valuemin="0" aria-valuemax="100" style="width:93%">
        <span class="">93% Funded</span>
      </div>
    </div>
  </li>

Answer 1

你只需要期待你想在里面检查的元素 - 例如

heading = page.find('li#campaign_1 .media-heading.name')
expect(heading).to have_content('Campaign_1')

另一个选项（当你有一些事情要检查时更有用）是 within 方法，它限定了 page 引用的内容

within 'li#campaign_1 .media-heading.name' do
  # here page will refer to the .name element
  expect(page).to have_content('Campaign_1')
end

最后，您可以使用 text 或 exact_text 选项

一次完成所有操作

expect(page).to have_css('li#campaign_1 .media-heading.name', text: 'Campaign_1')

将这些方法中的几种结合在一起会得到

within 'li#campaign_1' do
  expect(page).to have_css('.media-heading.name', text: 'Campaign_1'
  expect(page).to have_css('.media-heading.country', text: 'United Kingdom')
end

TDD Ruby with Capybara：如何使用 Capybara 验证特定页面元素中的特定页面值

TDD Ruby with Capybara: How to use Capybara to verify specific page values within specific page elements

ruby

tdd

capybara