Web自动化 -- 高级定位-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基础语法

类和ID是需要写的是具体值！

类型	表达式
标签	标签名 例如<img>
类	.class属性值
ID	#id属性值
属性	[属性名='属性值']

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

 如果类名有空格 不能直接复制查找,需将空格改 . 

例如

class="icon btn-flat"

需改成搜索

$("icon.btn-flat")

 

css关系定位

父子和后代关系需要掌握，其他了解

 

类型	格式
并集	元素,元素
邻近兄弟（了解即可）	元素+元素
兄弟（了解即可）	元素1~元素2
父子	元素>元素
后代	元素 元素

//在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)  这个是找爸爸的第n个孩子，在这里就是值找form>input的爸爸的第2个孩子
$('#form>input:nth-child(2)')
//:nth-of-type(n)  下面例子是找form孩子为input类型的第一个孩子
$('#form>input:nth-of-type(1)')