UI自动化元素识别--css
css_selector是什么?
CSS是一个被用来描述如何在屏幕等处渲染HTML和XML文档的语言。CSS使用选择器来为文档中的元素绑定样式属性。
选择器（selector）是用来在树中匹配元素的模式，选择器对HTML和XML进行了优化，被设计用来在注重性能的代码中执行。
Selenium官网的Document里极力推荐使用css_selector，而不是XPath来定位元素。
Css_selector常用如下6种定位元素的方法：
绝对路径
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# 1.绝对路径定位 定位到新闻
driver.find_element_by_css_selector('html body div div div#s-top-left a').click()
相对路径
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# # 2. 相对路径定位 定位到hao123
driver.find_element_by_css_selector('div#s-top-left.s-top-left-new.s-isindex-wrap a+a').click()
# # 2.1 输入内容再点击查询
driver.find_element_by_css_selector('#kw').send_keys("hahahahah")
driver.find_element_by_css_selector('#su').click()
元素属性
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# # 3.使用元素属性定位
driver.find_element_by_css_selector("input[id='kw'][ name='wd']").send_keys("查一下宝儿")
driver.find_element_by_css_selector("input[value='百度一下']").click()
元素属性值
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# # 4.部分属性值匹配 http://www.hao123.com
driver.find_element_by_css_selector('a[href="https://www.hao123.com"]').click()
# # 4.1 元素值开头包含内容： ^=
driver.find_element_by_css_selector('a[href^="https://www.hao123"]').click()
# # 4.2 元素值结尾包含内容: $=
driver.find_element_by_css_selector('a[href$="www.hao123.com"]').click()
# # 4.3 元素值中间包含内容 *=
driver.find_element_by_css_selector('a[href*="https://www.hao123"]').click()
查询子元素绝对路径
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# # 5.查找子元素
# 5.1 查找第一个子元素 first-child
driver.find_element_by_css_selector('div.s-top-left-new.s-isindex-wrap a:first-child').click()
# # 5.2 查找第n个子元素
driver.find_element_by_css_selector('div#s-top-left a:nth-child(3)').click()
driver.find_element_by_css_selector('div#s-top-left a:nth-child(6)').click()
查询兄弟元素
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 15:59
# @Author : Limusen
# @File : demo_ui_css
import time
from selenium import webdriver
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# css通过元素在页面布局的位置定位 一切皆为框
# 使用空格来做分隔符，遇到class就使用 . 遇到id就使用 #
# # 6.查询兄弟元素
driver.find_element_by_css_selector('div#s-top-left a+a+a+a').click()
time.sleep(2)
driver.quit()
识别元素By.xxx 进阶
- 示例代码
# -*- coding: utf-8 -*-
# @Time : 2021/12/22 16:47
# @Author : Limusen
# @File : demo_ui_by_05
import time
from selenium import webdriver
from selenium.webdriver.common.by import By
# 识别元素进阶
driver = webdriver.Chrome()
driver.get("https://www.baidu.com")
# 将识别方法与识别属性分离开
driver.find_element(By.NAME, 'wd').send_keys("hahah")
# driver.find_element(By.CLASS_NAME,'s_ipt').send_keys("元素识别方法")
# driver.find_element(By.ID,'su').click()
# driver.find_element(By.PARTIAL_LINK_TEXT, 'hao').click()
# driver.find_element(By.CSS_SELECTOR,'#kw').send_keys("12306")
time.sleep(2)
driver.quit()
总结
本章节主要讲述了css的几种定位方法,相对与xpath而言,更加推荐使用css定位,当然根据自己的喜好选择合适的.下一章节我们讲述鼠标和键盘操作
代码地址
https://gitee.com/todayisgoodday/PythonSelenium
CSDN地址
https://blog.csdn.net/weixin_42382016/category_11566096.html