TDD Ruby с Capybara: как использовать Capybara для проверки определенных значений страницы в определенных элементах страницы - PullRequest
Новая
       18

TDD Ruby с Capybara: как использовать Capybara для проверки определенных значений страницы в определенных элементах страницы

0 голосов
/ 17 января 2019

Я использую Capybara для проверки того, что мое приложение Ruby / Sinatra правильно отображает страницы.

Я смог проверить, что страница содержит определенные значения, с помощью следующих утверждений:

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

Однако я хочу убедиться, что определенные элементы страницы содержат ожидаемые значения.

Например, различные дочерние элементы:

<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>

1 Ответ

0 голосов
/ 17 января 2019

Вам просто нужно рассчитывать на элемент, который вы хотите проверить внутри - например, 

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
...