【心善渊&Selenium3.0基础】— 10、Selenium中使用CSS选择器定位

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_selector定位语法

1. 单数定位，获得一个指定元素对象

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

2. 复数定位，获得指定元素结果集列表

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

3、Selenium中使用css_selector定位

（1）css属性定位

css可以通过元素的id、class、标签这三个常规属性直接定位到目标元素。

在页面中有如下代码：

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

需求：使用css_selector通过id，class和其他属性定位页面中的电话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)#表示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标签定位

css也可以通过标签与属性的组合来定位元素。

在页面中有如下代码

<input type="telA" name="telA" id="telA" placeholder