CSS定位
- CSS是英文“Cascading Style Sheets"的缩写,是层叠样式表。
- CSS是一种用来表现HTML或XML等文件样式的计算机语言
- CSS为HTML标记语言提供了一种样式描述,它定义了其中元素的显示方式。例如字体、颜色、位置等,被用于描述网页上的信息格式化和显示方式
- 样式规则由一个或多个样式属性及其值组成。可以直接放在网页中,也可以单独存在独立的文档中
- CSS不仅可以静态的修饰网页,还可以配合各种脚本语言动态的对网页各种元素进行格式化
CSS选择器
- CSS SELECTOR(CSS选择器):是CSS中的一个子技术,用于选择要修饰样式的页面元素。
获取CSS选择器
Firefox→打开网页→目标元素右击→菜单里选择“检查"→目标源代码行右击→复制→CSS选择器
CSS定位语法
变量 = driver.find_element(By.CSS_SELECTOR,'CSS选择器')
"""
打开首页,点击"登录"
"""
from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By
driver = webdriver.Firefox() # 启动浏览器
driver.get('http://localhost/upload/index.php')
driver.find_element(By.CSS_SELECTOR,'#ECS_MEMBERZONE > a:nth-child(2) > img:nth-child(1)').click()
sleep(3) # 等待3秒
driver.quit() # 关闭浏览器
XPATH定位与CSS定位优缺点
XPATH功能强大,丰富的函数库,支持向上级查找,通过XPATH轴支持各种节点关系查找
CSS定位,选择器在性能上更优,运行速度更快,语法上更简洁
CSS选择器分类
类型选择器、简单属性选择器、路径选择器、索引号选择器
类型选择器
- CSS类型选择器是使用元素标记的名称来选择元素的一种选择器。
- 使用这种选择器,可以对这种类型的每个元素进行修饰。
"""
启动Firefox,打开留言板,输入留言内容hello,等待3秒,关闭浏览器
"""
from selenium import webdriver
from time import sleep
from selenium.webdriver.common.by import By
driver = webdriver.Firefox() # 启动浏览器
driver.get('http://localhost/upload/message.php')
driver.find_element(By.CSS_SELECTOR,'textarea').send_keys('hello')
sleep(3) # 等待3秒
driver.quit() # 关闭浏览器
简单属性选择器
[属性名='属性值'] 或 标记名[属性名='属性值']
注意:属性不限定,任何属性都可以进行筛选
CLASS属性选择器:用点(.)来标识用CLASS里的类名选择元素。
标记.类名
.类名
.类名1.类名2.类名3
ID属性选择器:用#来标识用id属性值选择元素
标记#id属性值
#id属性值
#id属性值.类名
所有属性都可以用:[]描述属性名值对的信息
标记[属性名='属性值']
[属性名='属性值']
[属性名1='属性值1'][属性名2='属性值2']
路径选择器
- 按照父子关系路径选择元素:用大于号(>)向下级查找子节点
- 如:高级搜索是form下级的a
- form#searchForm>a
- 按照祖先后代关系路径选择元素:用英文半角空格查找后代节点
- 如:高级搜索是div后代里的a
- div#search a
索引号选择器
- CSS索引号应用场景:同一个父元素下级有同标记的子元素。
- CSS索引号规则:无论什么标记的所有子元素一起从1开始排序。
CSS索引号语法
标记:first-child -- 第一个子节点
标记:last-child -- 最后一个子节点
标记:nth-child(索引号) -- 任意索引号的子节点