webdriver中By.cssSelector与By.xpath的区别
1、搜索路径中间的某个节点所在层级有多个该dom节点时，xpath和cssSelector会在多个节点中均搜索后续的节点，如测试1.
2、搜索路径最后一个节点下仍包含该类型的dom节点时，cssSelector会将包含的同名节点也搜索出来，xpath则不会继续向下搜索，只打印搜索路径中的最后一个dom节点，如测试2.
3、查找第几个子节点
xpath：div[2]，查找到父节点下的所有div节点后，取第二个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节点后，取第二个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