自动化测试——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)')

---