Python+selenium 【第三章】UI自动化元素识别css

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