前言

大部分人在使用selenium定位元素时，用的是xpath元素定位方式，因为xpath元素定位方式基本能解决定位的需求。xpath元素定位方式更直观，更好理解一些。

css元素定位方式往往被忽略掉了，其实css元素定位方式也有它的价值；相对于xpath元素定位方式来说，css元素定位方式更快，语法更简洁。

一、css元素定位：通过元素的标签或者元素的id、class属性定位

1、css元素定位方式可以通过元素的id、class、标签这三个常规属性直接定位。

2、举例：如下是百度输入框的的html代码：

python 复制代码

<input id="kw" class="s_ipt" type="text" autocomplete="off" maxlength="100" name="wd"/>

①css元素定位使用#号表示id属性，如：#kw

②css元素定位方式使用.表示class属性，如.s_ipt

③css元素定位方式也可以直接使用标签名称，而没有任何标识符，如：input

二、css元素定位：通过元素的其它属性定位

1、css元素定位除了可以通过标签、class、id这三个常规属性定位外，也可以通过元素的其它属性定位。例如：

三、css元素定位：通过标签与属性的组合来定位元素

四、css元素定位：通过元素的层级关系来定位

1、css元素定位可以达到类似xpath元素定位通过元素的层级关系来定位，例如：

xpath元素定位： //form $@id='form'$ /span/input 和 //form $@class='fm'$ /span/input 也可以用css实现

五、css元素定位：通过元素的并列索引来定位

1、以下图为例：与四相似。

2、css元素定位也可以通过索引option：nth-child(1)来定位子元素，这点与xpath写法用很大差异，其实很好理解，直接翻译过来就是第几个小孩

六、css元素定位：通过对元素属性的逻辑运算来定位

1、css同样也可以实现逻辑运算，同时匹配两个属性，这里跟xpath不一样，无需写and关键字。

七、处理selenium中的css_selector定位元素的模糊匹配问题

① 匹配元素的id属性，先指定一个html标签，然后加上"#"符号，再加上id的属性值。

复制代码

driver.find_element_by_css_selector('div#ID').click()

②匹配元素的class属性，先指定一个html标签，然后加上"."符号，再加上class的属性值。

driver.find_element_by_css_selector('div.CLASS').click()

③匹配元素的其他属性。【这里不再是'.'或者'#'符号，而是采用了"标签名 $属性名=属性值$ "的方式定位元素】

driver.find_element_by_css_selector('div $name=NAME$ ').click()

④组合匹配【支持定位元素对象通过两组或两组以上的属性】

driver.find_element_by_css_selector('div $name=NAME$ $type=TYPE$ ').click()

⑤匹配头部

driver.find_element_by_css_selector('div $style\^="sp.gif"$ ').click()

⑥匹配尾部

driver.find_element_by_css_selector('div $style$="sp.gif"$ ').click()

⑦匹配中间

driver.find_element_by_css_selector('div $style\*="sp.gif"$ ').click()

最后感谢每一个认真阅读我文章的人，礼尚往来总是要有的，虽然不是什么很值钱的东西，如果你用得到的话可以直接拿走：

软件测试面试小程序

被百万人刷爆的软件测试题库！！！谁用谁知道！！！全网最全面试刷题小程序，手机就可以刷题，地铁上公交上，卷起来！

涵盖以下这些面试题板块：

1、软件测试基础理论，2、web,app，接口功能测试，3、网络，4、数据库，5、linux

6、web,app，接口自动化，7、性能测试，8、编程基础，9、hr面试题，10、开放性测试题，11、安全测试，12、计算机基础

这些资料，对于【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴上万个测试工程师们走过最艰难的路程，希望也能帮助到你！

css元素定位：通过元素的标签或者元素的id、class属性定位，还不明白的伙计，看这个就行了！

前言