WebdriverでBy.cssSelectorとBy.xpathの違い

6059 ワード

1.検索パスの中間のあるノードが存在するレベルに複数のdomノードがある場合、xpathとcssSelectorは、テスト1のような複数のノードの中で後続のノードを検索する.
2、検索パスの最後のノードの下にこのタイプのdomノードがまだ含まれている場合、cssSelectorは含む同名ノードも検索し、xpathは下へ検索し続けることなく、検索パスの最後のdomノードのみを印刷し、例えばテスト2.
3、いくつ目のサブノードを検索する
xpath:div[2],親ノードの下にあるすべてのdivノードを検索した後,2番目のdivを取って返す
cssSelector:div:nth-child(2)親ノードの下にある2番目のノードを検索し、そのノードがdivである場合は、返さないと要素が見つかりません
div:first-child、divが親ノードの下の最初のノードである場合、div要素が返されます.
div:last-child、divが親ノードの下の最後のノードである場合、div要素が返されます.
詳細はテスト3を参照してください.
テスト1:
domノード:
<div class="detail-time-picker">
   <div class="indicator top">
      <span class="sfi sfi-chevron-up">
      </span>
   </div>
   <div class="picker-wrapper">
      <ul class="times">
   </div>
   <div class="indicator bottom">
      <span class="sfi sfi-chevron-down"></span>
   </div>
</div>

xpathテストコード:

List<WebElement> eless = driver.findElements(By.xpath("//div[@class='detail-time-picker']/div/span"));
for(int i=0;i<eless.size();i++){
    System.out.println("the list classvalue:"+eless.get(i).getAttribute("class"));
    System.out.println("the list tagname:"+eless.get(i).getTagName());
}

結果:

the list classvalue:sfi sfi-chevron-up
the list tagname:span
the list classvalue:sfi sfi-chevron-down
the list tagname:span

cssSelectorテストコード:

List<WebElement> eless = driver.findElements(By.cssSelector("div.detail-time-picker div span"));
for(int i=0;i<eless.size();i++){
    System.out.println("the list classvalue:"+eless.get(i).getAttribute("class"));
    System.out.println("the list tagname:"+eless.get(i).getTagName());
}

結果:

the list classvalue:sfi sfi-chevron-up
the list tagname:span
the list classvalue:sfi sfi-chevron-down
the list tagname:span

テスト2:
domノード:

<div class="detail-date-picker">
    <div class="datepicker datepicker-inline">
       <div class="datepicker-days" style="display: block;" />
       <div class="datepicker-months" style="display: none;" />
       <div class="datepicker-years" style="display: none;" />
    </div>
</div>

xpathテストコード:

List<WebElement> eless = driver.findElements(By.xpath("//div[@class='detail-date-picker']/div"));
for(int i=0;i<eless.size();i++){
    System.out.println("the list classvalue:"+eless.get(i).getAttribute("class"));
    System.out.println("the list tagname:"+eless.get(i).getTagName());
}

結果:

the list classvalue:datepicker datepicker-inline
the list tagname:div

cssSelectorテストコード:

List<WebElement> eless = driver.findElements(By.cssSelector("div.detail-date-picker div"));
for(int i=0;i<eless.size();i++){
    System.out.println("the list classvalue:"+eless.get(i).getAttribute("class"));
    System.out.println("the list tagname:"+eless.get(i).getTagName());
}

テスト結果:

the list classvalue:datepicker datepicker-inline
the list tagname:div
the list classvalue:datepicker-days
the list tagname:div
the list classvalue:datepicker-months
the list tagname:div
the list classvalue:datepicker-years
the list tagname:div

テスト3:
domノード:

<body>
<div>
<button id="b" onclick = "show_div()">click</button>
</div>
<div id="test">
<div>
  <div class="di1"><p>this is a test text.</p></div>
  <h5 class="h555">hello,this is h5</h5>
  <dl class="firstdl"></dl>
  <dl class="seconddl"></dl>
  <dl class="thirddl"></dl>
</div>
<div>
  <p>pppppppp</p>
  <dl class="dl1"></dl>
  <dl class="dl2"></dl>
  <div class="divdiv1"><p>this is a test text.</p></div>
  <h5 class="h5h55">hello,this is h5</h5>
</div>
<div>second div</div>
</div>
</body>

xpathテストコード:

List<WebElement> ele = driver.findElements(By.xpath("//div[@id='test']/div/dl[1]"));
System.out.println("number is:"+ele.size());
for(int i=0;i<ele.size();i++){
System.out.println(" "+i+" class "+ele.get(i).getAttribute("class"));
}

結果:

number is:2
 0 class firstdl
 1 class dl1

cssSelectorテストコード:

List<WebElement> ele = driver.findElements(By.cssSelector("div#test div dl:nth-child(3)"));
System.out.println("number is:"+ele.size());
for(int i=0;i<ele.size();i++){
System.out.println(" "+i+" class "+ele.get(i).getAttribute("class"));
}

結果:

number is:2
 0 class firstdl
 1 class dl2