Web自动化必备：XPath 和 CSS Selector 定位详解

最新推荐文章于 2025-06-24 21:49:55 发布
最新推荐文章于 2025-06-24 21:49:55 发布
阅读量128 收藏
点赞数
CC 4.0 BY-SA版权
分类专栏： 自动化和爬虫与逆向教程 文章标签： 前端 自动化 css web自动化 xpath css选择器定位 自动化测试
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/weixin_41961749/article/details/148199062

Web自动化必备：XPath 和 CSS Selector 定位详解

#XPath #CSSSelector #自动化测试 #Selenium #前端开发 #DOM定位

前段时间在做自动化测试时，遇到了一个很尴尬的问题：同一个按钮，在我的 CSS Selector 里始终定位不到，但用 XPath 却能轻松点到……我一度以为 CSS Selector 更快更优雅，结果这次直接被打脸。

所以我决定系统复盘一下 XPath 和 CSS Selector 的所有定位方式，正好也整理一份总结给大家。这篇文章适合自动化测试工程师和前端开发者查阅参考，知识点非常全，收藏不亏！

在这里插入图片描述

一、Xpath 和 CSS Selector 简介

什么是 CSS Selector？

CSS Selector（选择器）原本用于给页面元素应用样式，但也正因为它能精准选择 DOM 元素，所以前端和测试都可以拿来当作“定位工具”用。

比如：

div > a<
了解本专栏 订阅专栏 解锁全文
04-css selector定位元素
学习&记录
04-25 3695
如上图所示，要定位的是input这个标签，它的父元素有属性：id=s_kw_wrap，因此可以很方便的定位到它的父元素。要是它的父元素也无法直接定位到，就依次向上找它父元素的父元素（爷爷元素），它的爷爷元素有属性：id=form，因此可以很方便的定位到它的爷爷元素。以上是css selector定位元素的语法，css selector具有强大的功能，即可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。说明：根据元素的class属性进行定位，前提是该元素有class属性。
【Web自动化测试】Selenium三大元素定位方法详解：By ID、XPath、CSS Selector及其应用策略了文档的核心内容
05-29
内容概要：本文详细介绍了Selenium自动化测试中常用的三种元素定位方法：By ID、XPath、CSS Selector。首先，文中对环境进行了简要准备介绍，然后深入讲解了每种定位方法的特点、适用场景及代码实战示例。其中，By ID定位具有速度快、唯一性强的特点，适用于带有固定ID的静态页面元素；XPath定位灵活性高，支持复杂路径选择，适合无唯一属性或动态元素定位；CSS Selector定位语法简洁，适合基于类名或属性组合进行定位。文章还提供了元素定位策略流程图，指导读者根据实际情况选择合适的定位方式，并针对常见问题如动态元素处理、定位失败等给出了避坑指南和最佳实践。最后以表格形式对比了三种定位方法的速度、维护成本及适用场景，推荐优先使用ID和CSS Selector定位，复杂场景下用XPath补充。; 适合人群：从事Web自动化测试工作的初学者或有一定经验的测试工程师。; 使用场景及目标：①掌握Selenium中三种主要元素定位技术的具体应用；②学会根据页面元素特性选择最优的定位策略；③解决实际操作过程中遇到的元素定位难题。; 阅读建议：阅读时应结合提供的代码示例和流程图，多做练习以加深理解，同时注意文中提到的最佳实践和避坑技巧，对于不确定的地方可以尝试修改代码来观察效果。
Web自动化测试：xpath & CSS Selector定位
测试开发小记
12-25 4898
Xpath 和 CSS Selector简介 CSS Selector CSS Selector和Xpath都可以用来表示XML文档中的位置。CSS (Cascading Style Sheets)是一种样式表语言，是所有浏览器内置的，用于描述以HTML或XML编写的文档的外观和样式。CSS Selector用于选择样式化的元素，所以理论上前端人员可以定位 DOM 节点并设置样式，那么对于测试人员这些元素也可以定位到。 XPath XPath是XML路径语言，是一种查询语言，使用路径表达式浏览XML文档中的
Selenium定位元素的方法css和xpath的区别
最新发布
HUA1211的博客
06-24 367
selenium是一种自动化测试工具，它可以通过不同的定位方式来识别网页上的元素，如id、name、class、tag、link text、partial link text、css和xpath。xpath还可以通过层级关系来定位，如//div[@id=‘china’]/p表示选择div元素下id为china的子元素下的所有p元素。xpath也可以通过标签和属性的组合来定位，如input[@id=‘kw’]表示选择input标签且id为kw的元素。，免费获取软件测试全套资料，资料在手，涨薪更快。
XPATH 轴
weixin_30556959的博客
02-27 222
轴名称结果 ancestor 选取当前节点的所有先辈（父、祖父等）。 ancestor-or-self 选取当前节点的所有先辈（父、祖父等）以及当前节点本身。 attribute 选取当前节点的所有属性。 child 选取当前节点的所有子元素。 descendant 选取当前节点的所有后代元素（子、孙等）。 descenda...
自动化测试元素定位-CssSelector常用定位方式总结
u013976938的专栏
03-04 2568
CSS选择器的常见语法： 1. 根据 标签定位 tagName(定位的是一组，多个元素） e.g：find_element_by_cssSelector("div") 2. 根据 id属性定位(注意id使用#表示） e.g: find_element_by_cssSelector("#eleid") e.g: find_element_by_cssSelector("div#eleid") 3. 根据className属性定位（注意class属性使用.) e.g: find_element_.
Selenium-css_selector详解
热门推荐
夜*星的博客
01-09 2万+
css_selector作为我们比较常用的一种元素定位方法，总结了以下一些方法和要点： 1. 右键直接copy css_selector的方法 2. 如果元素某个属性是唯一的——那么直接在该属性两边加上中括号，就可以定位该元素。 　　例：<input value="1"> 　　应用：driver.find_element(By.CSS_SELECTOR, '[value="1"]') 3. css可以用多个属性组合的方式定位一个元素 　　例：<input class="a b
css selector 元素定位
qq_20878673的博客
05-29 4458
作为一种具有强大定位功能的元素定位方法，css selector可根据元素任意属性进行定位，又可根据元素位置进行定位，是定位元素的最终解决办法之一。CSS（Cascading Style Sheets）是一种语言，他用来描述HTML和XML文档的表现，CSS使用选择器来为页面元素绑定属性。这些选择器可以被Selenium用作另外的定位策略。CSS可以较为灵活的选择空间的任意属性，一般情况下定位速度比XPth快，CSS选择器常见语法如表所示.CSS选择器的常见语法选择器例子描述.class。
Selector提取数据1：XPath选择器
OneFine的技术博客
02-02 5332
scrapy-xpath选择器
Selenium元素定位：Xpath与CSSselector详解
"selenium元素定位主要涉及两种方法：Xpath和CSSselector，这些技术常用于自动化测试中。本文将简要介绍这两种定位方法，并通过示例进行解释。" 在自动化测试领域，Selenium是一个广泛使用的工具，它允许我们模拟...
如何在Selenium中使用Xpath和CSSselector进行元素定位？请提供实际操作的对比分析。
11-04
在进行Selenium自动化测试时，元素定位是关键步骤，Xpath和CSSselector是两种常用的定位技术。为了深入理解并实践这两种技术，你可以参考以下资源：《Selenium元素定位：Xpath与CSSselector详解》。 参考资源链接：...
Python selenium之css_selector定位
longdrake的专栏
11-16 2241
Python selenium之css_selector定位
快捷查询方式--- selector:选择器/ XPath
z12397_的博客
08-05 611
快捷查询方式： 1. selector:选择器 * 使用的方法：Elements select​(String cssQuery) * 语法：参考Selector类中定义的语法 2. XPath：XPath即为XML路径语言，它是一种用来确定XML（标准通用标记语言的子集）文档中某部分位置的语言 * 使用Jsoup的Xpath需要额外导入jar包。 * 查询w3cs...
css selector
dailittledragon的博客
02-25 563
掌握CSS选择器可大幅提升自动化脚本的‌。‌精准定位元素，语法简洁高效。若属性值含特殊符号（如。
selenium：css_selector定位详解
三丰的博客
11-03 5108
selenium：css_selector定位详解 selenium：css_selector定位详解（css selector和xpath的比较） 来源：https://www.cnblogs.com/haifeima/p/10138154.html 目录 selenium使用css selector和xpath的比较 selenium提供的定位方式（常用） 推荐的定位方式的优先级 针对css selector和xpath的优先级做一个简单的说明 定位元素的注意事项（划重点
Web元素定位之CSS Selector
义甬君的技术博客
02-28 1万+
XPath与CSS Selector的差别上一篇文章中总结了web自动化测试中用xpath来进行元素定位的方法，那么CSS Selector又是什么鬼？ 其实，对于使用者来讲，哪个用的习惯就选哪个。总的来说，XPath更强大，而CSS选择器通常语法比较简洁，运行速度更快些。 Target CSS 3 XPath 所有元素 * //* 所有的P元素 p //p
4.Xpath 、css定位
liufuren620的博客
12-04 154
安装Xpath： 组件中添加： Xpath：XML path简称，XML的实现 XML：一种标记语言，配置、数据存储功能 Xpath策略： 1.路径： 相对：当前的目录、 绝对：包含跟目录 2.元素 3.层级与属性结合 4.属性与逻辑结合 .find_element_by_x...
UI自动化常用的定位方式（包含xpath和css对比）
adorable_的博客
05-08 1923
（1） id 说明：基于元素的id属性定位 前提：元素必须有id属性 方法：driver.find_element_by_id() 特性：一般情况下，在一个页面中，id属性值是唯一 （2）name 说明：基于元素的name属性定位 前提：元素必须有name属性 方法：driver.find_element_by_name() 特性：一般情况下，在一个页面中，name属性值是可以重复的 （3） class 说明：基于元素的class属性定位 前提：元素必须有class属性 方法：driver.fin
css selector 和xpath定位的用法
qq_39837491的博客
02-18 655
css selector的用法 答案： $('[class="treeview-menu"] li:nth-child(1)') 分析思路： 1.想找到上面元素的定位首先我们找到资讯列表的父元素class=treeview-menu 2.然后空格的意思是找到任意的子元素中包含li标签的元素（可跨级 selector中的空格相当于xpath中的//的意思） 3.nth-child(1)是选取第几个li标签，类似于xpath中的[] 如果想选取最后一个，应是:nth-last-child(1) xpath
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

代码简单说

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付：¥1
获取中
扫码支付

您的余额不足，请更换扫码支付或充值

打赏作者

实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值