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>
被测代码
1使用绝对路径定位元素
目的:
在被测试网页中, 查找第一个 div 中的查询按钮
CSS 定位方式:
HTML> body> div>input[value="查询"]
Python 定位语句:
element = driver.find_element_by_css_selector('html> body> div>input[value=" 查询 "]')
代码解释:
上述 CSS 定位表达式使用绝对路径定位属性 value 的值为 "查询" 的页面元素. 从 CSS 定位表达式可以看出, 步间通过 ">" 分割, 区别于 XPATH 路径中的正 "/", 并且也不再使用 @符号选择属性.
2使用相对路径定位元素
目的:
在被测试网页中, 查找第一个 div 下的查询按钮
CSS 定位表达式:
input[value="查询"]
Python 定位语句:
element = driver.find_element_by_css_selector('input[value=" 查询 "]')
代码解释:
上述 CSS 表达式通过相对路径使用元素名称和元素的属性及属性值进行页面元素的定位.
3使用 class 名称定位元素
目的:
在被测网页中, 查找第一个 div 元素下的 input 输入框
CSS 定位表达式:
CSS.spread
python 定位语句:
element = driver.find_element_by_css_selector('css.spread')
代码解释:
上述 CSS 定位表达式使用 input 页面元素的 class 属性名称 spread 来进行定位, 用点 (.) 分割元素名与 class 属性名, 点号后面是 class 属性名称
4使用 ID 属性值定位元素
目的:
在被测试网页中, 查找第一个 dic 元素下 ID 属性值为 div1input" 的 input 元素
CSS 定位语句:
input#div1input
Python 定位语句:
element = driver.find_element_by_css_selector('input#div1input')
代码解释:
上述 CSS 定位表达式使用 input 页面元素的 ID 属性值 div1input 进行定位, 使用 #号分割元素名和 ID 属性值,# 后面是 ID 属性值
5使用页面其他属性值定位元素
目的:
在被测网页中, 查找 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 属性进行页面元素的定位. 在某些复杂的定位场景, 可使用多个属性来确保定位元素的唯一性.
6使用属性值的一部分内容定位元素
目的:
在被测试网页中, 查找 "搜狗搜索" 链接
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 关键字串的链接元素, 以字符 * 指明在需要进行模糊查询
使用此模糊定位方式, 可匹配动态变化的属性值的页面元素, 只要找到属性值固定不变的关键部分, 就可以进行模糊匹配定位. 此方法可以解决大部分复杂定位的问题, 当然无论是方式都需要灵活使用才能确保能够准确的定位都想要定位的元素
7使用页面元素进行子页面元素的查找
目的:
在被测网页中, 查找第一个 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 元素
8使用伪类定位元素
目的:
在被测试网页中查找第一个 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 定位语句:
- element=driver.find_element_by_css_selector("div#div1 :first-child")
- element=driver.find_element_by_css_selector("div#div1 :nth-child(2)")
- element=driver.find_element_by_css_selector("div#div1 :last-child")
- element=driver.find_element_by_css_selector("input:focus")
- element=driver.find_elements_by_css_selector("input:enabled")
- 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 页面元素
9查找同级兄弟页面元素
目的:
在被测试网页中, 查找第一个 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 元素
10多元素选择器
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+* |
来源: https://www.cnblogs.com/linuxchao/p/linuxchao-python-selenium-css.html