『心善渊』Selenium3.0基础 — 8、使用CSS选择器定位元素

1、CSS选择器介绍
2、CSS选择器定位语法
3、Selenium中使用CSS选择器定位元素
4、总结：

1、CSS选择器介绍

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

by_css_selector通过CSS选择器查找元素，这种元素定位方式跟by_xpath比较类似，Selenium官网的Document里极力推荐使用CSS locator，而不是XPath来定位元素。原因是CSS locator比XPath 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选择器可以通过元素的id、class、标签这三个常规属性直接定位到目标元素。

页面中代码如下：

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

需求：使用CSS选择器通过id，class和其他属性，定位页面中的电话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选择器的文档地址：//www.w3school.com.cn/cssref/css_selectors.asp

Tags: 测试基础必会技能 - Selenium测试框架