web自动化selenium第二章-3. CSS定位_selenium class 选择器

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 输入 123@qq.com
    方法：
        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")  #  <input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
#         4. 使用css 元素选择器 定位span标签获取文本值
span=driver.find_element_by_css_selector("span").text
print(f'span={span}')
#         5. 使用层级选择器 定位email 输入 123@qq.com
"""
<p>
				<label for="emailA">电子邮件A</label>
				<input type="emailA" name="emailA" id="emailA" placeholder="电子邮箱A" value="">				
			</p>
"""
driver.find_element_by_css_selector("p>input[placeholder='电子邮箱A']").send_keys("123@qq.com")
driver.find_element_by_css_selector("p>input[placeholder='账号A']").send_keys("123@qq.com")
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延伸[了解]

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类似功能对比

5. 定位元素的另一种写法--延伸

方法： find_element(by=By.ID, value=None)
备注： 需要两个参数， 第一个参数为定位的类型由By提供， 第二个参数为定位的具体方式
示例：
1. driver.find_element(By.CSS_SELECTOR, '#emailA').send_keys("123@126.com")
2. driver.find_element(By.XPATH, '//*[@id="emailA"]').send_keys('234@qq.com')
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_)