Selenium之元素定位-css
前⾔
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="ElementById('div1input').focus()">
<div id="div1" >
<input id="div1input" class="spread"/></input>
<a href="www.sogou">搜狗搜索</a>
<img alt="div1-img1" src="www.sogou/images/logo/new/sogou.png"
href="www.sogou">搜狗图⽚</img>
<input type="button" value="查询"></input>
</div>
<br>
<p>第⼀段⽂字</p>
<p>第⼆段⽂字</p>
<div name= "div2" >
<input name="div2input" class="tight"></input>
<a href="www.baid">百度搜索</a>
<img alt="div2-img2" src="www.baidu/img/bdlogo.png"
href="www.baidu">百度图⽚</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="www.sogou"]
Python定位语句：
element = driver.find_element_by_css_selector('img[alt="div1-img1"]')
element = driver.find_element_by_css_selector('img[alt="div1-img1"][href="www.sogou"]')
代码解释：
表达式1和表达式2是等价的，都是定位第⼀个img元素
表达式1：表⽰使⽤img页⾯元素的alt元素的属性值div1-img1进⾏定位。若定位的页⾯元素始终具有唯⼀的属性值，此定位⽅式可以解决很多频繁变动的页⾯元素表达式2：表⽰同时使⽤了img页⾯元素的alt和href属性进⾏页⾯元素的定位。在某些复杂的定位场景，可使⽤多个属性来确保定位元素的唯⼀性。
css固定定位
⑥使⽤属性值的⼀部分内容定位元素
在被测试⽹页中，查“搜狗搜索”链接
CSS定位表达式：
1 a[href^="www.so"]
2 a[href$="gou"]
3 a[href*="sogou"]
Python定位语句：
1 element = driver.find_element_by_css_selector('a[href^="www.so"]')
2 element = driver.find_element_by_css_selector('a[href$="gou"]')
3 element = driver.find_element_by_css_selector('a[href*="sogou"]')
代码解释
1.表⽰匹配链接地址开始为www.so关键字串的链接元素，以字符^指明从字符串的开始匹配
2.表⽰匹配链接地址结尾包含gou关键字串的链接元素，以字符$指明在字符串的结尾匹配
3.表⽰匹配链接地址包含sogou关键字串的链接元素，以字符*指明在需要进⾏模糊查询
使⽤此模糊定位⽅式，可匹配动态变化的属性值的页⾯元素，只要到属性值固定不变的关键部分，就可以进⾏模糊匹配定位。此⽅法可以解决⼤部分复杂定位的问题，当然⽆论是⽅式都需要灵活使⽤才能确保能够准确的定位都想要定位的元素
⑦使⽤页⾯元素进⾏⼦页⾯元素的查
⽬的
在被测⽹页中，查第⼀个div下的第⼀个input元素
CSS定位表达式：
1 div#div1>input#div1input
2 div input
Python定位语句：
1 element=driver.find_element_by_css_selector("div#div1>input#div1input")
2 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定位表达式：
1 div#div1 :first-child
2 div#div1 :nth-child(2)
3 div#div1 :last-child
4input:focus
5input:enabled
6input:checked
7 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定位表达式：
1 div1#div1 > input + a
2 div1#div1 > input + a + img
3 div1#div1 > input + * + img
4 ul#recordlist > p~li
Python定位语句：
1 element=driver.find_element_by_css_selector("div1#div1 > input + a")
2 element=driver.find_element_by_css_selector("div1#div1 > input + a + img")
3 element=driver.find_element_by_css_selector("div1#div1 > input + * + img")
4 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+*

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。