Selenium+Python 自动化测试之CSS语法

前言

我们都知道在UI自动化测试中，使用XPath和CSS进行元素定位，都非常的有效。所以，今天我们主要讲解一下CSS语法。想了解的XPath语法请点击此处

1.什么是CSS

• CSS是层叠样式表
• 样式定义如何显示 HTML 元素

2. 语法

3. 代码演示

# -*- coding: utf-8 -*-

# 这里还是使用百度首页举例子
# xpath中对于 有多个class的元素，处理与xpath不同，css可以全部写上，而不会报错

import time
from selenium import webdriver

driver = webdriver.Chrome()
# 设置窗口最大化
driver.maximize_window()
driver.get("https://www.baidu.com/")
# 设置全局等待，在find_element的时候有效
driver.implicitly_wait(5)

# id
driver.find_element_by_css_selector("#kw").send_keys('123')
time.sleep(1)

# class
driver.find_element_by_css_selector(".s_ipt").send_keys('456')
time.sleep(1)

# 标签
name = driver.find_element_by_css_selector("input").tag_name
print(name)
time.sleep(1)

# 其他属性
driver.find_element_by_css_selector('[autocomplete="off"]').send_keys('111')
time.sleep(1)

# 父子定位
driver.find_element_by_css_selector("form>span>input").send_keys('222')
time.sleep(1)

# 组合定位 (定位id为form的from标签下span标签下的，class为s_ipt的input标签)
driver.find_element_by_css_selector('form#form>span>input.s_ipt').send_keys('333')
time.sleep(1)

# 下标定位,  :nth-clild(2)
text = driver.find_element_by_css_selector("div#u1 a:nth-child(2)").text
print(text)  # hao123

# 同时满足两个属性定位
text = driver.find_element_by_css_selector('[class="mnav"][name="tj_trnews"]').text
print(text)     # 新闻

# 两个元素二选一
text = driver.find_element_by_css_selector('div#u1 a:nth-child(2),div#u1 a:nth-child(3)').text
print(text)

# 两个属性二选一
text = driver.find_element_by_css_selector('[class="s_btn"],[id="su"]').get_attribute("value")
print(text)     # 百度一下

# 匹配紧随XX元素后的同级元素，选第一个
text = driver.find_element_by_css_selector("div.s_form+div").get_attribute('id')
print(text)

# 匹配同级所有的元素
els = driver.find_elements_by_css_selector("div.s_form~div")
for i in els:
    print(i.get_attribute('id'))

driver.quit()