web自动化selenium第二章-3. CSS定位
3.1 什么是CSS定位？
1. CSS（ Cascading Style Sheets） 是一种语言， 它用来描述HTML元素的显示样式；
2. 在CSS中， 选择器是一种模式， 用于选择需要添加样式的元素；
3. 在Selenium中也可以使用这种选择器来定位元素。
提示：
1. 在selenium中推荐使用CSS定位， 因为它比XPath定位速度要快
2. css选择器语法非常强大
CSS定位方法
element = driver.find_element_by_css_selector(css_selector)
3.2 CSS定位常用策略 (方式)
1. id选择器
2. class选择器
3. 元素选择器
4. 属性选择器
5. 层级选择器
id选择器
说明： 根据元素id属性来选择
格式： #id
例如： #userA <选择id属性值为userA的元素>
class选择器
说明： 根据元素class属性来选择
格式： .class
例如： .telA <选择class属性值为telA的所有元素>
元素选择器
说明： 根据元素的标签名选择
格式： element
例如： input <选择所有input元素>
属性选择器
说明： 根据元素的属性名和值来选择
格式： [attribute=value] element[attribute=value]
例如： [type="password"] <选择type属性值为password的元素>
"""
需求：
1. 使用css id选择器 定位用户名 输入admin
2. 使用css 属性选择 定位密码框 输入123456
3. 使用 css class 选择器 定位电话号码： 18611112222
4. 使用css 元素选择器 定位span标签获取文本值
5. 使用层级选择器 定位email 输入 [email protected]
方法：
driver.find_element_by_css_selector()
获取文本的方法 元素.text
"""
# 导包
import time
from selenium import webdriver
from time import sleep
# 获取 谷歌浏览器对象
driver = webdriver.Chrome()
# 打开注册A.html
# 获取 Ie
# driver = webdriver.Ie()
# 打开 注册A.html
url = r"E:\Python\测试资料\8天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("#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(f'span={span}')
# 5. 使用层级选择器 定位email 输入 [email protected]
"""
"""
driver.find_element_by_css_selector("p>input[placeholder='电子邮箱A']").send_keys("[email protected]")
driver.find_element_by_css_selector("p>input[placeholder='账号A']").send_keys("[email protected]")
time.sleep(3)
# 退出浏览器
driver.quit()
层级选择器
说明： 根据元素的父子关系来选择
格式1： element1>element2 通过element1来定位element2， 并且element2必须为element1的直接子
元素
例如1： p[id='p1']>input <定位指定p元素下的直接子元素input>
格式2： element1 element2 通过element1来定位element2， 并且element2为element1的后代元素
例如2： p[id='p1'] input <定位指定p元素下的后代元素input>
练习
需求： 打开注册A.html页面， 完成以下操作
1).使用CSS定位方式中的层级选择器定位用户名输入框， 并输入： admin
# 层级选择器
# 说明： 根据元素的父子关系来选择
# 格式1： element1>element2 通过element1来定位element2， 并且element2必须为element1的直接子
# 元素
# 例如1： p[id='p1']>input <定位指定p元素下的直接子元素input>
# 格式2： element1 element2 通过element1来定位element2， 并且element2为element1的后代元素
# 例如2： p[id='p1'] input <定位指定p元素下的后代元素input>
# 导包
import time
from selenium import webdriver
from time import sleep
# 获取 谷歌浏览器对象
driver = webdriver.Chrome()
# 打开注册A.html
# 获取 Ie
# driver = webdriver.Ie()
# 打开 注册A.html
url = r"E:\Python\测试资料\8天web自动化讲义\素材\注册A.html"
driver.get(url)
"""
需求： 打开注册A.html页面， 完成以下操作
1).使用CSS定位方式中的层级选择器定位用户名输入框， 并输入： admi
ww
"""
# 格式1： element1>element2 通过element1来定位element2， 并且element2必须为element1的直接子
# 元素
# 例如1： p[id='p1']>input <定位指定p元素下的直接子元素input>
driver.find_element_by_css_selector("p[id='p1']>input").send_keys("admin")
# 格式2： element1 element2 通过element1来定位element2， 并且element2为element1的后代元素
# 例如2： p[id='p1'] input <定位指定p元素下的后代元素input>
driver.find_element_by_css_selector("p[id='p1'] input").clear()
driver.find_element_by_css_selector("p[id='p1'] input").send_keys("admin2")
time.sleep(3)
driver.quit()
3.3 CSS延伸[了解]
| input[type^='p'] input[type$='d'] input[type*='w'] |
type属性以p字母开头的元素 type属性以d字母结束的元素 type属性包含w字母的元素 |
3.4 CSS总结
1. 常用的CSS定位选择器有哪些？
4. 八种元素定位方式分类-汇总
1. id、 name、 class_name： 为元素属性定位
2. tag_name： 为元素标签名称
3. link_text、 partial_link_text： 为超链接定位(a标签)
4. XPath： 为元素路径定位
5. CSS： 为CSS选择器定位
XPath与CSS类似功能对比
| 定位方式 | XPath | CSS |
| 元素名 | //input | input |
| id | //input[@id='userA'] | #userA |
| class | //*[@class='telA'] | .telA |
| 属性 | 1. //*[text()="xxx"] 2. //input[starts-with(@attribute,'xxx')] 3. //input[contains(@attribute,'xxx')] |
1. input[type^='p'] 2. input[type$='d'] 3. input[type*='w'] |
5. 定位元素的另一种写法--延伸
方法： find_element(by=By.ID, value=None)
备注： 需要两个参数， 第一个参数为定位的类型由By提供， 第二个参数为定位的具体方式
示例：
1. driver.find_element(By.CSS_SELECTOR, '#emailA').send_keys("[email protected]")
2. driver.find_element(By.XPATH, '//*[@id="emailA"]').send_keys('[email protected]')
3. driver.find_element(By.ID, "userA").send_keys("admin")
4. driver.find_element(By.NAME, "passwordA").send_keys("123456")
5. driver.find_element(By.CLASS_NAME, "telA").send_keys("18611111111")
6. driver.find_element(By.TAG_NAME, 'input').send_keys("123")
7. driver.find_element(By.LINK_TEXT, '访问 新浪 网站').click()
8. driver.find_element(By.PARTIAL_LINK_TEXT, '访问').click()
5.1 导入By类
导包： from selenium.webdriver.common.by import 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"
5.2 find_element_by_xxx()和find_element() 区别
说明： 通过查看find_element_by_id底层实现方法， 发现底层是调用find_element方法进行的封
装；
def find_element_by_id(self, id_):
"""Finds an element by id.
:Args:
- id\_ - The id of the element to be found.
:Usage:
driver.find_element_by_id('foo')
"""
return self.find_element(by=By.ID, value=id_)