如何在 css 页脚中定位元素

Question

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

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

但它使用元 "class" 文本 "oops" 进行验证，因为两者具有相同的 div 路径。我如何在特定页脚中找到跨度 class "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

要找到 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;
}

Answer 3

鉴于您知道这两个跨度可以根据它们的祖先元素进行区分，即 <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 或@提到的 CSS-选择器来缩短页面对象PraveenKumar.

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

class MyPage
  include PageObject

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

如何在 css 页脚中定位元素

How to locate element inside css footer

html

css

ruby

watir

page-object-gem