如何在css页脚中定位元素

Question

“ok”和“oops”页面上有 2 个文本，一个在 <footer> 下，另一个在 class=> 'meta' 下。 我想验证页脚文本，我正在使用

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

但它使用元“类”文本“oops”进行验证，因为两者具有相同的 div 路径。 如何在特定页脚中找到 span 类“app-txt”？

<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

要找到 ok 使用：

footer .app-txt

要定位 oops，请使用：

.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

鉴于您知道可以根据其祖先元素（即<footer> 与<div class="meta">）区分这两个跨度，您应该将其包含在您的定位器中。

解决方案 1 - 使用嵌套定位器

页面对象可以是：

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

如您所见，通过包含区分祖先元素，即footer_element 与div_element(class: 'meta')，您可以获得两个文本：

p page.in_footer
#=> "ok"

p page.in_meta
#=> "oops"

解决方案 2 - 使用 CSS 选择器

或者，根据您对 CSS 选择器（或 XPath）的熟悉程度，您可以使用 @K.RajaSekharReddy 或 @PraveenKumar 提到的 CSS 选择器来缩短页面对象。

使用 CSS 选择器，页面对象可以是：

class MyPage
  include PageObject

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

Answer 3

要找到ok使用：

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

或

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

要定位 oops，请使用：

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

或

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