Web自动化测试：xpath & CSS Selector定位

分类：Selenium作者：编程之家用户

Xpath 和 CSS Selector简介

CSS Selector

CSS Selector和Xpath都可以用来表示XML文档中的位置。CSS (Cascading Style Sheets)是一种样式表语言，是所有浏览器内置的，用于描述以HTML或XML编写的文档的外观和样式。CSS Selector用于选择样式化的元素，所以理论上前端人员可以定位 DOM 节点并设置样式，那么对于测试人员这些元素也可以定位到。

XPath

XPath是XML路径语言，是一种查询语言，使用路径表达式浏览XML文档中的元素和属性。XPath标准语法如下：

Xpath=//tagname[@attribute='value']

  • // : 选择当前节点
  • Tagname: 节点标签名
  • @: 选择属性
  • Attribute: 节点属性名
  • Value: 属性值

XPath有绝对定位和相对定位两种，绝对定位使用绝对路径，缺点是路径太长，只要一个节点变动就无法定位。以单斜杠（/）开始，表示从根节点开始选择元素。下面是页面https://www.baidu.com/上“百度一下”按钮的绝对路径：

/html/body/div[1]/div[1]/div[5]/div[1]/div/form/span[2]/input

相对路径以双斜杠（//）开始，可以从HTML文档的任何位置开始，“百度一下”按钮的相对路径可以表示如下

//input[@id="su"]

Xpath VS. CSS Selector

CSS Selector和Xpath几乎可以定位到所有Web元素（HTML和XML文档元素，Android应用的层级结构使用xml编写），它们的主要差异包括：

  1. XPath通过遍历的方式从XML文档中选择节点，CSS Selector是一种匹配模式定位，因此CSS Selector比 XPath 执行效率更高。
  2. Xpath可以通过文本来定位，而CSS Selector不能；
  3. Xpath可以通过子节点来定位父节点，CSS Selector是前向的，不能利用子节点定位父节点。
  4. CSS Selector语法相比Xpath更加简洁

Xpath 和 CSS Selector元素定位

接下来对比一下这两种方法的语法差异，节点的定义我们规定如下：

儿子元素定位

xpath使用‘/’，CSS Selector使用‘>’

Xpath CSS Selector
语法 //element/element element>element
示例 //div/a div > a
描述 选择父元素为 <div> 元素的所有 <a> 元素。

还可以使用XPath Axes（轴）child 来定位子元素

XPATH:

//div/child::*   # 选择父元素为 <div> 元素的所有儿子元素
//div/child::a  # 选择父元素为 <div> 元素的所有<a>元素

CSS Selector:

div > a:nth-child(2) # 选择父元素为 <div> 元素的第二个<a>元素
div > a:nth-last-child(2) # 选择父元素为 <div> 元素的倒数第二个<a>元素
div > a:last-child # 选择父元素为 <div> 元素的最后一个<a>元素
div > a:first-child # 选择父元素为 <div> 元素的第一个<a>元素

子孙元素定位

xpath使用‘//’，CSS Selector使用空格

Xpath CSS Selector
语法 //element//element element element
示例 //div//a div a
描述 选择 <div> 元素内部的所有 <a> 元素。

还可以使用XPath Axes（轴）descendant 来定位子孙元素

XPATH:

//div/descendant::*   # 选择祖先元素为 <div> 元素的所有子孙元素
//div/descendant::a  # 选择祖先元素为 <div> 元素的所有<a>元素   

CSS Selector使用空格定位子孙元素后进行选择:

div a:nth-child(2) # 选择祖先元素为 <div> 元素的第二个<a>元素
div a:nth-last-child(2) # 选择祖先元素为 <div> 元素的倒数第二个<a>元素
div a:last-child # 选择祖先元素为 <div> 元素的最后一个<a>元素
div a:first-child # 选择祖先元素为 <div> 元素的第一个<a>元素

邻居节点定位

在同一个父节点下，定位下一个相邻节点

Xpath CSS Selector
语法 //element/following-sibling::element element + element
示例 //div/following-sibling::a div + a
描述 选择紧接在 <div> 元素之后的所有 <p> 元素。

Xpath可以定位当前节点前面的邻居节点，CSS Selector不能

//*element/preceding-sibling::element

父元素、祖先元素定位

CSS Selector是前向的，不能利用子节点定位父节点

方法 描述
.. 一个点”.“表示选取当前节点，两个点”..“表示选取当前节点的父节点。
ancestor 当前节点祖先元素（父、祖父...）
parent 当前节点的父节点

Id定位

Xpath CSS Selector
语法 //*[@id='example'] #example
示例 //*[@id='uesrname'] #uesrname
描述 选择id='uesrname'的元素。

Class定位

Xpath CSS Selector
语法 //*[@class='example'] .example
示例 //*[@class='uesrname'] .uesrname
描述 选择class='uesrname'的元素。

属性值定位

没有Id和Class的情况下，可以使用其它属性值定位，比如name、type等。

Xpath CSS Selector
语法 //*[@attribute='value'] [attribute=value]
示例 //*[@name='uesrname'] [name='username']
描述 选择属性值name='uesrname'的元素。

xpath可以使用 ‘and’ 或者 ‘or’ 连接两个属性：

XPATH：

//input[@name='login'and @type='submit']

CSS Selector：

input[name='login'][type='submit']

CSS Selector可以进行子字符串匹配进行定位:

^= 匹配前缀

[id^='id_prefix_'] # id前缀为‘id_prefix_’的元素

$= 匹配后缀

[id$='_id_sufix'] # id后缀为‘_id_sufix’的元素

*= 包含某个字符串

[id*='id_pattern'] # id包含‘id_pattern’的元素

Xpath Contains()方法

Contains()方法也许通过部分文本来定位查找元素，CSS Selector不支持这种用法。

Xpath = //*[contains(@type,'partial_text')]
Xpath = //*[contains(@name,'partial_text')]
Xpath = //*[contains(@class,'partial_text')]
Xpath = //*[contains(@id,'partial_text')]
Xpath = //*[contains(text(),'partial_text')]
Xpath = //*[contains(@href,'partial_text')]

Xpath Starts-with()方法

查找属性值以特定文本开始的元素

Xpath = //*[starts-with(@type,'start_text')]
Xpath = //*[starts-with(@name,'start_text')]
Xpath = //*[starts-with(@class,'start_text')]
Xpath = //*[starts-with(@id,'start_text')]
Xpath = //*[starts-with(text(),'start_text')]
Xpath = //*[starts-with(@href,'start_text')]

Xpath Text()方法

Text()方法基于web元素文本来进行定位

Xpath = //*[text()='text_value']

实例

子孙元素定位

百度一下”text“，点击”资讯“

Xpath：

//*[@id="s_tab"]/descendant::a[1]
//*[@id="s_tab"]/child::*[1]/a[1]

CSS selector：

#s_tab a:nth-child(2)
#s_tab a:nth-last-child(9)

python测试代码：

def test_css(self):
    self.driver.get("https://www.baidu.com/")
    self.driver.find_element_by_id("kw").send_keys("test")        
    self.driver.find_element_by_id("su").click()        
    # element = self.driver.find_element_by_css_selector("#s_tab a:nth-child(2)")
    # element = self.driver.find_element_by_css_selector('#s_tab a:nth-last-child(9)')
    element = self.driver.find_element_by_xpath('//*[@id="s_tab"]/descendant::a[1]')        
    element.click()
    sleep(2)

邻居节点定位

点击”资讯“下一个邻居节点”视频“

xpath

//*[@id="s_tab"]/descendant::a[1]/following-sibling::a[1]
//*[@id="s_tab"]/child::*[1]/a[1]/following-sibling::a[1]

CSS selector：

#s_tab a:nth-child(2) + a
#s_tab a:nth-last-child(9) + a

python测试代码：

def test_css2(self):   
    self.driver.get("https://www.baidu.com/")
    self.driver.find_element_by_id("kw").send_keys("test")
    self.driver.find_element_by_id("su").click()   
    # element = self.driver.find_element_by_css_selector('#s_tab a:nth-child(2) + a')   
    element = self.driver.find_element_by_xpath('//*@id="s_tab"]/descendant::a[1]/following-sibling::a[1]')   
    element.click()   
    sleep(2)

Xpath Contains()、Starts-with()、Text()定位

测试页面：http://sahitest.com/demo/linkTest.htm

点击”linkByContent“

xpath语法：

//*[contains(@href,"Content")]
//*[starts-with(@href,"linkByC")]
//*[contains(text(),"Content")]
//*[text()="linkByContent"]

python测试代码：

def test_css2(self):
    self.driver.get("http://sahitest.com/demo/linkTest.htm")
    # element = self.driver.find_element_by_xpath('//*[contains(@href,"Content")]')
    # element = self.driver.find_element_by_xpath('//*[starts-with(@href,"linkByC")]')
    # element = self.driver.find_element_by_xpath('//*[contains(text(),"Content")]')
    element = self.driver.find_element_by_xpath('//*[text()="linkByContent"]')
    element.click()

总结

Xpath几乎可以定位到所以Web元素，CSS Selector效率更高，且代码简洁，但有些元素可能无法定位，特别是需要通过子元素来定位的父元素，或者需要通过文本定位的元素。

在实际使用中，按照自己的实际情况来选择即可，CSS Selector理论上执行效率更高，但他们的性能差异不是很大，在几毫秒或者几十毫秒级别。这两种定位方法除了本文介绍的以外，还有更多其它高级语法，可以参考官方文档。

--THE END--

文章标题：Web自动化测试：xpath & CSS Selector定位
本文作者：hiyo
本文链接：https://hiyong.gitee.io/posts/selenium-xpath-and-CSS-Selector-locator/
欢迎关注公众号:「测试开发小记」及时接收最新技术文章！

版权声明：本文内容由互联网用户自发贡献，该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容， 请发送邮件至 dio@foxmail.com 举报，一经查实，本站将立刻删除。

相关推荐

selenium+python 处理只读日期控件的2种方法
转载地址：https://www.cnblogs.com/mini-monkey/p/12104821.html前言有时候测试过程中会遇到日期控件场景，这时候需要特殊处理，下文以12306网站为例1.处理方式通常是通过js去除只读属性(2种方法)，然后通过send_keys重新写值fromtimeimportsleepdriver=webdriver.Chrome()dr
selenium使用save_screenshot()进行页面截图
web自动化测试过程中页面截图相对比较简单，可以直接使用selenium自带的方法save_screenshot()。示例：对百度首页整个页面进行截图。#coding=utf-8fromseleniumimportwebdriverd=webdriver.Chrome()d.get('https://www.baidu.com/')#对页面进行截图d.save_screensh
【C# - 爬虫】使用Selenium实现爬虫，获取近七天天气信息包含完整代码
目录前言一、Selenium简介二、浏览器驱动1.浏览器驱动参考2.Windows下载Chrome驱动三、代码实现1.新建控制台项目WeatherWebCrawler2.选择.NET6.03.安装NuGet包4.将下载好的驱动放到项目生成目录下5.编写代码四、完整代码总结前言提示：爬虫本身并不违法，所有爬虫都
selenium - python - iframe 处理
一、iframe的含义：iframe是HTML中框架的一种形式，在对界面添加嵌套另一个页面时可以使用iframe。做ui自动化的时候，元素定位不到的一个很重要原因就是页面存在iframe。Iframe可以比喻成一道门，打开这道门才能进入屋子里。二、怎么判断页面上存在iframe？谷歌浏览器F12（或者右
Selenium 4 有哪些不一样？
转载请注明出处❤️作者：测试蔡坨坨原文链接：caituotuo.top/d59b986c.html你好，我是测试蔡坨坨。众所周知，Selenium在2021年10月13号发布了Selenium4，目前最新的版本应该是Selenium4.4.0。以前一直用的Selenium3，那么Selenium4相对Selenium3对我们做自动化测试来说有哪些需要注意的
selenium使用方法
'''##**认识selenium**​**下载：pipinstallselenium**​官方文档：https://selenium-python.readthedocs.io/###什么是selenium？​selenium是一套完整的web应用程序测试系统，包含了测试的录制（seleniumIDE）,编写及运行（SeleniumRemoteControl）和测试的并行处理（SeleniumGr
selenium
importtimefromselenium.webdriver.support.waitimportWebDriverWaitfromseleniumimportwebdriverfromselenium.webdriver.common.byimportBydriver=webdriver.Chrome(r"D:\百分浏览器\CentBrowser\Application\chromedriver.exe");driver.get("htt
selenium - 鼠标悬停操作
前言：当鼠标悬停在隐藏文本内容上时，显示所有内容。场景案例：百度首页，要选择‘高级搜索’，先得把鼠标放在‘设置上’F12-在页面中搜索‘高级搜索’，找到‘高级搜索’文本，鼠标放到‘设置’上，display的值变为block；鼠标不放上去之前是none，即不可见元素。隐藏的元素操作，会出现报
Appium中的TouchAchtion 与selenium ActionChains的区别
selenium中的ActionChains初始化时传入driverActionChains中存储的所有行为click(on_element=None)——单击鼠标左键click_and_hold(on_element=None)——点击鼠标左键，不松开context_click(on_element=None)——点击鼠标右键double_click(on_element=None)——双击鼠标
Selenium 操作表单
介绍常见的表单元素 Input，button，checkbox，select。表单使用表单标签（<form>）定义。例如：<form><input/></form> 保存HTML到本地进行操作<!DOCTYPEhtml><htmllang="en"><head><metacharset="UTF-8"><title&g
一、使用Expected_conditions判断元素是否可见-6
1、处理定位报错的问题判断该元素存在，再输入。判断该元素不存在，抛出异常。依然是通过EC这个模块。2、判断是否存在邮箱地址，存在，再操作。就不用担心元素不存在，程序报错。3、判断传入的元素是否可见，是否在显示范围内。还是要先找元素但这样找，只能顺利的执行一次。fr
【web自动化】selenium根据浏览器版本下载对应的chromedriver
1、使用国内的镜像地址https:/egistry.npmmirror.com/binary.html?path=chromedriver/ 2、通过simulation模拟用户点击来下载（只贴出部分方法）#!/usr/bin/envpython#-*-coding:utf-8-*-importosimportplatformimportsignalimporttimeimportallureimport
selenium无法click的一个案例分享(2)
案例描述https://www.healthsmart.com.hk/hs-home/#!/link/home这个网页你手工打开的时候你会发现一直处于加载中，一定时间后才好。我们的需求是点击会员，弹出菜单，进行下一步操作，如果没有加载好是点不了的（业务特点）。我们来看看代码怎么写示例代码1：时间去哪里了fromselen
selenium unittest单元测试框架2
  
分析淘宝登陆对selenium爬虫的封杀方案，反爬虫机制的升级！
  分析了好几个小时淘宝的登陆，对其反爬虫方案有了点思路，先记录一下，后面会持续进行分析。当然想要玩更高级的Python爬虫首先你要把基础打牢，这里小编准备了一份Python爬虫入门资料，进群：700341555即可免费领取！  众所周知目前使用selenium打开浏览器访问淘宝，不管你是手动
selenium-确定找到的element唯一
在python+selenium中经常会遇到找到的元素不唯一，导致定位到的元素不是预期的或者定位不到元素解决方法：只要在页面进行确认找到的元素唯一后，再进行操作 页面确认方法：1、通过html中检索功能确认进入开发者模式：点击右上角三个点-->选则search进行查找或
【Scrapy框架中使用selenium获取动态数据案例】
引入       使用Scrapy框架爬取某些网站的数据时，往往会页面动态加载数据的情况。如果是直接使用Scrapy对其url发起请求，是绝对获取不到动态加载的数据的。但是通过观察我们会发现，通过浏览器对其url发起请求则会加载出对应的动态数据。那么，如果我们想要在Scrapy中获取
孤荷凌寒自学python第八十五天配置selenium并进行模拟浏览器操作1
孤荷凌寒自学python第八十五天配置selenium并进行模拟浏览器操作1 （完整学习过程屏幕记录视频地址在文末） 要模拟进行浏览器操作，只用requests是不行的，因此今天了解到有专门的解决方案：selenium模块及与火狐浏览器的配合使用。一、环境配置（一）、安装selenium模块pipinstallse
selenium-确认进入了预期页面
selenium确认进入了预期页面在自动化操作中，浏览器每次进入一个新的需要，都需要确认该页面是否打开或打开的页面是否是预期的页面需要进行确认页面后方可进行下一步操作确认页面有很多中方法，像笔者所在项目的中每个页面都有一个固定属性（ng-page=‘xxx’）来确认，所以确认页面的时候
selenium 自动化01
         
pythonJavaScriptjavaHTMLPHPreactjsC#AndroidCSSNode.jssqlrpython-3.xMysqLjQueryc++pandasFlutterangularIOSdjangolinuxswifttypescript路由器JSON路由器设置无线路由器h3c华三华三路由器设置华三路由器电脑软件教程arraysdocker软件图文教程Cvue.jslaravelspring-boot