Question

页面上有2个文本“ok”和“oops”，其中一个文本位于<footer>下class=> 'meta'下span(:alert){div_element(:class => 'application').div_element(:class => 'txt').span_element(:class => 'app-text')}。我想验证页脚文本，我正在使用

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

但它使用元“类”文本“oops”验证两者具有相同的div路径。如何在页脚内部找到span类“app-txt”？

 public static int solution(int[] A)
    {
        double sum = A.Sum(d => (double)d);
        double leftSum=0;
        for (int i = 0; i < A.Length; i++){
            if (leftSum == (sum-leftSum-A[i])) {
                return i;
            }
            else {
                leftSum = leftSum + A[i];
            }
        }
        return -1;
    }

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

找到确定用途：

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

如何在css页脚中定位元素

3 个答案: