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

1.2 CSS定位常用策略（方法）

1、id选择器
2、class选择器
3、元素选择器
4、属性选择器
5、层级选择器
1
2
3
4
5

1.2.1 id选择器

说明：根据元素id属性来选择
格式：#id
例如：#userA <选择id属性值为userA元素>
1
2
3

1.2.2 class选择器

说明：根据选择class属性来选择
格式：.class
例如：.telA <选择class属性值为telA的所有元素>
1
2
3

1.2.3 元素选择器

说明：根据元素的标签名来选择
格式：element
例如：input <选择所有input元素>
1
2
3

1.2.4 属性选择器

说明：根据元素属性名和属性值来选择
格式：[attribute=value]   element[attribute=value]
例如：[type="password"] <选择type属性值为password的元素>
1
2
3

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
3
4
5
6

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
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

1.3 八种元素定位方式分类-汇总

1、id、name、class_name：为元素属性定位
2、tag_name：为元素标签名称
3、link_text、partial_link_text：为超链接定位（a标签）
4、Xpath：为元素路径定位
5、CSS：为CSS选择器定位
1
2
3
4
5

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

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
2
3
4
5
6
7
8
9
10
11
12
13
14
15

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_)
1
2
3