How to locate element inside css footer

Question

There are 2 text on page "ok" and "oops" one is under <footer> another under class=> 'meta'. I want to verify footer text and I am using

span(:alert){div_element(:class => 'application').div_element(:class => 'txt').span_element(:class => 'app-text')} 

but its verifying with meta "class" text "oops" as both have same div path. How I can locate the span class "app-txt" inside footer specific?

<footer>
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">ok</span>
    </div>
  </div>
</footer>

<div class="meta">
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">oops</span>
    </div>
  </div>
</div>

Answer 1

To locate the ok use:

footer .app-txt

To locate the oops use:

.meta .app-txt

footer .app-txt {color: red;}
.meta .app-txt {color: orange;}

<footer>
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">ok</span>
    </div>
  </div>
</footer>

<div class="meta">
  <div class="application" style="opacity: 1;">
    <div class="txt" style="background-color: transparent;">
      <span class="app-txt" style="background-color: transparent;">oops</span>
    </div>
  </div>
</div>

Answer 2

To locate the ok use:

footer >.application >.txt >span.app-txt {
   color: blue;
}

or

footer >span.app-txt {
   color: blue;
}

To locate the oops use:

.meta >.application >.txt >span.app-txt {
   color: orange;
} 

or

.meta >span.app-txt {
   color: orange;
}

Answer 3

Given that you know that the two spans can be differentiated based on their ancestor element, ie the <footer> vs the <div class="meta">, you should include that in your locator.

Solution 1 - Using Nested Locators

The page object could be:

class MyPage
  include PageObject

  # The span in the footer
  span(:in_footer) { footer_element.span_element(class: 'app-txt') }

  # The span in the meta div
  span(:in_meta) { div_element(class: 'meta').span_element(class: 'app-txt') }
end

As you can see, by including the differentiating ancestor element, ie the footer_element vs the div_element(class: 'meta'), you can get both texts:

p page.in_footer
#=> "ok"

p page.in_meta
#=> "oops"

Solution 2 - Using CSS-Selectors

Alternatively, depending on your comfort with CSS-selectors (or XPath), you could shorten the page object by using the CSS-selectors mentioned by @K.RajaSekharReddy or @PraveenKumar.

Using the CSS-selectors, the page object could be:

class MyPage
  include PageObject

  span(:in_footer, :css => 'footer .app-txt')
  span(:in_meta, :css => '.meta .app-txt')
end