自动化测试——css元素定位

news2025/1/19 20:18:49

在这里插入图片描述


文章目录

  • 一、css定位场景
  • 二、css相对定位的优点
  • 三、css的调试方法
    • 1、表达式中含有字符串:表达式中的引号一定和外面字符串的引号相反
  • 四、css基础语法
    • 1、标签定位
    • 2、class定位
    • 特别注意:当class类型的属性值包含多个分割值,$('.s_tab s_tab_1z9nv')不适用。
    • 解决方法:将空格替换为. $('.s_tab.s_tab_1z9nv')
    • 3、id定位
    • 4、属性表达式
  • 五、css关系定位
    • 1、并集
    • 2、临近兄弟(平级、挨着)
    • 3、兄弟(平级、不挨着)
    • 4、父子关系
    • 后代(用的多)
  • 六、css的顺序关系
    • 父子关系+顺序

一、css定位场景

1、支持web产品
2、支持app端的webview(原生的不支持)

二、css相对定位的优点

1、可维护性强
2、语法更加简洁
3、解决各种复杂的定位场景

三、css的调试方法

css定位的3要素:$、小括号、字符串(单引号、双引号都支持)
进入浏览器console
输入:$("css表达式")或者$$("css表达式")

1、表达式中含有字符串:表达式中的引号一定和外面字符串的引号相反

四、css基础语法

类型表达式
标签标签名
.class属性值
id#id属性值
属性[属性名=’属性值‘]

在这里插入图片描述

1、标签定位

支持索引
在这里插入图片描述

2、class定位

在这里插入图片描述

特别注意:当class类型的属性值包含多个分割值,$(‘.s_tab s_tab_1z9nv’)不适用。

在这里插入图片描述

解决方法:将空格替换为. $(‘.s_tab.s_tab_1z9nv’)

在这里插入图片描述

3、id定位

在这里插入图片描述

4、属性表达式

在这里插入图片描述

五、css关系定位

类型表达式
并集元素,元素
临近兄弟元素+元素
兄弟元素1~元素2
父子元素>元素
后代元素 元素

1、并集

在这里插入图片描述

2、临近兄弟(平级、挨着)

在这里插入图片描述
$('#lg+#result_logo')

在这里插入图片描述

3、兄弟(平级、不挨着)

在这里插入图片描述
$('#lg~#form')

在这里插入图片描述

4、父子关系

可以一直嵌套下去
局限性:不稳定

$('#head>.head_wrapper')

在这里插入图片描述

后代(用的多)

$('#head #lg')
在这里插入图片描述
可以一直嵌套下去
$('#head .s_form #lg')
在这里插入图片描述

六、css的顺序关系

类型表达式
父子关系+顺序元素 元素
父子关系+标签类型+顺序元素 元素

在这里插入图片描述

父子关系+顺序

$('#wrapper>div:nth-of-type(1)')
在这里插入图片描述


在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.coloradmin.cn/o/364551.html

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈,一经查实,立即删除!

相关文章

快捷式~node.js环境搭建

1、安装包官网下载:Node.js (nodejs.org) 2、安装完成后修改环境变量 在上面已经完成了 node.js 的安装,即使不进行此步骤的环境变量配置也不影响node.js的使用 但是,若不进行环境变量配置,那么在使用命令安装 node.js全局模块 …

Linux服务:Nginx服务配置及相关模块

目录 一、Nginx配置文件 1、主配置文件解析 2、子配置文件启用 二、子配置文件使用 1、创建虚拟主机实验 2、基于端口虚拟主机实验 三、Nginx模块 1、access模块 2、自定义错误页面 3、状态页开启 一、Nginx配置文件 1、主配置文件解析 ①yum安装主配置文件位置&…

docker上发布 sunnyNgrok 实现内外网穿透,容器内执行命令

最近在使用内外网穿透的工具时发现国内版的Ngrok还挺好用的,但是在dockerHub上搜镜像时发现不知道使用哪一个,索性便自己创建一个docker容器。 1、创建自己想要创建docker镜像的文件夹,我创建的名为“sunny-Ngrok” 2、在文件内创建Dockerfi…

【C语言】预处理器

目录 1. 预处理器的工作原理 2. 预处理指令 3. 宏定义 3.1 简单的宏(对象式宏) 3.2 带参数的宏(函数式宏) 3.3 #define替换规则 3.4 #和## 3.5 带副作用的宏参数 3.6 宏和函数对比 3.7 命名约定 3.8 #undef 3.9 预定义…

支持向量机SVM详细原理,Libsvm工具箱详解,svm参数说明,svm应用实例,神经网络1000案例之15

目录 支持向量机SVM的详细原理 SVM的定义 SVM理论 Libsvm工具箱详解 简介 参数说明 易错及常见问题 SVM应用实例,基于SVM的股票价格预测 支持向量机SVM的详细原理 SVM的定义 支持向量机(support vector machines, SVM)是一种二分类模型&a…

Scala面向对象详解(第六章:Scala包、类和对象、封装、继承和多态、抽象、单例、特质)(尚硅谷笔记)

面向对象第 6 章 面向对象6.1 Scala 包6.1.1 包的命名6.1.2 包说明(包语句)6.1.3 包对象6.1.4 导包说明6.2 类和对象6.2.1 定义类6.2.2 属性6.3 封装6.1.5 访问权限6.2.3 方法6.2.4 创建对象6.2.5 构造器6.2.6 构造器参数6.4 继承和多态6.5 抽象类6.5.1 …

基于机器学习的二手车价格预测及应用实现(预测系统实现)

1.摘要 随着中国汽车工业的迅速发展,国内的汽车数量也在迅速增长。新车销售市场已经逐渐饱和,而二手车交易市场正在兴起。但是,由于中国的二手车市场尚未成熟,与发达国家相比仍存在较大差距。其中一个重要原因是二手车的市场价格难…

信息系统项目管理师试题精选(四)

【1】关于区块链的描述,不正确的是( )。A. 区块链的共识机制可有效防止记账节点信息被篡改B. 区块链可在不可信的网络进行可信的信息交换C. 存储在区块链的交易信息是高度加密D. 区块链是一个分布式共享账本和数据库【2】( &#…

记录一次Android视频播放音画不同步问题的定位及分析

1.何为音画不同步 音画不同步很简单就是视频播放过程中声音和画面出现的时间点不一致,滞后或者提前。 2.音画不同步问题分析思路 2.1.音画不同步问题的证明 对于滞后或者提前很多的音画不同步可以直接认为发生了该问题,但是滞后或者提前不是很多的就…

Linux系统安装MySQL8.0版本详细教程【亲测有效】

首先官网下载安装包:https://downloads.mysql.com/archives/community/ 一、上传到安装服务器 二、解压 tar -xvf mysql-8.0.31-linux-glibc2.12-x86_64.tar.xz三、移动位置并重新命名 mv mysql-8.0.31-linux-glibc2.12-x86_64 /usr/local/mysql四、创建mysql用户…

信息安全基础概要(二)——安全保护等级,安全服务与安全机制

目录 一、OSI/RM七层模型 二、各个网络层次的安全保障 三、计算机信息系统安全保护等级划分准则(GB17859-1999) 四、信息安全体系结构——安全服务与安全机制 前篇: https://blog.csdn.net/superSmart_Dong/article/details/125690697 一、OSI/RM七层模型 广播…

每日一题——L1-070 吃火锅(15)

L1-070 吃火锅 分数 15 以上图片来自微信朋友圈:这种天气你有什么破事打电话给我基本没用。但是如果你说“吃火锅”,那就厉害了,我们的故事就开始了。 本题要求你实现一个程序,自动检查你朋友给你发来的信息里有没有 chi1 huo…

字节是真的难进,测开4面终上岸,压抑5个月,终于可以放声呐喊

这次字节的面试,给我的感触很深,意识到基础的重要性。一共经历了五轮面试:技术4面+HR面。 下面看正文 本人自动专业毕业,压抑了五个多月,终于鼓起勇气,去字节面试,下面是我的面试过…

Mysql 索引(二)—— InnoDB 与 MyISAM 索引方式的比较(聚簇索引 VS 非聚簇索引)

在上一部分了解到,主键索引的本质其实就是一棵B树,通过每一层的目录页来找到记录所在的page页。根据 page页是否保存了数据,我们可以将主键索引分为 聚簇索引 和 非聚簇索引。 1、MyISAM (1) 非聚簇索引 非聚簇索引的目录和数据记录是分开存…

NPE:记一次脑残NPE的排查过程

目录 碎碎念: 如下这行报NPE: 排查过程: 解解方案: 小结: 空指针出现的几种情况: 如何从根源避免空指针: 赋值时自动拆箱出现空指针: 1、变量赋值自动拆箱出现的空指针 2、…

接了ChatGPT的NewBing如何评价CodeGeeX

一篇《如何用 CodeGeeX 替代 GitHub Copilot》的文章在开发者社区登上热榜,开发者关注的AI生成代码工具CodeGeeX,这款插件产品目前支持在VSCode市场和Jetbrains IDEs下载使用,是国产对标Copilot目前安装量最大的开发者工具。 之所以引发开发…

JS 中 for in 和 for of 的区别

for in 和 for of 是js中常用的遍历方法;两者的区别如下: 文章目录一,遍历数组二,遍历对象三,总结一,遍历数组 1,for in 是ES5的语法标准,而for of则是ES6语法标准。 const arr1 …

CD19药物|适应症|市场销售-上市药品前景分析

CD19是免疫球蛋白Ig超家族的I型跨膜糖蛋白,仅在B细胞中表达。CD19在b细胞发育的多个阶段通过调节b细胞受体信号通路参与b细胞的命运和分化。CD19在B细胞上普遍表达,如在B细胞恶性肿瘤中的表达,涵盖了B细胞淋巴瘤的所有亚型,从惰性…

IP地理位置定位技术原理是什么

IP地理位置定位技术的原理是基于IP地址的网络通信原理和基础上的。它利用IP地址所包含的一些信息,如网络前缀和地址段,以及ISP的IP地址归属地数据库,来推测IP地址所对应的地理位置。具体来说,IP地址是由32位二进制数字组成的&…

AndroidStudio Push第一次代码到 Git

1、首先需要在远程创建一个空仓库,我使用 GiteeAS创建新项目,在项目文件夹根目录下命令行 git init 或者在AS 的工具栏找到VCS -> Enable Version Control Integration之后工具栏就出现 git 的操作图标了push 本地代码到远程如果直接 git push 就会出…