`

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

xpathcssSelector 
阅读更多
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节点： 
<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
分享到：
| junit一个测试方法测试多种数据
评论
发表评论

您还没有登录,请您登录后再发表评论

相关推荐

    Webdriver element selector

    很好的WebDriver Xpath Css 元素识别参考 ...http://www.techques.com/question/1-8076659/Selenium-WebDriver-Issue-with-By.CSSSelector http://blog.csdn.net/expect88/article/details/8279435

    selenium元素定位

    主要讲了selenium元素定位的两种方法Xpath和CSSselector，而且还举例讲解，简单实用

    python3 selenium自动化测试 强大的CSS定位方法

    ccs的优点：css相对xpath语法比xpath简洁，定位速度比xpath快 css的缺点：css不支持用逻辑运算符来定位，而xpath支持。css定位语法形式多样，相对xpath比较难记。 css定位建议多用，这个定位方式很强大，定位速度快...

    Selenium+Python 自动化操控登录界面实例(有简单验证码图片校验)

    从最简单的Web浏览器的登录界面开始，登录界面如下： 进行Web页面自动化测试，对页面上的元素进行定位和操作是核心。而操作又是以定位为前提的，因此，...css selector 对应于webdriver中的定位方法分别是： driver.f

    selenium+python代码合集

    内容大纲有： id定位 class_name定位 tag_name定位 name定位 LINK_TEXT定位 CSS_SELECTOR定位 XPATH定位

    @FindBy-crx插件

    生成cssselector和selenium @findby是一个google chrome web扩展，为网页上的所选项目生成CSS选择器和XPath。 它配备了一个直观的UI，它可以帮助最终用户以简单的表单与元素属性理解DOM结构。 @findby使用户能够...

    SelectorGadget_1_2_0-crx插件

    1.SelectorGadget是一个开源的Chrome扩展，...2.这个插件可以快速的找到页面某些元素的定位方式，定位方式支持xPath、CSS等。 3.当我们需要通过selenium去操作页面元素时，可以通过该插件快速获取页面元素的定位方式。

    selenium-framework:使用 Selenium、TestNG 和 Maven 的良好起点

    Selenium框架 Selenium 测试用例实现变得...add(CSS_SELECTOR, &lt; CSS&gt; ) add(XPATH, &lt; XPATH&gt; ) verify () click( " LINK_TEXT " , &lt; LINK-TEXT-GOES-HERE &gt; ) click( " CSS_SELECTOR " , &lt; CSS-SELECTOR-GOES

    Automatyzacja-Selenium-Webdriver

    使用Selenium-Webdriver自动化测试用例第一个测试用例： ID（标识号）： 001 标题：使用错误的电子邮件地址进行的新用户... 由于需要在XPATH和CSS Selector定位器中使用长路径，因此该测试可能会对页面结构的更改敏感。

    Element Locator-crx插件

    找到并保存Web元素并获取其xpath / cssSelector代码 此扩展允许您查找和保存每个页面（URL）HTML元素，并显示每个保存的元素的XPath和CSS-Selector。 ***非常适合Web开发人员或更快完成Selenium测试的***。注：安装...

    cucumber-java:对于UI自动化测试框架-这已经足够

    Cucumberjava ... 支持cssSelector \ xPath \ id 并行执行测试。 与BrowserStack集成 重新运行失败的方案-完成... 职能 重新运行失败的方案 如果您只想手动运行失败的方案，请执行以下文件： Fea

    webdriver元素定位笔记

    参考多本书籍和资料整理的元素定位总结内容，设置字体较小，可放大来看。有写内容可能布局不是很合理，但是我所遇到和看到的不同定位的方法都总结在上面了。分享给大家。

    Germanium Selector Builder (Free)-crx插件

    选择器的类型（`css`或 `xpath`）识别您在Selenium中创建的选择器类型 测试。 打开编辑后，您选择元素，您将看到越来越多 选择器添加到编辑器中。 使用光标在编辑之上，如果您 按“闪烁”按钮，您将看到选择器中的...

Magicbox
Global site tag (gtag.js) - Google Analytics