自动化测试学习（六）-selenium定位元素之CSS选择器详细用法

目录

1.通过class属性定位

2.通过id属性定位

3.通过标签名定位

4.其他方法定位

---

   CSS是一种语言，它可以比较灵活的选择控件的任意属性，一般情况下比Xpath快，下面我们详细介绍CSS的用法。CSS常见语法如下表所示： 

选择器	示例	描述
.class	.s_ipt	选择class="s_ipt"的所有元素
#id	#kw	选择id="kw"的所有元素
*	*	选择所有元素
element	input	选择所有<input>元素
element>element	span>input	选择<span>下的所有<input>元素
element+element	div+a	选择同一级中<div>元素之后的所有<a>元素
[attribute=value]	[type=text]	选择type="text"的所有元素

还是以百度输入框和搜索按钮为例： 

1.通过class属性定位

driver.find_element(By.CSS_SELECTOR,'.s_ipt')

2.通过id属性定位

driver.find_element(By.CSS_SELECTOR,'#kw')

3.通过标签名定位

# 因为input标签不是唯一的，所以无法成功定位
driver.find_element(By.CSS_SELECTOR,'input')

标签名相同的概率非常大，所以通过标签名定位元素很难找到想要的元素，因此我们可以通过zu组合方法来定位。

4.其他方法定位

（1）通过父子关系定位，用‘>’表示。

driver.find_element(By.CSS_SELECTOR,'form>span>input')

（2）通过属性定位，[attribute=value]即[属性名=属性值]。

driver.find_element(By.CSS_SELECTOR,'[name="wd"]')

（3）组合定位。

①tag name+class

driver.find_element(By.CSS_SELECTOR,'input.s_ipt')

②tag name+id

driver.find_element(By.CSS_SELECTOR,'input#kw')

③tag name+attribute

driver.find_element(By.CSS_SELECTOR,'input[name="wd"]')

Xpath与CSS类似功能的对比如下表所示：

定位方式	Xpath	CSS
tag name	//input	input
id	//input[@id='kw']	input#kw
class	//input[@class='s_ipt']	input.s_ipt
属性	//input[@type='text']	input[type=text]
子元素	//span/input	span>input

总结：

        通过对比可以看出来，CSS语法更加简洁，可以满足日常定位元素需求，所以更推荐大家使用。

---

下一篇：自动化测试学习（七）-正则表达式，你真的会用吗？