selenium的css定位

使用xpath定位，基本能解决定位的需求，这里介绍cdd定位，是因为css定位更快，语法更简洁

一、css的属性定位

1、css可以通过元素的id、css、class 三个常规属性来定位到

如下是百度输入框的html代码

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

css用 # 来表示id属性，如#kw

1⃣️driver.find_element_by_css_selector("#kw").send_keys("python")

2⃣️driver.find_element_by_css_selector("input#kw").send_keys("python")

3⃣️driver.find_element_by_css_selector("input[id='kw']").send_keys("python")
 

css用 . 来表示 class属性，如: .s_ipt

1⃣️driver.find_element_by_css_selector(".s_ipt").send_keys("python")

2⃣️driver.find_element_by_css_selector("input.s_ipt").send_keys("python")

3⃣️driver.find_element_by_css_selector("input[class='s_ipt']").send_keys("python")

使用多个class属性进行定位

driver.find_element_by_css_selector("input[class='s_ipt  search']").send_keys("python")  

   driver.find_element_by_css_selector(".s_ipt .search").send_keys("python")  # class不分先后顺序，均可定位到

css直接用便签名称，无任何表示符，如 input

driver.find_element_by_css_selector("input").send_keys("python")
 

二、css的其它属性

css除了可以通过标签、class、id这是三个常规属性定位，还可以使用其他属性定位

 

css通过name属性来定位

driver.find_element_by_css_selector("[name='wd']").send_keys("python")

css通过autocomplete属性定位

driver.find_element_by_css_selector("[autocomplete='off']").send_keys("python")

 三、css标签

driver.find_element_by_css_selector("input:contains("kw")").send_keys("python")

css通过标签与class属性的组合定位

driver.find_element_by_css_selector("input.s_ipt").send_keys("python")

css通过标签与id属性的组合定位

driver.find_element_by_css_selector("input#kw").send_keys("python")

css通过标签与其他属性组合定位

driver.find_element_by_css_selector("input[id='kw']").send_keys("python")
 

 四、css的层级关系

1、css也有与xpath同样功能的层级定位关系

2、如下面xpath的定位语法可以用css实现

1⃣️//form[@id='form']/span/input

2⃣️//form[@class='fm']/span/input 

对应的css语法如下

1⃣️form#form>span>input

2⃣️form.form>span>input

li>#js-sigin-btn div>.search-input 

五、通配符查找元素

css选择器中使用通配符

"^":代表以什么开头

"$"：代表以什么结尾

"*"：代表包含什么文本

语法： tag[attribute<通配符>='value'] 

示例：

div[class='search-area'] 

div[class^='search']  

div[class$='area'] 

div[class*='ch-ar']  

五、css索引 

1、百度设置页面显示条数html代码如下

<select id="nr" name="NR">

<option selected="" value="10">每页显示10条</option>

<option value="20">每页显示20条</option>

<option value="50">每页显示50条</option>

</selected>

2、css通过索引' tag_name:nth-chile(1) '来定位子元素，与xpath的语法差异有点大，但很好理解

 driver.find_element_by_css_selector("select#nr>option:nth-child(1)").click()  # 选择第一个option

driver.find_element_by_css_selector("select#nr>option:nth-child(2)").click()  # 选择第二个option

driver.find_element_by_css_selector("select#nr>option:nth-child(3)").click()  # 选择第三个option
 

 六、css的逻辑运算

css也可以实现逻辑匀速哪，同时匹配两个实行，这里跟xpath不一样，无需写关键字 and

driver.find_element_by_css_selector("input[id='kw'][name='wd']").send_keys("python") 
 

 七、css模糊匹配

css模糊匹配的 contains("✖️")