彻底学会Selenium元素定位( 四 )

CSS_SELECTOR通过CSS选择器语法定位元素 。
适用于Selenium和Appium , 但是需要注意的是 , 原生的app控件不支持CSS_SELECTOR,只支持Xpath 。
Selenium框架官方推荐使用CSS定位 , 因为CSS定位效率高于XPATH 。
CSS是一种标记语言 , 控制元素的显示样式,就必须找到元素,在CSS标记语言中找元素使用CSS选择器 。
【彻底学会Selenium元素定位】CSS的选择策略也多很多种,但是无论选择哪一种选择策略都是用同一种定位方法 。
定位方法:
driver.find_element(By.CSS_SELECTOR, "CSS选择策略")绝对路径以html开始 , 使用 > 或 空格 分隔,与XPATH一样 , CSS_SELECTOR的下标也是从1开始 。
driver.find_element(By.CSS_SELECTOR, "html>body>div>div>div>div>form>input:nth-child(1)").send_keys("测试蔡坨坨") # 使用>分隔driver.find_element(By.CSS_SELECTOR, "html body div div div div form input:nth-child(1)").send_keys("测试蔡坨坨") # 使用空格分隔driver.find_element(By.CSS_SELECTOR, "html>body>div>div div div form input:nth-child(1)").send_keys("测试蔡坨坨")# 使用 空格 + > 分隔相对路径不以html开头,以CSS选择器开头,比如标id选择器、class选择器等 。
举栗:
driver.find_element(By.CSS_SELECTOR, "input.but1").send_keys("测试蔡坨坨")id选择器语法:# 开头表示id选择器
driver.find_element(By.CSS_SELECTOR, "标签#id属性值")举栗:
driver.find_element(By.CSS_SELECTOR, "i#cart_num").click()class选择器语法:. 开头表示class选择器,或者使用[class='class属性值']
如果具有多个属性值的class , 则需要传入全部的属性值
driver.find_element(By.CSS_SELECTOR, ".class属性值")driver.find_element(By.CSS_SELECTOR, "[class='class属性值']")举栗:
driver.find_element(By.CSS_SELECTOR, ".but2").click()driver.find_element(By.CSS_SELECTOR, "[class='but2']").click()属性选择器单个属性语法:
driver.find_element(By.CSS_SELECTOR, "标签名[属性='属性值']")driver.find_element(By.CSS_SELECTOR, "[属性='属性值']")举栗:
driver.find_element(By.CSS_SELECTOR, "input[placeholder='请输入你要查找的关键字']").send_keys("测试蔡坨坨")driver.find_element(By.CSS_SELECTOR, "[placeholder='请输入你要查找的关键字']").send_keys("测试蔡坨坨")多个属性语法:注意与xpath的区别
driver.find_element(By.CSS_SELECTOR, "标签名[属性1='属性值1'][属性2='属性值2']")举栗:
driver.find_element(By.CSS_SELECTOR, "input[name='key'][class='but1']").send_keys("测试蔡坨坨")模糊匹配driver.find_element(By.CSS_SELECTOR, "[属性^='开头的字母']") # 获取指定属性以指定字母开头的元素driver.find_element(By.CSS_SELECTOR, "[属性$='结束的字母']") # 获取指定属性以指定字母结束的元素driver.find_element(By.CSS_SELECTOR, "[属性*='包含的字母']") # 获取指定属性包含指定字母的元素标签选择器语法:
driver.find_element(By.CSS_SELECTOR, "标签名") # 例如:input、button层级关系父子层级关系:父层级策略 > 子层级策略 (也可以使用空格连接上下层级)
祖辈后代层级关系:祖辈策略 后代策略
> 与 空格 的区别:大于号必须为子元素,空格则不用
first-child第一个子元素
<div class="help"> <a href="http://127.0.0.1">首页</a> <a href="http://127.0.0.1/buy">我的订单</a> <a href="http://127.0.0.1//help">联系客服</a></div>driver.find_element(By.CSS_SELECTOR, ".help>a:first-child").click() # 首页last-child最后一个子元素
driver.find_element(By.CSS_SELECTOR, ".help>a:last-child").click() # 联系客服nth-last-child()倒序
driver.find_element(By.CSS_SELECTOR, ".help>a:nth-last-child(2)").click()# 我的订单nth-child()正序
driver.find_element(By.CSS_SELECTOR, ".help>a:nth-child(3)").click()# 联系客服干儿子和亲儿子若一个标签下有多个同级标签 , 虽然这些同级标签的 tag name 不一样,但是他们是放在一起排序的 。
# author: 测试蔡坨坨# datetime: 2022/10/23 20:20# function: css_selector 不区分干儿子和亲儿子import timefrom selenium import webdriverfrom selenium.webdriver.common.by import Bydriver = webdriver.Chrome()driver.get("https://www.baidu.com")driver.maximize_window()# css_selector 不区分干儿子和亲儿子,# 若一个标签下有多个同级标签,虽然这些同级标签的tag name不一样,但是他们是放在一起排序的# 打开百度,在搜索框中输入 测试蔡坨坨 ,点击百度一下driver.find_element(By.CSS_SELECTOR, "form#form>span:nth-child(8)>input").send_keys("测试蔡坨坨")driver.find_element(By.CSS_SELECTOR, "form#form>span:nth-child(9)>input").click()

推荐阅读