Selenium-CSS定位
一、CSS定位(重点)
1.1 什么是CSS定位?
1、CSS是一种语言,它用来描述HTML元素的显示样式;
2、在CSS中,选择器是一种模式,用于选择需要添加样式的元素;
3、在selenium中也可以使用这种选择器来定位元素;
提示:
- 在selenium中推荐使用CSS定位,因为他比XPath定位速度要块
CSS定位方法:
element = driver.find_element_by_css_selector(css_selector)
1.2 CSS定位常用策略(方法)
1、id选择器
2、class选择器
3、元素选择器
4、属性选择器
5、层级选择器
1.2.1 id选择器
说明:根据元素id属性来选择
格式:#id
例如:#userA <选择id属性值为userA元素>
1.2.2 class选择器
说明:根据选择class属性来选择
格式:.class
例如:.telA <选择class属性值为telA的所有元素>
1.2.3 元素选择器
说明:根据元素的标签名来选择
格式:element
例如:input <选择所有input元素>
1.2.4 属性选择器
说明:根据元素属性名和属性值来选择
格式:[attribute=value] element[attribute=value]
例如:[type="password"] <选择type属性值为password的元素>
1.2.5 层级选择器
说明:根据元素的父子关系来选择
格式1:element1>element2 通过element1来定位element2,并且element2必须为element1的直接子元素
例如:p[id="p1"]>input <定位指定p元素下的直接子元素input>
格式2:element1 element2 通过element1来定位element2,并且element2为element1的后代元素
例如:p[id='p1'] input <定位指定p元素下的后代元素input>
1.2.6 CSS延申
input[type^='p'] type属性以p字母开头的元素
input[type$='d'] type属性d字母结束的元素
input[type*='w'] type属性包含w字母的元素
# 导包
from selenium import webdriver
from time import sleep
# 获取 浏览器驱动对象
driver = webdriver.Firefox()
# 打开 注册A.html
url = r"D:\web自动化素材\课堂素材\注册A.html"
driver.get(url)
1. 使用css id选择器 定位用户名 输入admin 以指定字母开头 语法:[属性^='开头的字母']
driver.find_element_by_css_selector("[name^='us']").send_keys("admin")
# 2. 使用css 属性选择 定位密码框 输入123456 以指定字母结束 语法:[属性$='结束的字母']
driver.find_element_by_css_selector("[name$='dA']").send_keys("123456")
# 3. 使用 css class 选择器 定位电话号码: 18611112222 包含指定字母 语法:[属性*='包含字母']
driver.find_element_by_css_selector("[class*='el']").send_keys("18611112222")
1.2.7 CSS定位综合练习
‘’‘
需求:
1. 使用css id选择器 定位用户名 输入admin
2. 使用css 属性选择 定位密码框 输入123456
3. 使用 css class 选择器 定位电话号码: 18611112222
4. 使用css 元素选择器 定位span标签获取文本值
5. 使用层级选择器 定位email 输入 123@qq.com
方法:
driver.find_element_by_css_selector()
获取文本的方法 元素.text
’‘’
# 导包
from selenium import webdriver
from sleep import time
# 获取 浏览器驱动对象
driver = webdriver.Firefox()
# 打开 注册A.html
url = r"D:\web自动化素材\课堂素材\注册A.html"
driver.get(url)
# 1. 使用css id选择器 定位用户名 输入admin
driver.find_element_by_css_selector("#userA").send_keys("admin")
# 2. 使用css 属性选择 定位密码框 输入123456
driver.find_element_by_css_selector("[name='passwordA']").send_keys("123456")
# 3. 使用 css class 选择器 定位电话号码: 18611112222
driver.find_element_by_css_selector(".telA").send_keys("18611112222")
# 4. 使用css 元素选择器 定位span标签获取文本值
span = driver.find_element_by_css_selector("span").text
print("获取的span标签文本值:", span)
# 5. 使用层级选择器 定位email 输入 123@qq.com
driver.find_element_by_css_selector("p>input[placeholder='电子邮箱A']").send_keys("123@qq.com")
# 暂停 3秒
sleep(3)
# 退出浏览器驱动
driver.quit()
1.3 八种元素定位方式分类-汇总
1、id、name、class_name:为元素属性定位
2、tag_name:为元素标签名称
3、link_text、partial_link_text:为超链接定位(a标签)
4、Xpath:为元素路径定位
5、CSS:为CSS选择器定位
1.4 定位元素的另一种写法–延伸
"""
目标:
driver.find_element()
需求:
1. 使用driver.find_element()方法
2. 输入用户名:admin
3. 输入密码:123456
"""
# 导包
from selenium import webdriver
from time import sleep
# 获取 浏览器驱动对象
from selenium.webdriver.common.by import By
driver = webdriver.Firefox()
# 打开 注册A.html
url = r"D:\web自动化素材\课堂素材\注册A.html"
driver.get(url)
# 使用find_element()定位用户名
driver.find_element(By.ID, "userA").send_keys("admin")
# 使用find_element()定位密码
driver.find_element(By.CSS_SELECTOR, "#passwordA").send_keys("123456")
# 暂停 3秒
sleep(3)
# 退出浏览器驱动
driver.quit()
1.4.1 导入By类
# 导包:from selenium.webdriver.common.by
class By(object):
"""
Set of supported locator strategies.
"""
ID = "id"
XPATH = "xpath"
LINK_TEXT = "link text"
PARTIAL_LINK_TEXT = "partial link text"
NAME = "name"
TAG_NAME = "tag name"
CLASS_NAME = "class name"
CSS_SELECTOR = "css selector"
1.5 find_element_by_xxx()和find_element()区别
说明:通过查看find_element_by_id底层实现方法,发现底层是调用find_element方法进行的封装
def find_element_by_id(selef, id_):
return self.find_element(by=By.ID, value=id_)