Q:

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

I'm using Capybara to test that my Ruby/Sinatra application renders the pages correctly. 
I been able to test that the page contains certain values, with statements like the following:
expect(page).to have_content('Campaign_1')
However, what I want to do is check that specific elements of the page contain the expected values. 
For instance, the various 'child' elements of:
<li id="campaign_1" style="margin-bottom:25px"> 
such as the 'media-heading name' child element has the value 'Campaign_1', as per the code snippet below:
<h6 class="media-heading name">Campaign_1</h6>
or that the 'media-heading country' child element has the value 'United Kingdom' as per the code snippet below:
<h6 class="media-heading country">United Kingdom</h6>
Below is a copy of the .erb file contents.
  <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>

The above .erb file results in the HTML below (there's more, this is just a snippet) being created when the app runs:
  <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>

A:

You just need to expect on the element you wish to check inside - for instance
heading = page.find('li#campaign_1 .media-heading.name')
expect(heading).to have_content('Campaign_1')

Another option (more useful when you have a few things to check) is the within method which scopes what page refers
within 'li#campaign_1 .media-heading.name' do
  # here page will refer to the .name element
  expect(page).to have_content('Campaign_1')
end

Finally, you could just do it all in one expectation using the text or exact_text options
expect(page).to have_css('li#campaign_1 .media-heading.name', text: 'Campaign_1')

Combining a couple of those methods together would give
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

