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

最新推荐文章于 2024-05-17 10:53:02 发布
最新推荐文章于 2024-05-17 10:53:02 发布
阅读量1.6k 收藏 4
点赞数 1
分类专栏： 编程 测试 文章标签： python 定位
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LSMSMD0526/article/details/118945237
版权

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

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

在这里插入图片描述

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

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

在这里插入图片描述

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

在这里插入图片描述

<

最低0.47元/天 解锁文章
Lefdr
关注
  • 1
    点赞
  • 踩
  • 4
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
Chrome浏览器和Xpath插件.zip
03-31
Chrome浏览器和Xpath插件可快速查看源代码，审查元素，定位元素 XPath Helper插件是一款可以安装到谷歌浏览器上使用并且支持所有chrome内核浏览器的爬虫网页解析工具,使用XPath Helper可以让你轻松获取HTML元素的...
Chrome高效使用小技巧
生命不息，Coding不止
08-31 735
搜索相关 地址栏快速搜索 Chrome只有一个地址栏, 默认的Google搜索, 但在国内有时候百度对中文搜索略强一些, 重新设置又很麻烦, 打开个标签先搜百度再搜问题更麻烦. 可以设置不同搜索引擎不同关键字, 通过关键字快速使用不同搜索引擎搜索. 在 设置 - 搜索设置里面添加多个搜索引擎, 并设置关键字, 这是我常用的: 用的时候只要在地址栏输入想用的搜索引擎关键字, 按 tab 就可快速搜索: 标签页相关 标签分组 对相关的多个标签页进行分组, 标签名还支持表情; 也可以直接将标签页拖到分组里;
Chrome如何查看网页元素以及子元素的个数？
lewis_zhou的博客
11-20 1916
chrome开发人员工具统计子元素
Chrome DevTools 使用指南-元素审查篇
最新发布
守城小轩的技术窝棚
05-17 981
包括搜索栏、选择工具和筛选器，帮助开发者快速找到特定的元素或样式规则，进行高效的调试工作。
xpath定位元素（F12开发者工具xpath定位、xPath Helper扩展程序xpath定位）
Zhangaihua
03-31 1637
xpath定位元素
chrome - 开发者工具调试技巧
m0_70242402的博客
08-11 4120
谷歌浏览器（通常简称为 Chrome ）是由谷歌开发的网络浏览器。在开发工作中，Chrome极大的方便开发调试代码。主流的浏览器都内置了 DevTools，掌握 Chrome 的调试技巧，可以提高工作效率。对于测试人员来说，掌握Chrome 的调试技巧，可以快速判断一些前后端问题，抓取协议，判断接口是否ok，截图、还有进行弱网测试等等。...
Chrome插件 之 Selenium IDE、XPath 安装
沉觞的博客
04-11 599
Chrome插件 之 Selenium IDE、XPath安装Selenium IDEXPath Helper安装 在做UI自动化或爬虫项目时，需要对页面上的元素进行定位。 Selenium IDE Selenium IDE是一款录制工具，记录用户在浏览器上对网页进行的操作 可以选择css、xpath、id等各种方式的定位 XPath Helper XPath Helper是一款网页元素定位工具 定位的元素会在网页上高亮显示。如果是定位文本内容，右侧会返回文本内容的值，这是一个比较好的地方，在爬虫中很适用
Chrome控制台妙用之定位xpath_js_css居家必备好工具
08-10
在调试过程中，`$x`命令非常方便，但需要注意不同语言和工具对XPath的处理可能存在差异。在Python中，如使用lxml库，可以直接获取文本值，而在Chrome控制台则需要额外的步骤。 此外，`$x`命令的源代码展示了其实现...
ScrapeMate：刮擦辅助工具。 跨网页编辑和维护CSSXPath选择器
01-30
支持::text / ::attr() CSS伪元素和has-class() xpath函数。 切换当前正在使用的标签JavaScript。 计划的功能：嵌套选择器，更多模板测试以及可能的实际提取功能。 查看全部： 。笔记这最初是作为小书签使用的，...
Xpath和CSS的比较.docx
03-31
在Python的Selenium库中，元素定位是自动化测试的关键部分，Xpath和CSS选择器都是常用的定位方法。本文将详细对比这两种技术，并提供一些实际应用的示例。 首先，Xpath（XML Path Language）是一种在XML文档中查找...
CSS和XPath检查程序「CSS and XPath checker」-crx插件
03-09
用于确认CSS和XPath选择器的辅助工具。 该工具有助于检查CSS和XPath选择器。 它用高亮显示选择器指定的元素。 支持语言:English
Chrome开发者工具，验证元素定位正确与否
像Storm一样飞
02-07 2457
在开展Web UI自动化测试的时候，元素定位是首先要解决的问题，Selenium提供了多种元素定位方法，其中xpath是我们常用的定位手段之一，当我们写完xpath后，如何确保该xpath能定位到目标元素呢？本篇博客来探讨一下该问题。1、通过执行脚本，验证元素定位是否正确2、通过开发者工具Elements判断元素定位是否准确3、通过开发者工具console页签判断元素定位是否准确4、拓展 1、通过执行脚本，验证元素定位是否正确 脚本调试是非常重要的环节，但是通过执行脚本来判断元素定位是否准确，效率低下，并非
chrome使用技巧（看了定不让你失望）
weixin_33709609的博客
06-02 631
写在前面 之前有看过刘哇勇写的Chrome 控制台不完全指南,让我觉得瞬间对chrome的了解实在太浅了。对此特意了解了一番（也就是在他的博文上进行了一些总结和了解一些其它chrome使用方面的诀窍），写了两篇博文 你可能不知道console强大 我所了解的chrome 最近又学到了一些chrome的使用技巧，在此分享一下，我只是觉得工欲善其事，必先利其器。chrome在我心里就是神。 ...
章节八、1-如何使用火狐开发者工具来查找元素
weixin_30378311的博客
04-03 1259
一、查找元素是使用selenium进行自动化的基础，我们只有找到元素才能在页面操作它。 二、Web应用页面上的元素不会因为浏览器种类的不同而产生差异，也就是说你可以在火狐或者谷歌上查找到的元素在ie等浏览器上都可以用。 三、如何使用火狐开发者工具来查看元素 1、首先安装火狐浏览器 2、打开浏览器，将鼠标移动到你需要定位的地方，列如：百度搜索文本框 3、鼠标右击，点击查看元素...
浏览器开发者模式获取页面元素
zw1_csdn的博客
04-13 5791
web开发中经常会借鉴体验较好或者合适的网站，可以直接拿过来用。这时通过浏览器开发者模式获取页面元素非常方便，一是能快速获取页面元素、二是能查看页面元素相对路径便于分类，下面以Google为例介绍 1、首先打开Google浏览器，点击键盘F12 2、打开目标网站，在开发者模式中选择“Sources”，二级模块选择“Page”，如下图 通过以上可以，一层层打开文件目录，获取文...
【selenium学习总结5】----Chrome中利用console进行元素定位
CSDN_mayan的博客
04-26 1718
一、console利用xpath定位元素 命令格式：$x("xpath表达式") 返回与指定的XPath相匹配的所有元素的数组 以百度页面为例： #定位百度一下按钮 $x("//span/input[@id='su']") #定位百度搜索框 $x(".//*[@id='kw']") $x("//*[@id='kw' and @autocomplete='off']") #定位hao123 $x("//*[contains(text(),'hao123')]") 在使用x.
通过谷歌浏览器的开发者工具F12查找元素的xpath与CSS地址
AZ_Canon的博客
11-27 7272
打开谷歌浏览器，按F12打开开发者工具 1.选择element元素 2.点下工具窗右上角的小箭头 3.点击要定位的元素，如图中的“关注”，点击后元素栏自然会用亮色突出该元素信息 4.右击这行信息 5.选择copy 6.选择copy xpath ...
怎么使用Uiautomatorviewer获取元素的xpath
0x8g1T9E-
06-24 9130
在学习和使用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 652
使用selenium通过chromeF12的xpath以及css定位，但pycharm报错无法定位
VSCODE 开发者工具右键element获取xpath
09-16
2. 在开发者工具中，找到要获取 XPath 的元素。 - 可以使用鼠标移动到页面上的元素上，同时开发者工具会自动定位到对应的 DOM 结构。 3. 在开发者工具中右键点击该元素。 - 右键点击元素后，会出现一个上下文菜单...

“相关推荐”对你有帮助么？

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值