前言

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

被测网页的HTML代码

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<style type="text/css">
input.spread { Font-SIZE:20pt;}
input.tight { FONT-SIZE:10pt;}
</style>
</head>
<body onload="document.getElementById('div1input').focus()">
<div id="div1" style="text-align:center">
<input id="div1input" class="spread"/></input>
<a href="http://www.sogou.com">搜狗搜索</a>
<img alt="div1-img1" src="http://www.sogou.com/images/logo/new/sogou.png"
href="http://www.sogou.com">搜狗图片</img>
<input type="button" value="查询"></input>
</div>
<br>
<p>第一段文字</p>
<p>第二段文字</p>
<div name= "div2" style="text-align:center">
<input name="div2input" class="tight"></input>
<a href="http://www.baid.com">百度搜索</a>
<img alt="div2-img2" src="http://www.baidu.com/img/bdlogo.png"
href="http://www.baidu.com">百度图片</img>
<input type="button" value="查询"></input>
</div>
<div class="foodDiv">
<ul id="recordlist">
<p>土豆</p>
<li>西红柿</li>
</ul>
</div>
</body>
</html>

被测代码

①使用绝对路径定位元素

目的

在被测试网页中,查找第一个div中的查询按钮

CSS定位方式:

html > body > div >input[value="查询"]

Python定位语句:

element = driver.find_element_by_css_selector('html > body > div >input[value="查询"]')

代码解释:

上述CSS定位表达式使用绝对路径定位属性value的值为“查询”的页面元素。从CSS定位表达式可以看出,步间通过“>"分割,区别于XPATH路径中的正”/“,并且也不再使用@符号选择属性。

②使用相对路径定位元素

目的

在被测试网页中,查找第一个div下的查询按钮

CSS定位表达式:

input[value="查询"]

Python定位语句:

element = driver.find_element_by_css_selector('input[value="查询"]')

代码解释

上述CSS表达式通过相对路径使用元素名称和元素的属性及属性值进行页面元素的定位。

③使用class名称定位元素

目的

在被测网页中,查找第一个div元素下的input输入框

CSS定位表达式:

css.spread

python定位语句:

element = driver.find_element_by_css_selector('css.spread')

代码解释

上述CSS定位表达式使用input页面元素的class属性名称spread来进行定位,用点(.)分割元素名与class属性名,点号后面是class属性名称

④使用ID属性值定位元素

目的

在被测试网页中,查找第一个dic元素下ID属性值为div1input“的input元素

CSS定位语句:

input#div1input

Python定位语句:

element = driver.find_element_by_css_selector('input#div1input')

代码解释

上述CSS定位表达式使用input页面元素的ID属性值div1input进行定位,使用#号分割元素名和ID属性值,#后面是ID属性值

⑤使用页面其他属性值定位元素

目的

在被测网页中,查找div元素下的第一张图片元素img

CSS定位表达式:

img[alt="div1-img1"]
img[alt="div1-img1"][href="http://www.sogou.com"]

Python定位语句:

element = driver.find_element_by_css_selector('img[alt="div1-img1"]')
element = driver.find_element_by_css_selector('img[alt="div1-img1"][href="http://www.sogou.com"]')

代码解释:

表达式1和表达式2是等价的,都是定位第一个img元素

表达式1:表示使用img页面元素的alt元素的属性值div1-img1进行定位。若定位的页面元素始终具有唯一的属性值,此定位方式可以解决很多频繁变动的页面元素

表达式2:表示同时使用了img页面元素的alt和href属性进行页面元素的定位。在某些复杂的定位场景,可使用多个属性来确保定位元素的唯一性。

⑥使用属性值的一部分内容定位元素

目的

在被测试网页中,查找“搜狗搜索”链接

CSS定位表达式:

 a[href^="http://www.so"]
a[href$="gou.com"]
a[href*="sogou"]

Python定位语句:

 element = driver.find_element_by_css_selector('a[href^="http://www.so"]')
element = driver.find_element_by_css_selector('a[href$="gou.com"]')
element = driver.find_element_by_css_selector('a[href*="sogou"]')

代码解释

1.表示匹配链接地址开始为http://www.so关键字串的链接元素,以字符^指明从字符串的开始匹配

2.表示匹配链接地址结尾包含gou.com关键字串的链接元素,以字符$指明在字符串的结尾匹配

3.表示匹配链接地址包含sogou关键字串的链接元素,以字符*指明在需要进行模糊查询

使用此模糊定位方式,可匹配动态变化的属性值的页面元素,只要找到属性值固定不变的关键部分,就可以进行模糊匹配定位。此方法可以解决大部分复杂定位的问题,当然无论是方式都需要灵活使用才能确保能够准确的定位都想要定位的元素

⑦使用页面元素进行子页面元素的查找

目的

在被测网页中,查找第一个div下的第一个input元素

CSS定位表达式:

 div#div1>input#div1input
div input

Python定位语句:

 element=driver.find_element_by_css_selector("div#div1>input#div1input")
element=driver.find_elements_by_css_selector("div input")

代码解释

1.表达式1中的div#div1,表示在被测试网页上定位到ID属性值为div1的div页面元素,> 表示在以查找到的div元素的子页面元素中进行查找,input#div1input表示查找ID属性值为div1input的input页面元素,此方法可实现查找div下子页面元素的办法

2.表达式2表示匹配所有属于div元素后代的input元素,表达式中父元素div和子元素input中间需用空格分割,注意此表达式是定位一组input元素,并不是单个input元素

⑧使用伪类定位元素

目的

在被测试网页中查找第一个div下的指定子页面元素

CSS定位表达式:

 div#div1 :first-child
div#div1 :nth-child(2)
div#div1 :last-child
input:focus
input:enabled
input:checked
input:not([id])

Python定位语句:

1 element=driver.find_element_by_css_selector("div#div1 :first-child") 
2 element=driver.find_element_by_css_selector("div#div1 :nth-child(2)")
3 element=driver.find_element_by_css_selector("div#div1 :last-child")
4 element=driver.find_element_by_css_selector("input:focus")
5 element=driver.find_elements_by_css_selector("input:enabled")
6 element=driver.find_elements_by_css_selector("input:checked")
7 element=driver.find_elements_by_css_selector("input:not([id])")

代码解释

伪类表达式是CSS语法支持的定位方式,前3个表达式特别注意的是在冒号前一定要有一个空格,否则定位不到想要定位的元素

1.表达式1表示查找ID属性值为div1的div页面元素下的第一个子元素,根据被测试网页定位的是div下的input元素,first-child表示查找某个页面元素下的第一个子页面元素

2.表达式2表示查找ID属性值为div1的div页面元素下的第二个子元素,参照被测网页,定位到的页面元素是一个链接元素

3.表达式3表示查找ID属性值为div1的div页面元素下的最后一个子元素,根据被测试网页定位的是一个按钮元素;last-child表示的是查找某个页面元素下的最后一个子页面元素

4.表达式4 表示查找当前获取焦点的input页面元素

5.表达式5表示查找可操作的input元素

6.表示查找处于勾选状态的checkbox页面元素

7.表示查找所有无id属性的input页面元素

⑨查找同级兄弟页面元素

目的

在被测试网页中,查找第一个div下第一个input子页面元素同级兄弟页面元素

CSS定位表达式:

 div1#div1 > input + a
div1#div1 > input + a + img
div1#div1 > input + * + img
ul#recordlist > p~li

Python定位语句:

 element=driver.find_element_by_css_selector("div1#div1 > input + a")
element=driver.find_element_by_css_selector("div1#div1 > input + a + img")
element=driver.find_element_by_css_selector("div1#div1 > input + * + img")
element=driver.find_elements_by_css_selector("ul#recordlist > p~li")

代码解释

1.表达式1表示在ID属性值为div1的页面元素下,查找input页面元素后的同级的且相邻的链接元素a

2.表达式2表示在ID属性值为div1的页面元素下,查找input元素和链接元素a后面相邻的图片元素img

3.表达式3表示在ID属性值为div1的页面元素下,创造找input页面元素和任意一种页面元素后面的同级且相邻的图片元素img,* 表示任意类型的一个页面元素,只能表示一个元素,如果想用此方法查找第一个div下的最后一个input元素,表达式写法为div#div1 > input + * + * + input或div#div1 > input + a + * + input或div#div1 > input + a + img + input

4.表达式4表示ID属性值为recordlist的ul页面元素下,查找p页面元素以后所有的li元素

⑩多元素选择器

CSS定位表达式支持多元素选择器,也就是一次可以同时选择多个相同的标签,也可以同时选择多个不同的标签,不同标签间用英文的逗号隔开

目的

在被测网页中,同时选择多个不同的页面元素

CSS定位表达式:

div#div1,input,a

Python定位语句:

element=find_elements_by_css_selector("div#div1,input,a')

代码解释

上面的css表达式表示同时查找所有ID属性值为div1的div元素,所有的input元素,所有的a元素

总结

目前为止,已经整理了自动化测试Python+Selenium中对于web测试定位页面元素的两种主流,也是最好的定位方式XPATH和CSS定位方式,在我个人看来两个方式都很不错,效率都很高,也很容易解决日常工作中的问题,也能够减少页面的变动对于脚本的维护成本,当然不同问题还需要不同的方式解决,能解决问题的方法都是好方法,希望以后的日子对于定位元素不再是难题。下面我们对这两种定位方式大概做个对比;

XPATH定位和CSS定位很相似,XPATH功能更强大一些吧,但CSS定位方式执行速度更快,鉴于某些浏览器不支持CSS定位方式,并且一般在自动化测试实施过程中使用xpath定位方式要比css更普遍,所以建议大家先掌握xpath,再来看下二者在语法上有什么区别

定位元素目标 XPATH CSS
所有元素   //* *
所有div元素 //div div
所有div元素子元素 //div/* div>*
根据ID属性获取元素 //*[@id=''] div#id
根据class属性获取元素 //*[@class=''] div.class
拥有某个属性的元素 //*[@href=''] *[href='']
所有div元素的第一个子元素 //div/*[1] div>* :first-child
所有拥有子元素a的div元素 //div[a] 无法实现
input的下一个兄弟元素 //input/following-sibling::[1] input+*

selenium之元素定位-css的更多相关文章

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

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

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

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

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

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

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

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

  5. selenium界面元素定位

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

  6. Selenium Web元素定位方法

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

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

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

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

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

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

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

随机推荐

  1. appium+python搭建自动化测试框架_Tools安装(一)

    作者的配置环境和版本: win10 + python3.6 +  Appium v1.4.16 1.下载node   https://nodejs.org/en/download/, 下载node.j ...

  2. 项目中git分支管理策略

  3. 微信小程序小结02-- 完整的demo

    小程序确实方便,在移动端方便小个体宣传,不需要服务器和域名,还有客服功能.按朋友的意思,做了一次调整,分成了首页.预约和我的三个页面. 下面说下遇到的几个问题. 01.客服功能 不得不说这个一条龙服务 ...

  4. python --- 冒泡排序算法

    别想太多了,这个冒泡排序就是我们脑海中想到的那个冒泡,就好像是气泡一样,较小的元素比较轻,从而要往上浮出来, 冒泡排序算法. 要对‘气泡’序列处理若干遍.所谓一遍处理,就是自底向上检查一遍这个序列,并 ...

  5. Android序列化

    1.序列化的目的 (1)永久的保存对象数据(将对象数据保存在文件当中,或者是磁盘中 (2)通过序列化对象在网络中传递对象 (3)通过序列化对象在进程间传递 (4)在Intent之间,基本的数据类型直接 ...

  6. 手撸GitLab CI(阉割版)

    上一集我们说到如何从零开始搭建一个Vue-cli 3.0的项目,而这一集我们将说到如何手写一份阉割版的CI脚本. 首先说一下GitLab部署到服务器的操作,一般有两种,一种是规范化分离的,包含runn ...

  7. jquery快速入门(二)

    jQuery 效果 1.隐藏,显示 1.1显示 hide() 和隐藏 show() 语法:$(selector).hide(speed,callback); $(selector).show(spee ...

  8. etcd v3集群备份和恢复

    官方文档 https://github.com/etcd-io/etcd/blob/master/Documentation/op-guide/recovery.md 一.运行3个etcd节点 我们用 ...

  9. DSAPI 简单WebAPI实现

    使用DSAPI实现一个简单的WebAPI功能,以便各客户端访问.支持身份验证,支持基础防护. 新建项目(以下演示控制台示例),引用DSAPI.dll. 复制粘贴以下代码: Module Module1 ...

  10. Java 项目中一种简单的动态修改配置即时生效的方式 WatchService

    这种方式仅适合于比较小的项目,例如只有一两台服务器,而且配置文件是可以直接修改的.例如 Spring mvc 以 war 包的形式部署,可以直接修改resources 中的配置文件.如果是 Sprin ...