selenium之By.cssSelector与By.xpath的区别

最新推荐文章于 2024-04-21 14:36:15 发布

papa8384

最新推荐文章于 2024-04-21 14:36:15 发布

阅读量1k

点赞数 1

分类专栏： selenium 文章标签： xpath cssSelector

本文链接：https://blog.csdn.net/papa8384/article/details/84661869

版权

selenium 专栏收录该内容

6 篇文章 0 订阅

订阅专栏

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.

[b]测试1：[/b]
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

[b]测试2：[/b]
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

[b]测试3：[/b]
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

papa8384

关注

1
点赞
踩
3

收藏

觉得还不错? 一键收藏
0
评论
selenium之By.cssSelector与By.xpath的区别

1、搜索路径中间的某个节点所在层级有多个该dom节点时，xpath和cssSelector会在多个节点中均搜索后续的节点，如测试1.2、搜索路径最后一个节点下仍包含该类型的dom节点时，cssSelector会将包含的同名节点也搜索出来，xpath则不会继续向下搜索，只打印搜索路径中的最后一个dom节点，如测试2.3、查找第几个子节点 xpath：div[2]，查找到父节点下的所有...
复制链接

扫一扫