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ノード:
xpathテストコード:
結果:
cssSelectorテストコード:
結果:
テスト2:
domノード:
xpathテストコード:
結果:
cssSelectorテストコード:
テスト結果:
テスト3:
domノード:
xpathテストコード:
結果:
cssSelectorテストコード:
結果:
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