Selenium系列(十二) - 自动化必备知识之CSS选择器的详细使用
如果你还想从头学起Selenium,可以看看这个系列的文章哦!
https://www.cnblogs.com/poloyy/category/1680176.html
其次,如果你不懂前端基础知识,需要自己去补充哦,博主暂时没有总结(虽然我也会,所以我学selenium就不用复习前端了哈哈哈...)
Web UI自动化中,定位方式的优先级
- 优先级最高:ID
- 优先级其次:name
- 优先级再次:CSS selector
- 优先级再次:Xpath
针对css selector和xpath的优先级做一个简单的说明
在项目中我们可能用的最多的是css或者xpath,那么针对这两种,我们优先选择css,原因在哪些?
- 原因1:css是配合html来工作,它实现的原理是匹配对象的原理,而xpath是配合xml工作的,它实现的原理是遍历的原理,所以两者在设计上,css性能更优秀
- 原因2:语言简洁,明了,相对xpath
- 原因3:前端开发主要是使用css,不使用xpath,所以在技术上面,我们可以获得帮助的机会非常多
定位元素的注意事项(划重点)
- 找到待定位元素的唯一属性
- 如果该元素没有唯一属性,则先找到能被唯一定位到的父元素/子元素/相邻元素,再使用 > , " " , + 等进行辅助定位
- 不要使用随机唯一属性定位
- 最重要的是多跟研发沟通,尽量把关键元素加上ID或者name,并减少不合理的页面元素,例如重复ID这样的事情最好不要发生
首先,基础的CSS选择器
选择器 | 名字 | 例子 | 例子描述 |
基础选择器 | |||
.class | class选择器 | .intro | 选择 class="intro" 的所有元素。 |
#id | id选择器 | #firstname | 选择 id="firstname" 的所有元素。 |
* | 通配符 | 选择所有元素。 | |
element | 标签选择器 | p | 选择所有 <p> 元素。 |
多层选择器 | |||
element,element | 分组选择器 | div,p | 同时选择所有 <div> 元素和所有 <p> 元素。 |
element element | 后端选择器 | div p | 选择 <div> 元素内部的所有 <p> 元素(包括子元素、孙子元素) |
element>element | 子元素选择器 | div>p | 选择 <div> 元素下的 <p> 子元素。 |
element+element | 相邻选择器 | div+p | 选择 <div> 元素之后的所有兄弟 <p> 元素。 |
属性选择器 | |||
[attribute] | [target] | 选择带有 target 属性所有元素。 | |
[attribute=value] | [target=_blank] | 选择 target="_blank" 的所有元素。 | |
[attribute~=value] | [title~=flower] | 选择 title 属性包含单词 "flower" 的所有元素。 | |
[attribute|=value] | [lang|=en] | 选择 lang 属性值以 "en" 开头的所有元素。 |
html页面中,css正确写法的栗子
/* id选择器 */
#abc {
color: #cc0000;
font-size: 12px;
} /* class 选择器 */
.down {
color: #66cc66;
} /* 标签选择器 */
p {
background: cornflowerblue;
} /* 标签选择器可以与class选择器组合使用 */
p.down {
font-size: 24px;
} /* 分组选择器 */
ul,
div,
.up {
color: #cc0000;
} /* 属性选择器 */
[href] {
color: #cc6600;
} span[title="hello"] {
color: #00FFFF;
} span[title~="python"] {
font-size: 24px;
} /* 后代选择器 */
div li {
background: forestgreen;
} /* 子元素选择器 */
div[id="up"]>ul {
color: #cc6600;
} /* 相邻兄弟选择器 */
#down+li {
font-size: 24px;
} /* 后续兄弟选择器 */
#down~li {
color: #cc0000;
}
然后,伪类选择器
选择器 | 例子 | 例子描述 |
:first-child | p:first-child | 选择属于父元素的第一个子元素的每个 <p> 元素。 |
:nth-child(n) | p:nth-child(2) | 选择属于其父元素的第二个子元素的每个 <p> 元素。 |
:nth-last-child(n) | p:nth-last-child(2) | 同上,从最后一个子元素开始计数。 |
:nth-of-type(n) | p:nth-of-type(2) | 选择属于其父元素第二个 <p> 元素的每个 <p> 元素。 |
:nth-last-of-type(n) | p:nth-last-of-type(2) | 同上,但是从最后一个子元素开始计数。 |
:last-child | p:last-child | 选择属于其父元素最后一个子元素每个 <p> 元素。 |
Selenium系列(十二) - 自动化必备知识之CSS选择器的详细使用的更多相关文章
- 爬虫系列(十二) selenium的基本使用
一.selenium 简介 随着网络技术的发展,目前大部分网站都采用动态加载技术,常见的有 JavaScript 动态渲染和 Ajax 动态加载 对于爬取这些网站,一般有两种思路: 分析 Ajax 请 ...
- Web 前端开发精华文章推荐(jQuery、HTML5、CSS3)【系列十二】
2012年12月12日,[<Web 前端开发人员和设计师必读文章>系列十二]和大家见面了.梦想天空博客关注 前端开发 技术,分享各种增强网站用户体验的 jQuery 插件,展示前沿的 HT ...
- SQL Server 2008空间数据应用系列十二:Bing Maps中呈现GeoRSS订阅的空间数据
原文:SQL Server 2008空间数据应用系列十二:Bing Maps中呈现GeoRSS订阅的空间数据 友情提示,您阅读本篇博文的先决条件如下: 1.本文示例基于Microsoft SQL Se ...
- Alamofire源码解读系列(十二)之请求(Request)
本篇是Alamofire中的请求抽象层的讲解 前言 在Alamofire中,围绕着Request,设计了很多额外的特性,这也恰恰表明,Request是所有请求的基础部分和发起点.这无疑给我们一个Req ...
- SpringBoot系列(十二)过滤器配置详解
SpringBoot(十二)过滤器详解 往期精彩推荐 SpringBoot系列(一)idea新建Springboot项目 SpringBoot系列(二)入门知识 springBoot系列(三)配置文件 ...
- struts2官方 中文教程 系列十二:控制标签
介绍 struts2有一些控制语句的标签,本教程中我们将讨论如何使用 if 和iterator 标签.更多的控制标签可以参见 tags reference. 到此我们新建一个struts2 web 项 ...
- SpringBoot系列(二)入门知识
SpringBoot系列(二)入门知识 往期推荐 SpringBoot系列(一)idea新建springboot项目 引言 本来新建springboot项目应该放在入门知识这一章的,但是由于新建spr ...
- Alamofire源码解读系列(十二)之时间轴(Timeline)
本篇带来Alamofire中关于Timeline的一些思路 前言 Timeline翻译后的意思是时间轴,可以表示一个事件从开始到结束的时间节点.时间轴的概念能够应用在很多地方,比如说微博的主页就是一个 ...
- 学习ASP.NET Core Razor 编程系列十二——在页面中增加校验
学习ASP.NET Core Razor 编程系列目录 学习ASP.NET Core Razor 编程系列一 学习ASP.NET Core Razor 编程系列二——添加一个实体 学习ASP.NET ...
随机推荐
- python类变量与构造函数的使用
类变量:可在类的所有实例之间共享的变量 实例类对象:类的实例是调用类对象来创建的.如:par = Parent(),par就是类Parent的一个实例类对象. 实例变量(成员变量):同一个类对象可以创 ...
- Java核心技术卷1 第10版 笔记
3.3 数据类型 Java是一种强类型语言.必须为每一个变量声明一种类型.在java中,一共有8终基本类型. 3.3.1 整形 类型 存储需求 取值范围 int 4字节 -2 147 483 648 ...
- pc端适配移动端
pc端和移动端共用一套代码 1. 允许网页宽度自动调整 在网页代码的头部,加入一行viewport元标签 <meta name="viewport" content=&quo ...
- PHP数组的升序降序函数
数组排序函数:::sort()对数组进行升序排列rsort()对数组进行降序排列 asort()根据关联数组的值,对数组进行升序排列ksort()根据关联数组的键,对数组进行升序排列 arsort() ...
- SSL/TLS 协议运行机制概述(一)
SSL/TLS 协议运行机制概述(一) SSL/TLS 发展史 1994年,NetScape 设计了SSL协议(Secure Sockets Layer) 1.0,未正式发布 1995年,NetSca ...
- 如何找回微信小程序源码?2020年微信小程序反编译最新教程 小宇子李
前言:在网上看了找回微信小程序源码很多教程,都没法正常使用.微信版本升级后,会遇到各种报错, 以及无法获取到wxss的问题.查阅各种资料,最终解决,于是贴上完整的微信小程序反编译方案与教程. 本文章仅 ...
- 【猫狗数据集】使用top1和top5准确率衡量模型
数据集下载地址: 链接:https://pan.baidu.com/s/1l1AnBgkAAEhh0vI5_loWKw提取码:2xq4 创建数据集:https://www.cnblogs.com/xi ...
- pyppepeer淘宝登录
代码: import time import random import asyncio import pyppeteer class LoginTaoBao: """ ...
- 初创电商公司Drop的数据湖实践
欢迎关注微信公众号:ApacheHudi 1. 引入 Drop是一个智能的奖励平台,旨在通过奖励会员在他们喜爱的品牌购物时获得的Drop积分来提升会员的生活,同时帮助他们发现与他们生活方式产生共鸣的新 ...
- 基于Jquery WeUI的微信开发H5页面控件的经验总结(1)
在微信开发H5页面的时候,往往借助于WeUI或者Jquery WeUI等基础上进行界面效果的开发,由于本人喜欢在Asp.net的Web界面上使用JQuery,因此比较倾向于使用 jQuery WeUI ...