Selenium的CSS层叠样式表选择器（一）

Selenium的CSS层叠样式表选择器（一）

目的：了解在selenium中可以通过CSS Selector选择界面元素，重点掌握通过选择器根据id、class 、tag这三个常用属性选择元素的语法，以及通过父子元素进行选择的方法。了解CSS 选择器支持的通过任何属性来选择元素的用法。

要求：在pycharm 环境下完成上述各项任务

条件：win7/10、pycharm、selenium4.4.0

内容及步骤：

HTML中经常要为某些元素指定显示效果，比如：前景文字颜色是红色，背景颜色是黑色，字体是微软雅黑等。用来表现HTML样式的计算机语言就是CSS(Cascading Style Sheets)层叠样式表。CSS不仅可以静态地修饰网页，还可以配合各种脚本语言动态地对网页各元素进行格式化。于是，在执行WEB界面自动化测试开发时，除了前面讲的直接使用id、class属性、tag名来选择元素外，Selenium还专门提供了CSS Selector语法选择元素。

find_element(By.CSS_SELECTOR, CSS Selector参数)

find_elements(By.CSS_SELECTOR, CSS Selector参数)

一、 根据tag名选择元素的语法：直接写tag名

如果要选择所有的tag名为div的元素，则应写为：

find_element(By.CSS_SELECTOR, 'div')

等价于 find_element(By.TAG_NAME, 'div')

二、 根据id属性选择元素的语法：在id号前面加上一个#号（#id值）

例如：一个输入框的Html元素定义如下：

想要根据id属性选择这个输入框，则应写为：

find_element(By.CSS_SELECTOR, '#kw')

等价于 find_element(By.ID, 'kw')

三、 根据class属性选择元素的语法：在class值前面加上一个点（.class值）

想要根据class属性选择上面的输入框，则应写为：

find_element(By.CSS_SELECTOR, '.s_ipt')

等价于 find_element(By.CLASS_NAME, 's_ipt')

四、 通过父子元素选择

HTML中，元素内部可以包含其他元素，具有层级关系。

如果元素2是元素1的直接子元素，要选择元素2时， CSS Selector 选择子元素的语法是：元素1 >元素2（中间用大于号可理解为箭头）。

也支持更多层级的选择： 元素1 >元素2 >元素3 >元素4 （选择的是元素4 ）

如果元素2是元素1的后代元素，要选择元素2时， CSS Selector 选择后代元素的语法是： 元素1 元素2（中间是一个或者多个空格隔开），同样支持更多层级的选择：

元素1 元素2 元素3 元素4

五、 通过任何属性来选择元素

语法是用一个方括号 [ ] 括起属性及取值，外部用单引号或双引号都可以，但要与方括号内部的引号区分开，多个属性时用多个 [ ] 连接在一起。

例如：一个超链接的Html元素定义如下：

苏ICP备88885574号

想要利用href属性来选择a元素，应写为：

find_element(By.CSS_SELECTOR, '[href]')

也可通过选择属性href值等于 http://www.miitbeian.gov.cn 找到与上面相同的元素，具体写作： find_element(By.CSS_SELECTOR, '[href="http://www.miitbeian.gov.cn"]')

CSS Selector可以选择属性值包含某个字符串的元素：语法（*=）

选择上面的超链接元素可写为：find_element(By.CSS_SELECTOR, '[href*="miitbeian"]')

CSS Selector可以选择属性值以某个字符串开头的元素：语法（^=）

选择上面的超链接元素可写为：find_element(By.CSS_SELECTOR, '[href^="http"]')

CSS Selector可以选择属性值以某个字符串结尾的元素：语法（$=）

选择上面的超链接元素可写为：find_element(By.CSS_SELECTOR, '[href$="gov.cn"]')

CSS Selector指定选择的元素要同时具有多个属性的限制时，要将属性连在一起写。
例如：
某Html元素定义为：
<div class="misc" ctype="gun">沙漠之鹰</div>
想要选择此元素应写为：

find_element(By.CSS_SELECTOR, 'div[class="misc"][ctype="gun"]')

注意多个属性之间不能加空格，否则就变成了父子关系。

六、 验证 CSS Selector 语法的正确性

在python代码中使用print输出语句并运行，可以验证 CSS Selector 的语法是否正确选择了我们要选择的元素，但每次选择都进行这样的验证非常耗时。

由于 CSS Selector 是浏览器直接支持的，一个简便的方法是：在浏览器开发者工具栏中进行验证。在开发者工具栏，点击 Elements 元素标签后，同时按 Ctrl 键 和 F 键，就会出现一个查询框，在其中输入任何 CSS Selector 表达式，如果能选择到元素，输入框右边会显示出类似 1 of 1 （第几个of共选择到几个）这样的内容，且选中的元素高亮显示。若选择到的元素有多个，第一个被高亮显示。

同学们可以使用这个方法，加速编程。同时在熟练应用后，努力做到编写的CSS Selector 表达式简洁且选中的元素唯一。

练习1：要求如下

在https://cdn2.byhy.net/files/selenium/sample1.html 网页中，使用CSS Selector ;

①根据tag名选择此页中的输入框并输入“查看完毕！”，

②根据id属性选择此页面底部的版权信息并输出，

③选择此页中所有class属性值为plant的元素并依次输出。

提交代码

# import time
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()

driver.get("https://cdn2.byhy.net/files/selenium/sample1.html")
searchtext = driver.find_element(By.CSS_SELECTOR, '#searchtext')
searchtext.send_keys('查看完毕!')
# time.sleep(2)
copyright = driver.find_element(By.CSS_SELECTOR, '.copyright')
print(copyright.text)
date = driver.find_element(By.CSS_SELECTOR, '.date')
print(date.text)
banben = driver.find_element(By.CSS_SELECTOR, '#bottom > div.footer2 > span')
print(banben.text)
elements = driver.find_elements(By.CSS_SELECTOR,'.plant')
for element in elements:
    print(element.text)

练习2：要求如下

打开2345天气王网站https://tianqi.2345.com/，获取网页中当前城市名称，查看今天以及之后一周内的天气情况，输出当前城市一周内的最高气温和最低气温，输出格式为：

AAA（当前城市名称）一周内最高气温为XX摄氏度，最低气温为YY摄氏度。

提交代码

import time
import re
from selenium import webdriver
from selenium.webdriver.common.by import By

driver = webdriver.Chrome()
driver.get("https://tianqi.2345.com/")
didian = driver.find_element(By.CSS_SELECTOR,'body > div.banner > div.w1200.clearfix > div > div.banner-city > div > a:nth-child(1) > span')
time.sleep(2)
print(didian.text)

weather_list = driver.find_elements(By.CSS_SELECTOR, '.banner-right-con-list-temp')
arr1 = []
for element in weather_list:
    # print(element.text)
    element1 = re.sub('([^\u0030-\u0039\'-])', ' ', element.text)
    element3 = element1.rstrip()
    # print(element1)
    str_list = element3.split(" ")
    for arr3 in str_list:
        arr1.append(arr3)
arr2 = map(int, arr1)

# 获取最高气温和最低气温
high_temps = []
low_temps = []
for element2 in arr2:
    high_temps.append(element2)
    low_temps.append(element2)
    # print(element2)

# 输出结果
max_temp = max(high_temps)
min_temp = min(low_temps)
print(f'{didian.text}一周内最高气温为{max_temp}摄氏度，最低气温为{min_temp}摄氏度。')