Web自动化测试05：Selenium-CSS定位

原创

黑马程序员 2023-01-15 17:38:08 ©著作权

文章标签 前端自动化 selenium CSS 选择器 文章分类 Spark 大数据

©著作权归作者所有：来自51CTO博客作者黑马程序员的原创作品，请联系作者获取转载授权，否则将追究法律责任

系列文章目录

🐟软件测试功能到自动化学习路线图，2022年最新版技术栈

🍑软件测试01：从了解测试岗位职能和测试流程开始，附作业 🍑软件测试02：6大实际案例手把手教你设计测试点
🍑软件测试03：用例执行以及缺陷管理的学习，附禅道下载使用流程
🍑软件测试04：你必须要知道的HTML标签作用
🍑软件测试实战项目web资讯管理平台—黑马头条测试

😊身为开发必知必会的Linux：Linux远程连接/命令的使用 😊Linux命令大全，唯一以案例详解文，持续更新中
😊Linux命令大全以及数据库，唯一以案例详解文，已完结

👼 Web自动化测试01：认识web自动化在什么项目中适用 👼Web自动化测试02：Web自动化测试工具选择大全
👼Web自动化测试03：Selenium安装配置，详细教程
👼Web自动化测试04：Selenium-API操作之元素定位

文章目录

系列文章目录
学习目标
一、什么是CSS定位？
二、CSS 定位常用策略

2.1 id选择器
2.2 class选择器
2.3 元素选择器
2.4 属性选择器
2.5 练习
2.6 层级选择器

三、 CSS延伸

3.1 CSS 总结

学习目标

我们web自动化的内容，一共分为七个模块。今天开始第二章的学习，Selenium-API操作相关内容。
如果！还有朋友没有掌握Python基础，大家移步到我们的Python专栏进行学习。

本文学习目标：

1.掌握XPath定位策略
2.掌握CSS定位策略

为什么要学习XPath、CSS定位？

1.如果要定位的元素没有id、name、class属性，该如何进行定位？
2.如果通过name、class、tag_name无法定位到唯一的元素，该如何进行定位？

一、什么是CSS定位？

1.CSS（Cascading Style Sheets）是一种语言，它用来描述HTML元素的显示样式；

2.在CSS中，选择器是一种模式，用于选择需要添加样式的元素；
3.在Selenium中也可以使用这种选择器来定位元素。

提示：
1.在selenium中推荐使用CSS定位，因为它比XPath定位速度要快
2.css选择器语法非常强大，在这里我们只学习在测试中常用的几个

CSS定位方法

element = driver.find_element_by_css_selector(css_selector)

二、CSS 定位常用策略

1.id选择器
2.class选择器
3.元素选择器
4.属性选择器
5.层级选择器

2.1 id选择器

说明：根据元素id属性来选择格式：#id
例如：#userA <选择id属性值为userA的元素>

2.2 class选择器

说明：根据元素class属性来选择格式：.class
例如：.telA <选择class属性值为telA的所有元素>

2.3 元素选择器

说明：根据元素的标签名选择格式：element
例如：input <选择所有input元素>

2.4 属性选择器

说明：根据元素的属性名和值来选择
格式：[attribute=value] element[attribute=value]
例如：[type=“password”] <选择type属性值为password的元素>

2.5 练习

需求：打开注册A.html页面，完成以下操作
1).使用CSS定位方式中id选择器定位用户名输入框，并输入：admin
2).使用CSS定位方式中属性选择器定位密码输入框，并输入：123456
3).使用CSS定位方式中class选择器定位电话号码输入框，并输入：18600000000
4).使用CSS定位方式中元素选择器定位注册按钮，并点击