selenium webdriver 页面css和xpath定位

小鱼儿 2022-05-29 13:15 212阅读 0赞

对于html来说，不管用什么浏览器打开，他的架构是不变的，所以对于编写自动化测试程序来说，基于什么浏览器开发，差异不大，所以这里推荐使用chrome 65或以后版本浏览器，之所以推荐这个浏览器，是因为它可以不用安装任何插件，就可以很方便的提供定位相关的功能。

chrome浏览器可以用F12调出调试窗口，用ctrl + F可以调出选择器和xpath搜索输入框，在搜索时可以显示搜索到结果的个数，如果搜索的结果个数比较多，说明对应的选择器或者xpath有问题，因为结果不唯一，除非希望保存的结果是一个集合。

## 一、CSS选择器定位 ##

### 1.使用标签名查找元素 ###

这个比较简单，但是基本上不会用。也就是说如果一个页面中该类型的标签只有一个，那么只要定位该标签就好了。比如一个页面中只有一个input标签，那么只要将这个个input用于定位就行了

### 2. 使用ID选择器查找元素 ###

缺点：

a. 如果页面的ID不是惟一的，或者会动态变化，不太适合使用这个选择器

b. 如果ID是惟一的，但是对应元素的其他属性是变化的，比如name，text等会变化，也不太适合使用多条件判断

需要注意的是，在元素定位过程中，如果定位的元素不是惟一的，都是会出错的，除非查找的是多个元素组成的list

语法： tag\[attribute='value'\]

tag就是html中的标签，可以是input，p, a等等

attribute标识属性，对应css选择器来说，它的属性是id或者class

value就是属性的值，一般用单引号包含

比如需要定位这一行，可以使用：

\#bdSug\_1521883224738

div\[id='bdSug\_1521883224738'\]

div\#bdSug\_1521883224738

一般来说，一个DOM的ID都是惟一的，但是如果多个不同的标签使用了相同的ID，那么可以在定位的时候也指定标签，以保持定位惟一，这里需要注意的是，虽然在匹配id的时候可以不用完全匹配，但是在写代码的时候尽量完整

### 3. 使用类选择器查找元素 ###

ID用点标识，class用\#标识

(1)完全匹配

\#myCarousel 或 div\[id='myCarousel'\] 或 div\#myCarousel

.slide 或 div\[class='slide'\] 或 div.slide

div\[class='carousel-item csdn-tracking-statistics'\]

这里需要注意的是，class这种写法并不支持部分匹配，如果上式写成div\[class='carousel-item'\]将会定位失败，即使少个尾部空格也不行。

这种写法要求写出标签中的所有class完整值

(2)部分匹配

那如果一个位置上包含多个class属性的时候应该怎么定位呢？可以使用追加属性的方法。

.carousel-item.csdn-tracking-statistics

这表示满足第一个class的同时满足第二个class属性的值。如果这还不能惟一定位，那就只好找相对定位的方法了

这种写法要求写出标签中的部分class完整值

(3)通配

上面两种匹配方式都要求用户在匹配class的时候使用完整的class属性值，但是通配可以做到更灵活的匹配

^表示文本开头

$表示文本结尾

\*表示任意文本

语法： tag\[attribute<wildcard>='value'\] 其中wildcard表示通配符

如果要匹配这三行可以用 div\[class^='carousel'\]

如果要匹配后面两行用 div\[class$='statistics'\]

如果要匹配其中包含inner的行，用 div\[class\*='inner'\]

上面介绍了使用id和class进行定位，其实这并不是最厉害的，厉害的是这两个属性的定位方法可以拓展到其他属性上，比如：

可以使用 link\[rel^='alt'\] 进行定位

使用 mata\[name$='agent'\] 定位

使用 a\[title='首页'\] 定位

里面的img使用 img\[title='慕课网'\] 定位

### 4. 用CSS定位子节点 ###

father>son\[attribute='value'\]>grandson\[attribute='value'\]

<div class="carousel-item csdn-tracking-statistics  next left" data-mod="popu_465" data-dsm="post">
    			<a href="http://blog.csdn.net/dqcfkyqdxym3f8rb0/article/details/79643977" target="_blank">
    				<img src="//csdnimg.cn/feed/20180321/6c98086f1d03ee4f653afaab114f163e.jpg">
    			</a>
    			<a href="http://blog.csdn.net/dqcfkyqdxym3f8rb0/article/details/79643977" target="_blank">
    				<div class="carousel-caption">
    					机器学习大神迈克尔 · 乔丹：我讨厌将机器学习称为AI				</div>
    			</a>
    			<a href="http://blog.csdn.net/dqcfkyqdxym3f8rb0/article/details/79643977" target="_blank" style="display:block;">
    				<div class="cover"></div>
    			</a>
    		</div>

定位子节点也可以叫相对定位，也就是说在用CSS定位时，有些元素不能通过一次性直接完成定位，需要通过定位其惟一的父节点，然后再相对定位到子节点上。其中比较常见的有table，list以及一些并列的元素。

比如对于上面这些<a>标签是并列的，如果要定位第二个<a>标签可以用 div > a > .carousel-caption

## 二、XPATH定位 ##

一般来说上面的定位方法不够用的时候，就会拿出终极武器xpath进行定位了，因为xpath定位并不需要它的属性是惟一的，或者是固定不变的，不管在哪里，它总能找到它。

### 1. 基本语法 ###

语法： //tag\[@attribute='vale'\] 有没有发现，xpath定位的时候，属性的前面多一个@

xpath的语法就不介绍了，可以网上查查，这里主要说明几个：

/ 表示父节点的下一个节点

// 表示父节点的下面某个节点

\* 用于通配标签名，切记不要用来通配节点路径

div > p > li > a > span

p > li

h > a

比如有这样一个html层级嵌套结构，div下面有三个p标签， 如果父节点是 div，那么 div/ 后面接的只能是 p或者h标签， div// 后面接的可以是除div意外的任意一个标签。以下这些写法是对的：

//div/p/li

//div/h/a

//div//li//span

这种写法是错的： //div/a //div/p/span

### 2. 用text和contains构建xpath ###

语法： 完全匹配 //tag\[text()='value'\]

部分匹配 //tag\[contains(attribute, 'value')\]

比如要定位text为“发现”这个标签，可以用 //ul//a\[text()='发现'\] 进行定位, 但是text的内容必须完整的写过来

当然也可以使用部分匹配： //a\[contains(text(), '免费')\] 用于匹配在a标签种text带有‘免费’的位置

也可以判断其他属性的值是否包含关键字：

//a\[contains(@class, 'program')\] //a\[contains(@href, 'article')\]

不仅如此，它还支持多条件合并：

<a href="/wenda/detail/383123" target="_blank" class="wenda-tit">【有奖问答】与大咖交流前端JS与框架开发，免费赢取前端图书（11.28-12.4）</a>

它可以用多个条件进行定位： //a\[contains(@href, 'detail') and contains(@class, 'tit') and contains(text(), '大咖')\]

## 3. 用starts-with构建xpath    ##

语法： //tag\[starts-with(attribute, 'value')\] 查找属性值以value开头的位置

<a href="/wenda/detail/383123" target="_blank" class="wenda-tit">【有奖问答】与大咖交流前端JS与框架开发，免费赢取前端图书（11.28-12.4）</a>

//a\[starts-with(text(), '【有奖问答】')\]

//a\[starts-with(@class, 'wenda')\]

//a\[starts-with(@href, '/wenda')\]

### 4. 查找父节点、前面平级节点、后面平级节点    ###

父节点 = //parent::<tag>

前面平级节点 = //preceding-sibling::<tag>

后面平级节点 = //following-sibling::<tag>

父节点：

ul\_xpath = "//a\[text()= '职业路径'\]//parent::li//parent::ul"

父节点应该会比较好理解，但是前平级节点和后平级节点可能会不好理解，它的意思就是，基于当前节点，往前的平级节点，或者往后的平级节点。

前面平级节点：

第一个和第二个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//preceding-sibling::li"

第一个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//preceding-sibling::li\[1\]"

第二个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//preceding-sibling::li\[2\]"

后面平级节点：

第一个和第二个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//following-sibling::li"

第四个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//following-sibling::li\[1\]"

第五个<li>标签 = "//a\[text()= '职业路径'\]//parent::li//following-sibling::li\[2\]"

关于定位的，到这里基本上就够了，这里总结一下吧，在定位的时候：

如果id是惟一的，用id定位最快；

如果name或其他属性是惟一的，则用其他属性；

如果上面不行，则用CSS的组合选择器定位；

最终没招了，用xpath吧！！

但是，这也不是绝对的，具体问题具体分析吧！在我看来，只要哪些定位方式受html变动影响比较小的，或者即使变了也不会影响定位的，这种定位方式是优先选择的，对于自动化测试，并不要求代码能执行多快，应该多保证这些代码怎么能够提高通用性、拓展性以及项目间的可移植性。

selenium webdriver 页面css和xpath定位

发表评论取消回复

还没有评论，来说两句吧...

相关阅读

相关 Selenium：WebDriver简介及元素定位

相关【爬虫】元素定位（xpath、css）

相关 Selenium2+python自动化-xpath定位

相关 selenium各种类型xpath元素定位汇总

相关 Selenium Webdriver

相关【WebDriver】selenium使用CSS定位页面元素

相关 selenium webdriver 页面css和xpath定位

相关 selenium元素定位-css定位

相关 selenium的xpath定位

相关在Selenium Webdriver中使用XPath Contains、Sibling函数定位