心无旁骛_
心无旁骛_

CSS元素定位

Css的定位比较灵活，因为他它用到的更多的匹配符和规格。
下面主要通过举例来说明
具体可见w3school链接
【举例1】虫师文章中的一个例子，元素如下：

那么定位分别如下：

1.  id定位：    css=#kw1

2.  class定位：css=.s_ipt

3.  单个属性定位：css=[name=wd]        css=[type=text]     
css=[autocomplete=off]

4.  多个属性定位：css=[#form1 input[name=text]]

5.  父子定位：

css=span > input

css=form > span > input

6.  根据标签名定位：

css=input

【举例2】

image

想要定位到某个元素的话，首先应该考虑这个元素有没有唯一属性，例如id。

如果没有唯一属性的话，再考虑从这个元素的父元素、祖宗元素、隔壁元素中找到唯一属性，然后再定位到这个元素(参考)。

//通过有唯一属性的父元素，向下定位到目标元素。注意"空格"和">"的区别

css ="li[data-sku='13435315793'] .p-img>a"

这样一来，不管这个数据的位置如何改变，只要改商品的标志，即13435315793不变，测试用例都不需要额外的维护了。

【举例3】

CSS元素定位_第1张图片
image

2种定位方式

css=.footer-link .stop （class=footer-link元素内的所有class=stop的元素。如果stop只有1个的话，那么直接css=.stop也可以 ）

xpath=//a[text()="停止投放"]' 文本等于“停止投放”的所有链接a元素

对于有子元素的，可以使用元素：nth-child(n)表示：

image

css=#ershou .category-group a:nth-child(2)

CSS元素定位_第2张图片
image
CSS元素定位_第3张图片
image

【举例5】
定位元素原为