软件测试 / 测试开发丨 Web 自动化测试 - 高级定位 CSS

作者：测试人

2023-05-31
北京
本文字数：689 字
阅读完需：约 2 分钟

获取更多相关知识

本文为霍格沃兹测试开发学社学员学习笔记分享，文末附原文链接。

css 选择器概念

css 选择器有自己的语法规则和表达式
css 定位通常分为绝对定位和相对定位
和 Xpath 一起常用于 UI 自动化测试中的元素定位

css 定位场景

支持 web 产品
支持 app 端的 webview

css 相对定位的优点

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

# 绝对定位$("#ember63 > td.main-link.clearfix.topic-list-data > span > span > a")# 相对定位$("#ember63 [title='新话题']")

复制代码

css 定位的调试方法

进入浏览器的 console
输入:$("css 表达式")或者 $("css 表达式")

css 基础语法

//在console中的写法// https://www.baidu.com///标签名$('input')//.类属性值$('.s_ipt')//#id属性值$('#kw')//[属性名='属性值']$('[name="wd"]')

复制代码

同个类名，中间有空格需要将空格换成点的形式

css 关系定位

//在console中的写法//元素,元素$('.bg,.s_ipt_wr,.new-pmd,.quickdelete-wrap')//元素>元素$('#s_kw_wrap>input')//元素 元素$('#form input')//元素+元素，了解即可$('.soutu-btn+input')//元素1~元素2，了解即可$('.soutu-btn~i')

复制代码

css 顺序关系

//:nth-child(n)$('#form>input:nth-child(2)')//:nth-of-type(n)$('#form>input:nth-of-type(1)')

复制代码

$(‘#ember15>ul>li:nth-child(2)’)

复制代码

找冒号之前的这个 li 的爸爸的第几个孩子，找的是父级 ul 的第几个孩子，第几个 li 孩子

多做了一层根据标签分类的方式，首先指定标签，在通过 nth-of-type 指定同个标签里面的第几个元素

css 语法总结

基本语法
关系语法
顺序语法

原文链接：https://ceshiren.com/t/topic/24866

发布于: 刚刚阅读数: 3

原文链接:【http://xie.infoq.cn/article/55827e5460997baa56ba39907】。文章转载请联系作者。

测试人

关注

专注于软件测试开发 2022-08-29 加入

霍格沃兹测试开发学社，测试人社区：https://ceshiren.com/t/topic/22284

发布

暂无评论

创作场景

软件测试 / 测试开发丨 Web 自动化测试 - 高级定位 CSS

获取更多相关知识

目录

css 选择器概念

css 定位场景

css 相对定位的优点

css 定位的调试方法

css 基础语法

css 关系定位

css 顺序关系

css 语法总结

测试人

评论