Day 2 如何用Chrome开发者工具查看元素和如何获取默认xpath和CSS

最新推荐文章于 2025-04-30 08:12:56 发布
最新推荐文章于 2025-04-30 08:12:56 发布
阅读量1.9k 收藏 5
点赞数 1
CC 4.0 BY-SA版权
分类专栏： 编程 测试 文章标签： python 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.youkuaiyun.com/LSMSMD0526/article/details/118945237
本文介绍了如何使用Chrome开发者工具查看页面元素，包括两种调出方式，并详细讲解了创建和验证XPath的方法。同时，文章还分享了获取默认XPath和CSS选择器的技巧，强调虽然默认定位不适用于自动化，但对于初学者理解定位很有帮助。

摘要生成于 C知道 ，由 DeepSeek-R1 满血版支持， 前往体验 >

如何用Chrome开发者工具查看元素

方式一、打开更多工具—开发者工具，调出开发者模式（窗口位置可选），移动鼠标可高亮显示元素

在这里插入图片描述

方式二、高亮元素，右击选中检查调出开发者工具，会选中要查看的元素，那么如何创建xpath呢？如何查看创建的xpath有几个匹配节点呢？

1、点击DOM里任意一个地方，Ctrl+F调出文本框，可以只用字符串来搜索

在这里插入图片描述

2、举个栗子，在Elements写搜索框的xpath（有一个属性class，值是search-input）,输入//input[@class=‘search-input’]回车，显示匹配的节点数，元素高亮显示

在这里插入图片描述

3、控制台Console输入$x("//input[@class=‘search-input’]")回车，可以看到索引从0开始，长度为1，找到一个匹配的节点

最低0.47元/天 解锁文章

200万优质内容无限畅学
【Python爬虫】_01抓包工具和伪装UA
清平乐的技术专栏
11-03 2130
Python爬虫基础01–认识爬虫 一、爬虫概念 1.什么是爬虫？ ​ 程序猿：写程序，然后去互联网上抓取数据的过程 ​ 互联网：网，有好多的a链接组成的，网的节点就是每一个a链接 url（统一资源定位符） 2.哪些语言可以实现爬虫？ ​ （1）php，可以做，号称世界上最优美的语言，多进程、多线程支持的不好 ​ （2）java，也可以做爬虫，人家做的很好，最主要的竞争对手，代码臃肿，...
重新写了一个东南大学体育场馆的定时预约脚本，使用selenium和chromedriver实现，tesseract识别验证码...
banlingza6802的博客
09-07 2279
上次写的半成品用的是urllib库直接提交post表单，但是现在不可用了，主要是post请求的字段里，新添了几个不知道的值，而且密码采用的加密是ase128，我是懒的去实现。正好试一下selenium，selenium是一个很好的用于自动化测试的模块，可以直接调动浏览器，模拟人的输入点击等操作，而且非常简单易用，但是效率相对而言就低一些，因为很多操作要等页面元素加载出来才可以找到。这次不...
浏览器开发者模式获取页面元素
zw1_csdn的博客
04-13 6201
web开发中经常会借鉴体验较好或者合适的网站，可以直接拿过来用。这时通过浏览器开发者模式获取页面元素非常方便，一是能快速获取页面元素、二是能查看页面元素相对路径便于分类，下面以Google为例介绍 1、首先打开Google浏览器，点击键盘F12 2、打开目标网站，在开发者模式中选择“Sources”，二级模块选择“Page”，如下图 通过以上可以，一层层打开文件目录，获取文...
Chrome获取只出现几秒的提示信息（toast）的定位（xpath、css）的方法
幼儿园
04-08 4346
1、打开浏览器，访问页面，在出现提示信息的操作之前，按下F12，打开开发者工具 2、按下F1（或者点击右上角的三个点出来设置），打开设置页面 3、操作页面，让提示信息出现，然后马上勾选Debugger栏下的Disabled JavaScript 4、这个时候提示信息就不会消失了，该怎么处理就怎么处理 不知道怎么处理的话，可以参考这篇https://blog.youkuaiyun.com/...
Python - Xpath Helper（xpath辅助插件）
最新发布
MinggeQingchun的博客
04-30 2534
是一款免费的Chrome插件，专用于网页解析和爬虫辅助。它允许用户轻松获取网页数据的XPath，以便进行批量爬取。下载插件后，通过拖拽安装到Chrome浏览器，然后在网页上右键检查，复制XPath并输入到XPath Helper查询框，即可高亮显示对应元素。此外，插件还支持批量获取数据、链接和文本等功能，对于前端开发者和爬虫工程师来说非常实用。如下图所示，在QUERY输入框中写XPath代码，右侧文本框会显示查找到的xpath结果，在网页中也会高亮度显示xpath所在的位置。
通过谷歌浏览器的开发者工具F12查找元素的xpath与CSS地址
AZ_Canon的博客
11-27 8127
打开谷歌浏览器，按F12打开开发者工具 1.选择element元素 2.点下工具窗右上角的小箭头 3.点击要定位的元素，如图中的“关注”，点击后元素栏自然会用亮色突出该元素信息 4.右击这行信息 5.选择copy 6.选择copy xpath ...
怎么使用Uiautomatorviewer获取元素的xpath
0x8g1T9E-
06-24 9482
在学习和使用AndroidADT的时候，元素定位都会使用tools包下面自带工具uiautomatorviewer,但很多时候元素并没有text和id，只有class。但是，大家都知道class很多时候不是唯一属性，要通过class_Name()的方式来定位，返回的往往是第一个，这根本不是自己想要的。有些人会考虑使用driver.find_elements_by的这种方法来获取所有相同的class的对象，但这样用起来很麻烦，那怎么通过工具来获取xpath呢？ 如上图，根本找不到xpath,这里就.
使用selenium通过chromeF12的xpath以及css定位，但pycharm报错无法定位
qq_44136307的博客
12-07 737
使用selenium通过chromeF12的xpath以及css定位，但pycharm报错无法定位
【软件测试】selenium API讲解
耀的博客
05-09 3588
目录 一、第一个脚本 二、元素的定位 1，id 和name 定位 2，tag name 和class name 定位 3，CSS 定位 4，XPath 定位 5，link text定位 三、操作测试对象 1，鼠标点击与键盘输入 2，text 获取元素文本 3，打印信息 四、浏览器的操作 1，浏览器最大化 2，设置浏览器宽、高 3，操作浏览器的前进、后退 4，控制浏览器滚动条 五、键盘事件 1，键盘按键用法 2，键盘组合键用法 六、鼠标事件 1，定位一组元素 2，多
自动化测试工具 selenium 学习笔记
qq_41603622的博客
08-11 691
前言 最近学习了测试课程部分的自动化测试，第一次发现这玩意挺有趣的，用 python 语言编写自动化脚本，竟然可以直接来操作浏览器，彻底解放双手。这篇文章只是简单的总结了操作 API 一些常用操作，还请大佬们勿喷！！！ 介绍 selenium工具：自动化测试工具，UI测试工具。特点是轻量免费，支持多语言多平台，支持分布式 webdrive：是 selenium2 提供的一种用于操作浏览器的 api 接口，要操作那个浏览器，就要把那个浏览器的版本驱动放到 python 的安装路径的 Scripts里 一个
章节八、1-如何使用火狐开发者工具来查找元素
weixin_30378311的博客
04-03 1431
一、查找元素是使用selenium进行自动化的基础，我们只有找到元素才能在页面操作它。 二、Web应用页面上的元素不会因为浏览器种类的不同而产生差异，也就是说你可以在火狐或者谷歌上查找到的元素在ie等浏览器上都可以用。 三、如何使用火狐开发者工具来查看元素 1、首先安装火狐浏览器 2、打开浏览器，将鼠标移动到你需要定位的地方，列如：百度搜索文本框 3、鼠标右击，点击查看元素...
在chrome中查找和验证xpath
lixiaomei0623的专栏
05-23 3487
获取到的full xpath路径：/html/body/div[2]/div[1]/div[5]/div/div/div[3]/ul/li[2]/a/span[2]获取到的xpath路径：//*[@id="hotsearch-content-wrapper"]/li[2]/a/span[2]按F12打开chrome浏览器的开发者模式，点击选择光标，选择页面上的元素位置，在控制台右键选择Copy。按键“Ctrl+F”，在控制台中输入需要检查的XPath路径，对应的元素会有的颜色标识。
Chrome如何查看网页元素以及子元素的个数？
lewis_zhou的博客
11-20 2702
chrome开发人员工具统计子元素
web页面：xpath/css选择器元素定位和等待
Ly_LittleStar的博客
11-26 1962
1.xpath元素定位 支持所有的元素属性 支持text文本 可以通过标签名 可以通过元素之间的关系 要素和要素之间可以进行任意形式的组合 通过浏览器找到元素的xpath路径：首先F12，选中元素的html定义代码，鼠标右键->copy copy Xpath，相对路径，//*[@id="kw"] copy full Xpath ，绝对路径，/html/body/div[1]/div[1]/div[5]/div/div/form/span[1]/input 优先选用相对路径，因为
写一个获取元素 xpath 的 chrome 插件
07-22 1272
需求 哈哈哈，本人还是很暖的，开会的时候大家一起聊天，聊到了测试是怎么做测试的。 然后测试给我们演示了一下，每次编写测试用例，都要通过 chrome 获 取元素的 xpath，很麻烦。 我就多嘴问了一句，为什么不自己弄一个自动获取 xpath 然后读成想要格式的插件呢？ 测试：我不会，没研究过。 老板：那你来帮他实现一个吧。***，你把需求理顺了放进 tapd 。 我：反手给我自己一个大嘴巴子！ 梳理 好在之前对 chrome 插件也略有所闻，嘿嘿。 先想想需求，鼠标点击一个元素的时候，自动读取该
Chrome高效使用小技巧
生命不息，Coding不止
08-31 824
搜索相关 地址栏快速搜索 Chrome只有一个地址栏, 默认的Google搜索, 但在国内有时候百度对中文搜索略强一些, 重新设置又很麻烦, 打开个标签先搜百度再搜问题更麻烦. 可以设置不同搜索引擎不同关键字, 通过关键字快速使用不同搜索引擎搜索. 在 设置 - 搜索设置里面添加多个搜索引擎, 并设置关键字, 这是我常用的: 用的时候只要在地址栏输入想用的搜索引擎关键字, 按 tab 就可快速搜索: 标签页相关 标签分组 对相关的多个标签页进行分组, 标签名还支持表情; 也可以直接将标签页拖到分组里;
xpath定位元素（F12开发者工具xpath定位、xPath Helper扩展程序xpath定位）
Zhangaihua
03-31 2129
xpath定位元素
chrome - 开发者工具调试技巧
m0_70242402的博客
08-11 4476
谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。在开发工作中，Chrome极大的方便开发调试代码。主流的浏览器都内置了 DevTools，掌握 Chrome 的调试技巧，可以提高工作效率。对于测试人员来说，掌握Chrome 的调试技巧，可以快速判断一些前后端问题，抓取协议，判断接口是否ok，截图、还有进行弱网测试等等。...
Chrome插件 之 Selenium IDE、XPath 安装
沉觞的博客
04-11 688
Chrome插件 之 Selenium IDE、XPath安装Selenium IDEXPath Helper安装 在做UI自动化或爬虫项目时，需要对页面上的元素进行定位。 Selenium IDE Selenium IDE是一款录制工具，记录用户在浏览器上对网页进行的操作 可以选择css、xpath、id等各种方式的定位 XPath Helper XPath Helper是一款网页元素定位工具 定位的元素会在网页上高亮显示。如果是定位文本内容，右侧会返回文本内容的值，这是一个比较好的地方，在爬虫中很适用
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

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

余额充值