1、CSS选择器介绍

CSS(Cascading Style Sheets)是一种语言,它被用来描述HTML 和XML 文档的表现。CSS 使用选择器来为页面元素绑定CSS属性。这些选择器可以被Selenium 用作另外的定位策略。

by_css_selector通过CSS选择器查找元素,这种元素定位方式跟by_xpath比较类似,Selenium官网的Document里极力推荐使用CSS locator,而不是XPath来定位元素。原因是CSS locatorXPath locator速度快,特别是在IE下,CSS locator比XPath更高效更准确更易编写,对各种浏览器支持也很好。

2、CSS选择器定位语法

(1)单数定位,获得一个指定元素对象

driver.find_element_by_css_selector(“css选择器定位策略”)

(2)复数定位,获得指定元素结果集列表

driver.find_elements_by_css_selector(“css选择器定位策略”)

3、Selenium中使用CSS选择器定位元素

(1)通过属性定位元素

CSS选择器可以通过元素的idclass、标签这三个常规属性直接定位到目标元素。

页面中代码如下:

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">

需求:使用CSS选择器通过idclass和其他属性,定位页面中的电话A<input>标签。

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
(1)#表示id属性
#id属性值 例如: #telA
(2).表示class属性
.class属性值 例如: .telA
(3)其他属性
[属性名=属性值] 例如: [name=telA] 3.需求
在页面中,使用css定位电话A输入框
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4.定位电话A标签,使用css selector
# 4.1 通过id定位
telA_1 = driver.find_element_by_css_selector("#telA")
print(telA_1.get_attribute("outerHTML"))
# 4.2 通过class属性定位
telA_2 = driver.find_element_by_css_selector(".telA")
print(telA_2.get_attribute("outerHTML"))
# 4.3 通过其他属性定位
telA_3 = driver.find_element_by_css_selector("[name='telA']")
print(telA_3.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
"""

(2)通过标签定位元素

CSS选择器也可以通过标签与属性的组合来定位元素。

在页面中有如下代码:

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">

需求:使用CSS选择器通过标签+属性定位页面中的电话A<input>标签。

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
标签+属性
格式:标签名[属性名=属性值] 3.需求
在页面中,使用css定位电话A输入框
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4.定位电话A标签,使用css selector
# 标签+属性
# 通过name属性
telA = driver.find_element_by_css_selector("input[name='telA']")
# 通过id属性
telA_1 = driver.find_element_by_css_selector("input#telA")
print(telA.get_attribute("outerHTML"))
print(telA_1.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
"""

(3)通过层级关系定位元素

在前面XPath中讲到层级关系定位,这里CSS选择器也可以达到同样的效果。

在页面中有如下代码:

<p id="p1">
<label for="userA">账号A</label>
<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value=""> </p>

需求:使用CSS选择器通过层级定位的方式,定位页面中的账号A<input>标签。

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
层级定位 需要使用 > 或 空格表示层级关系
格式:父标签名[父标签属性名=属性值]>子标签名 3.需求
在页面中,使用css定位账号A输入框
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4.定位账号A标签,使用css selector层级定位
textA_1 = driver.find_element_by_css_selector("p#p1 input")
print(textA_1.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">
"""

(4)通过索引定位元素

语法格式:

  • 表示父标签下所有子标签顺序

    父标签[父标签属性名=父标签属性值]>:nth-child(索引值)
  • 表示父标签下具体标签的第几个标签

    父标签[父标签属性名=父标签属性值]>子标签:nth-of-type(索引值)

在页面中有如下代码:

<div id="zc">
<fieldset>
<legend>注册用户A</legend>
<p id="p1">
<label for="userA">账号A</label>
<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">
</p>
<p>
<label for="password">密码A</label>
<input type="password" name="passwordA" id="passwordA" placeholder="密码A" value="">
</p>
</fieldset>
</div>

需求:使用CSS选择器通过层级定位的方式,定位页面中的账号A<input>标签。

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
索引定位
(1)父标签名[父标签属性名=属性值]>:nth-child(索引值)
从父标签下所有标签开始计算
(2)父标签名[父标签属性名=属性值]>子标签名:nth-of-type(索引值)
表示父标签下具体标签的第几个标签 3.需求
在页面中,使用css定位账号A输入框
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开注册A页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4. 使用css索引定位账号A输入框
textA_1 = driver.find_element_by_css_selector("fieldset>:nth-child(2)>input")
textA_2 = driver.find_element_by_css_selector("fieldset>p:nth-of-type(1)>input")
print(textA_1.get_attribute("outerHTML"))
print(textA_2.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">
<input type="textA" name="userA" id="userA" placeholder="账号A" required="" value="">
"""

(5)通过逻辑运算定位元素

CSS选择器同样也可以实现逻辑运算,同时匹配两个属性,这里跟XPath不一样,无需写and关键字。

在页面中有如下代码

<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">

需求:使用CSS选择器通过逻辑运算定位的方式,定位页面中的电话A<input>标签。

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
逻辑定位
格式:标签名[属性名1=属性值1][属性名2=属性值2]...
注意:属性与属性之间不能用空格 3.需求
在页面中,使用css定位电话A输入框
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开注册A页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4. 使用css逻辑定位---电话A输入框
# 注意:两个属性之间不能加空格,空格表示层级关系
telA = driver.find_element_by_css_selector("input[type='telA'][placeholder='电话A']")
print(telA.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<input type="telA" name="telA" id="telA" placeholder="电话A" class="telA" value="">
"""

(6)通过模糊匹配定位元素

css_selector有三种模糊匹配方式:

  • ^:匹配到id属性值的头部,如ctrl_12
    driver.find_element_by_css_selector("input[id^='ctrl']")
  • $:匹配到id属性值的尾部,如a_ctrl
    driver.find_element_by_css_selector("input[id$='ctrl']")
  • *:匹配到id属性值的中间,如1_ctrl_12
    driver.find_element_by_css_selector("input[id*='ctrl']")

在页面中有如下代码:

<button type="submitA" value="注册A" title="加入会员A">注册用户A</button>

需求:在页面中,使用CSS选择器定位注册用户A按钮

"""
1.学习目标:
必须掌握selenium中css定位方法
2.语法
2.1 在selenium中语法
(1)driver.find_element_by_css_selector("css选择器定位策略")
(2)driver.find_elements_by_css_selector("css选择器定位策略")
2.2 css表达式写法
模糊匹配:匹配属性值
(1)* :匹配所有
(2)^ :匹配开头
(3)$ :匹配结尾 3.需求
在页面中,使用css定位注册用户A按钮
"""
# 1.导入selenium
from selenium import webdriver
from time import sleep
import os # 2.打开浏览器
driver = webdriver.Chrome() # 3.打开注册A页面
url = "file:///" + os.path.abspath("./练习页面/注册A.html")
driver.get(url) # 4. 使用css模糊匹配定位---注册用户A按钮
button_1 = driver.find_element_by_css_selector("button[type^='su']")
print(button_1.get_attribute("outerHTML"))
button_2 = driver.find_element_by_css_selector("button[value$='册A']")
print(button_2.get_attribute("outerHTML"))
button_3 = driver.find_element_by_css_selector("button[title*='入会']")
print(button_3.get_attribute("outerHTML")) # 5.关闭浏览器
sleep(2)
driver.quit()
"""
输出结果:
<button type="submitA" value="注册A" title="加入会员A">注册用户A</button>
<button type="submitA" value="注册A" title="加入会员A">注册用户A</button>
<button type="submitA" value="注册A" title="加入会员A">注册用户A</button>
"""

4、总结:

这里指做了一些最常用的css_selector定位方式的练习。

如果在工作中有需要用到一些特别的用法,可以查看css_selector的文档。

CSS选择器的文档地址:https://www.w3school.com.cn/cssref/css_selectors.asp

『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素的更多相关文章

  1. 『心善渊』Selenium3.0基础 — 10、使用Seleniun定位页面元素归纳总结(超详细)

    目录 1.Selenium中8种基本元素定位方式 (1)单数形式 (2)复数形式 2.By类定位的8种定位方式 (1)单数形式 (2)复数形式 3.XPath定位总结 (1)基础定位语法 (2)属性定 ...

  2. 『心善渊』Selenium3.0基础 — 7、XPath轴定位详解

    目录 1.XPath轴定位介绍 2.位置路径表达式概念 3.步的路径表达式范例 4.练习 使用XPath轴方式,可根据文档中元素的相对位置,来进行元素的定位.例如:先找到一个相对好定位的元素,在根据与 ...

  3. 『心善渊』Selenium3.0基础 — 24、Selenium的expected_conditions模块详细介绍

    目录 1.EC模块介绍 2.EC模块常用类 3.EC模块的使用 4.EC模块综合使用 (1)title_is(title)示例 (2)presence_of_element_located(locat ...

  4. 『心善渊』Selenium3.0基础 — 11、Selenium对元素常用操作

    目录 1.Selenium对元素常用操作 2.Selenium对元素的其他操作 1.Selenium对元素常用操作 操作 说明 click() 单击元素 send_keys() 模拟输入 clear( ...

  5. 『心善渊』Selenium3.0基础 — 12、Selenium操作鼠标和键盘事件

    目录 (一)对鼠标的操作 1.鼠标事件介绍 2.ActionChains 类鼠标操作的常用方法 3.perform()方法 4.鼠标事件操作步骤 5.示例 (1)右键单击.左键双击 (2)鼠标拖拽动作 ...

  6. 『心善渊』Selenium3.0基础 — 1、Selenium自动化测试框架介绍

    目录 1.Selenium介绍 2.Selenium的特点 3.Selenium版本说明 4.拓展:WebDriver与Selenium RC的区别 5.Webdriver工作原理 1.Seleniu ...

  7. 『心善渊』Selenium3.0基础 — 4、Selenium基础元素定位详解

    目录 1.什么是元素定位 2.Selenium元素定位常用API (1)By_id 定位 (2)by_name 定位 (3)by_class_name 定位 (4)by_tag_name 定位 (5) ...

  8. 『心善渊』Selenium3.0基础 — 5、XPath路径表达式详细介绍

    目录 1.XPath介绍 2.什么是XML 3.XML与HTML对比 4.为什么使用XPath定位页面中的元素 5.XPath中节点之间的关系 (1)节点的概念 (2)节点之间的关系类型 6.XPat ...

  9. 『心善渊』Selenium3.0基础 — 6、Selenium中使用XPath定位元素

    目录 1.Selenium中使用XPath查找元素 (1)XPath通过id,name,class属性定位 (2)XPath通过标签中的其他属性定位 (3)XPath层级定位 (4)XPath索引定位 ...

  10. 『心善渊』Selenium3.0基础 — 16、Selenium对iframe表单的操作

    目录 1.什么是iframe表单 2.iframe表单操作流程 3.iframe表单操作常用方法 (1)进入表单 (2)多表单切换 4.表单操作示例 1.什么是iframe表单 实际上就是HTML页面 ...

随机推荐

  1. primary key

    只要使用innodb就要为表指定主键: 如果不指定mysql就会自己找不为空且为一的作为主键,如果找不到,就会使用默认的(软件自己预定好的)作为主键: 主键分为单列主键和复合主键,用法和单列唯一,联合 ...

  2. [刷题] PTA 02-线性结构4 Pop Sequence

    模拟栈进出 方法一: 1 #include<stdio.h> 2 #define MAXSIZE 1000 3 4 typedef struct{ 5 int data[MAXSIZE]; ...

  3. Python检查 文件备份是否正常 云备份进程是否正常运行

    场景:服务器自动备份数据库文件,每两小时生成一个新备份文件,通过云备份客户端自动上传,需要每天检查是否备份成功. 实现:本脚本实现检查文件是否备份成功,进程是否正常运行,并且发送相关邮件提醒. #! ...

  4. Linux useradd 命令介绍

    Linux useradd 命令介绍 作者: Alan Formy-duval 译者: LCTT Brooke Lau | 2020-01-06 22:58 使用 useradd 命令来添加用户(并且 ...

  5. SPI接口在LCD上的应用

    ​小分辨率的LCD,比如QQVGA,QCIF,QVGA等,广泛应用于功能手机和穿戴设备(比如手表)上.这类小分辨率的LCD,除了支持并行接口(比如i80),一般也会支持串行接口.在实际产品中广泛运用的 ...

  6. 痞子衡嵌入式:关于i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区

    大家好,我是痞子衡,是正经搞技术的痞子.今天痞子衡给大家介绍的是i.MXRT中FlexSPI外设lookupTable里配置Normal read的一个小误区. 关于串行四线NOR Flash,当其作 ...

  7. 通过Maven打jar包&运行

    运行命令:java -jar [包名] https://www.cnblogs.com/jinjiyese153/p/9374015.html

  8. GO学习-(9) Go语言基础之切片

    Go语言基础之切片 本文主要介绍Go语言中切片(slice)及它的基本使用. 引子 因为数组的长度是固定的并且数组长度属于类型的一部分,所以数组有很多的局限性. 例如: func arraySum(x ...

  9. 记录: 解决 pycurl: libcurl link-time ssl backend (openssl) is different from compile-time ssl backend (none/other)

    - Mac 不知道怎么操作的 rm 了 usr/local/ 里面的某些文件, 导致一直出现 pycurl: libcurl link-time ssl backend (openssl) is di ...

  10. Linux BSP非标准HDMI分辨率

    Linux BSP非标准HDMI分辨率 Intrinsyc公司发布了它的一个新的Linux BSP软件的发布 打开-Q820 开发套件基于Linux内核版本.支持的软件功能包括HDMI输出,可以支持标 ...