selenium之css定位详解

css定位
css概述：
1、css（Cascading Style Sheets）是一种语言，它用来描述HTML和XML的元素显示样式。
2、css语言中有css选择器，在selenium中也可以使用这种选择器来进行元素定位。
3、css定位方式比xpath快，而且css的语法也非常强大，所以非常推荐这种方式定位。
css定位策略（方式）：
1、id选择器
2、class选择器
3、元素选择器
4、属性选择器
5、层级选择器
css定位方法：find_element_by_css_selector()

1：id选择器
说明：根据元素id属性来选择
格式：**#id属性值** 如：#userA(选择id属性值为userA的所有元素)
示例：打开百度首页，通过css定位，id属性来输入搜索关键字

from selenium import webdriver
import time

# 打开chrome浏览器
driver = webdriver.Chrome()# 打开百度搜索页面
driver.get('https://www.baidu.com')# 通过css id属性来定位
driver.find_element_by_css_selector('#kw').send_keys('selenium')# 强制等待2秒查看效果
time.sleep(2)# 关闭浏览器
driver.quit()

2：class选择器
说明：根据元素class属性来选择
格式：**.class属性值** 如：.telA(选择class属性值为telA的所有元素)
示例：打开百度首页，通过css定位，class属性来输入搜索关键字

from selenium import webdriver
import time

# 打开chrome浏览器
driver = webdriver.Chrome()# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('.s_ipt').send_keys('hello python')# 强制等待2秒查看效果
time.sleep(2)# 关闭浏览器
driver.quit()

3：元素选择器
说明：根据元素标签名来选择
格式：element 如：input(选择所有input元素)

4：属性选择器
说明：根据元素的属性名和值来选择
格式：[attribute=value] 如：[type=‘password’]（选择所有type属性为password的值）
示例：打开百度首页，通过css定位，属性选择器来输入搜索关键字

from selenium import webdriver
import time

# 打开chrome浏览器
driver = webdriver.Chrome()# 打开百度搜索页面
driver.get('https://www.baidu.com')
driver.find_element_by_css_selector('[name="wd"]').send_keys('你好，python')# 强制等待2秒查看效果
time.sleep(2)# 关闭浏览器
driver.quit()

5：层级选择器
说明：根据元素的父子关系来选择
格式：element>element 如：p>input（返还所有P元素下所有的input元素）
提示：>可以用空格代替，如：p input或者 p [type=‘password’]
示例：打开百度首页，通过css定位，层级选择器来输入搜索关键字

from selenium import webdriver
import time

# 打开chrome浏览器
driver = webdriver.Chrome()# 打开百度搜索页面
driver.get('https://www.baidu.com')# 通过css 层级选择器定位
driver.find_element_by_css_selector('form > span > input').send_keys('层级属性')# 强制等待2秒查看效果
time.sleep(2)# 关闭浏览器
driver.quit()