软件测试 / 测试开发丨 Web 自动化测试 - 高级定位 CSS
获取更多相关知识
本文为霍格沃兹测试开发学社学员学习笔记分享,文末附原文链接。
目录
css 选择器概念
css 相对定位使用场景
css 语法与实战
css 选择器概念
css 选择器有自己的语法规则和表达式
css 定位通常分为绝对定位和相对定位
和 Xpath 一起常用于 UI 自动化测试中的元素定位
css 定位场景
支持 web 产品
支持 app 端的 webview
css 相对定位的优点
可维护性更强
语法更加简洁
解决各种复杂的定位场景
复制代码
css 定位的调试方法
进入浏览器的 console
输入:$("css 表达式")或者 $("css 表达式")
css 基础语法
复制代码
![](https://static001.geekbang.org/infoq/d8/d823886dd33a1c176a880a78173bc113.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/1e/1ea084ba5533a2c97301855e42f8dd6f.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
同个类名,中间有空格需要将空格换成点的形式
css 关系定位
复制代码
![](https://static001.geekbang.org/infoq/71/71edd6b4ce4d11af32105b31e468fc72.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/34/344a78894c3a8b9eb6296e704bd75dcf.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/9b/9b18310f314acf38c5347d5947c2f0bc.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/a6/a610cd7e49831994b22ed6d2da11b8ac.webp?x-oss-process=image%2Fresize%2Cp_80%2Fformat%2Cpng)
![](https://static001.geekbang.org/infoq/46/46e298d0c3b2287bda2a82371f01aa6e.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/93/9356aef6fcccc8c69849a2945b3248e8.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/3a/3a54deac62cbef67dc8da463a09b4606.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
css 顺序关系
复制代码
![](https://static001.geekbang.org/infoq/a5/a548ec66ccdd988d743138a015280d88.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/7a/7a8618d249e3d7085d1930535829e3bc.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
复制代码
找冒号之前的这个 li 的爸爸的第几个孩子,找的是父级 ul 的第几个孩子,第几个 li 孩子
![](https://static001.geekbang.org/infoq/28/28ee062f59b945d382e3244e749ee45e.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
多做了一层根据标签分类的方式,首先指定标签,在通过 nth-of-type 指定同个标签里面的第几个元素
![](https://static001.geekbang.org/infoq/ae/aeee30b573f4298134d09a8f03496906.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
css 语法总结
基本语法
关系语法
顺序语法
![](https://static001.geekbang.org/infoq/ed/edc41d5b8a1d43d50352f1e92e6c0979.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/19/195fed4582b5fc3f20279b5562fb5c69.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
![](https://static001.geekbang.org/infoq/e4/e4daa65439c13b6188d880aa0bb5a50b.jpeg?x-oss-process=image%2Fresize%2Cp_80%2Fauto-orient%2C1)
版权声明: 本文为 InfoQ 作者【测试人】的原创文章。
原文链接:【http://xie.infoq.cn/article/55827e5460997baa56ba39907】。文章转载请联系作者。
评论