selenium的css定位

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

一、css的属性定位

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

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

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

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

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

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

扫描二维码关注公众号,回复: 5801643 查看本文章
driver.find_element_by_css_selector(".s_ipt").send_keys("python")

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

五、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("inpur[id='kw'][name='wd']").send_keys("python") 
 

 七、css模糊匹配

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

猜你喜欢

转载自www.cnblogs.com/DeryKong/p/10664358.html