Web自动化测试-高级定位CSS

目录

• css 选择器概念
• css 相对定位使用场景
• css 语法与实战

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 语法总结

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

 

最后：下面是配套学习资料，对于做【软件测试】的朋友来说应该是最全面最完整的备战仓库，这个仓库也陪伴我走过了最艰难的路程，希望也能帮助到你！【100%无套路免费领取】

软件测试面试小程序

被百万人刷爆的软件测试题库！！！谁用谁知道！！！全网最全面试刷题小程序，手机就可以刷题，地铁上公交上，卷起来！

涵盖以下这些面试题板块：

1、软件测试基础理论 ，2、web,app，接口功能测试 ，3、网络 ，4、数据库 ，5、linux

6、web,app，接口自动化 ，7、性能测试 ，8、编程基础，9、hr面试题 ，10、开放性测试题，11、安全测试，12、计算机基础

  全套资料获取方式：点击下方小卡片自行领取即可