CssSelector是我最喜欢的元素定位方法,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素,原因是CSS locator比XPath locator速度快,特别是在IE下面(IE没有自己的XPath 解析器(Parser))他比xpath更高效更准确更易编写,美中不足是根据页面文字时略有缺陷没有xpath直接。

因为前端开发人员就是用CSS Selector设置页面上每一个元素的样式,无论那个元素的位置有多复杂,他们能定位到,那我们使用CSS Selector肯定也能非常精准的定位到页面Elements。

CssSelector常用定位

1.根据tagName

  driver.findElement(By.cssSelector("input")

2.根据ID

  driver.findElement(By.cssSelector("input#username"));html标签和#id

  driver.findElement(By.cssSelector("#username"));只是#id

3.根据className

  单一class:driver.findElement(By.cssSelector(".username"));.class

  复合class:driver.findElement(By.cssSelector(".username.**.***"));.classA.classB

4.根据元素属性

  1)精准匹配:

    [A]  driver.findElement(By.cssSelector("input[name=username]"));属性名=属性值,id,class,等都可写成这种形式

[B]  driver.findElement(By.cssSelector("img[alt]"));存在属性。例如img元素存在alt属性

    [C]  driver.findElement(By.cssSelector("input[type='submit'][value='Login']"));多属性

  2)模糊匹配:(正则表达式匹配属性)

    [A]  ^=  driver.findElement(By.cssSelector(Input[id ^='ctrl']));匹配到id头部 如ctrl_12

    [B]  $=  driver.findElement(By.cssSelector(Input[id $='ctrl']));匹配到id尾部 如a_ctrl

    [C]  *=  driver.findElement(By.cssSelector(Input[id *= 'ctrl']));匹配到id中间如1_ctrl_12

    更多正则匹配原则请查看CSS3 选择器——属性选择器  http://www.w3cplus.com/css3/attribute-selectors

5.查询子元素

<form id="form" class="fm" name="f">
  <span id="s_kw_wrap" class="bg s_ipt_wr quickdelete-wrap">
    <input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd">
  </span>
  <span id="s_btn_wr" class="btn_wr s_btn_wr bg">
    <input id="su" class="btn self-btn bg s_btn" type="submit" value="百度一下">
  </span>
</form>

案例html

以上代码是百度首页搜索输入框和按钮的html,下面讲解以此为例

  1)子元素   A>B

    WebElement input=  driver.findElement(By.cssSelector("form>span>input"));//搜索输入框

  2)后代元素   A空格B

    WebElement input=  driver.findElement(By.cssSelector("form input"));//搜索输入框

  3)第一个后代元素  :first-child

    WebElement span= driver.findElemet(By.cssSelector("form :first-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

      可定位到三个元素:<span id="s_kw_wrap".../> <input id="kw"..../> <input id="su"........./>

    WebElement span= driver.findElemet(By.cssSelector("form input:first-child"));//冒号前无空格,定位到form下所有级别的第一个input元素

      可定位到两个元素:<input id="kw"..../> <input id="su"........./>

    WebElement span= driver.findElemet(By.cssSelector("form>span:first-child"));//冒号前无空格,定位到form直接子元素中的第一个span元素

      可定位到一个元素:<span id="s_kw_wrap".../>

  4)最后一个子元素   :last-child  [类同:first-child]

    WebElement userName = driver.findEleme(By.cssSelector("form :last-child"));//冒号前有空格,定位到form下所有级别的第一个子元素

  5)第2个子元素    :nth-child(N)  [类同:first-child]

    WebElement userName = driver.findElemet(By.cssSelector("form#form :nth-child(2)"));//冒号前有空格,定位到form下所有级别的第二个子元素

6.查询兄弟元素

  driver.findElement(By.cssSelector("form#form span+span")); 定位到a 再定位到和它相邻的b

深入学习cssselector可访问以下地址:


http://www.w3.org/TR/css3-selectors/

CSS3 选择器——基本选择器  http://www.w3cplus.com/css3/basic-selectors
CSS3 选择器——属性选择器  http://www.w3cplus.com/css3/attribute-selectors
CSS3 选择器——伪类选择器  http://www.w3cplus.com/css3/pseudo-class-selector
 

【Selenium专题】元素定位之CssSelector的更多相关文章

  1. 【基础】selenium中元素定位的常用方法(三)

    一.Selenium中元素定位共有八种 id name className tagName linkText partialLinkText xpath cssSelector 其中前六种都比较简单, ...

  2. 《手把手教你》系列技巧篇(十七)-java+ selenium自动化测试-元素定位大法之By css上卷(详细教程)

    1.简介 CSS定位方式和xpath定位方式基本相同,只是CSS定位表达式有其自己的格式.CSS定位方式拥有比xpath定位速度快,且比CSS稳定的特性.下面详细介绍CSS定位方式的使用方法.xpat ...

  3. 《手把手教你》系列技巧篇(十八)-java+ selenium自动化测试-元素定位大法之By css中卷(详细教程)

    1.简介 按计划今天宏哥继续讲解倚天剑-css的定位元素的方法:ID属性值定位.其他属性值定位和使用属性值的一部分定位(这个类似xpath的模糊定位). 2.常用定位方法(8种) (1)id(2)na ...

  4. 《手把手教你》系列技巧篇(十九)-java+ selenium自动化测试-元素定位大法之By css下卷(详细教程)

    1.简介 按计划今天宏哥继续讲解css的定位元素的方法.但是今天最后一种宏哥介绍给大家,了解就可以了,因为实际中很少用. 2.常用定位方法(8种) (1)id(2)name(3)class name( ...

  5. [python爬虫] Selenium常见元素定位方法和操作的学习介绍(转载)

    转载地址:[python爬虫] Selenium常见元素定位方法和操作的学习介绍 一. 定位元素方法 官网地址:http://selenium-python.readthedocs.org/locat ...

  6. selenium界面元素定位

    一.        Selenium界面元素定位 本文元素定位以das2为例 #导入包 from selenium import  webdriver #打开火狐驱动 driver=webdriver ...

  7. python+selenium遇到元素定位不到的问题,顺便记录一下自己这次的错误(报错selenium.common.exceptions.NoSuchElementException)

    今天在写selenium一个发送邮件脚本时,遇到一些没有找到页面元素的错误.经过自己反复调试,找原因百度,终于解决了.简单总结一下吧,原因有以下几点: 一:Frame控件嵌套,.Frame/Ifram ...

  8. Selenium Web元素定位方法

    Selenium是用于Web应用测试的自动化测试框架,可以实现跨浏览器和跨平台的Web自动化测试.Selenium通过使用WebDriver API来控制web浏览器,每个浏览器都都有一个特定的Web ...

  9. 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解

    目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...

  10. 《手把手教你》系列技巧篇(十四)-java+ selenium自动化测试-元素定位大法之By xpath上卷(详细教程)

    1.简介 按宏哥计划,本文继续介绍WebDriver关于元素定位大法,这篇介绍定位倒数二个方法:By xpath.xpath 的定位方法, 非常强大.  使用这种方法几乎可以定位到页面上的任意元素. ...

随机推荐

  1. inner join, left join, right join 和 full join

    inner join:理解为“有效连接”,两张表中都有的数据才会显示left join:理解为“有左显示”,比如on a.field=b.field,则显示a表中存在的全部数据及a.b中都有的数据,a ...

  2. openshift 容器云从入门到崩溃之二《准备环境》

    openshift 从3.9开始就开始支持系统组件在容器里运行了,之前版本都是直接运行在操作系统上,名字也改了叫OKD 目前最新的稳定版本是3.11,所以就安装3.11版本 准备环境: 主机名 系统 ...

  3. 【LeetCode每天一题】Multiply Strings(字符串乘法)

    Given two non-negative integers num1 and num2 represented as strings, return the product of num1 and ...

  4. 2019.03.23 Http

    自己也要分清楚  看清楚 request,response 一个是请求  一个是相应 行 头    之间还有个空行    体 HttpRequest请求对象(只读) 当用户访问一个视图函数时,Djan ...

  5. vue proxyTable 跨域问题。

  6. 背景图宽高100%无法无法显示的问题【body设置relative,当前元素absolute】

    以下1,2两个关键元素 body{   width:100%;   height:100%;   position:relative; //1 } .login-form { width: 100%; ...

  7. 解决使用window.history.back(),返回上一页后,页面不刷新问题

    window.onpageshow = function(event) { if (event.persisted) { window.location.reload(); } }

  8. JS取出两个数组中不重复的值

    var array = [0, 1, 2, 3, 4, 'age', 6, 7, 8, 9]; var array2 = [0, 1, 'age', 6, 7, 8, 9]; var arr3 = [ ...

  9. iOS应用图标及尺寸

    Icon and Image Sizes Every app needs an app icon and a launch file or image. In addition, some apps ...

  10. !! MACD战法总结

    我现在只发技术,不预测大盘.其实说实话,大盘不用预测,只要按照guoweijohn战法,有买入信号就入,有卖出信号就出..你也会成为股神..不是吹牛,且听慢慢分解 股市有三种市场: 一.牛市 二.震荡 ...