Loading [MathJax]/jax/output/CommonHTML/config.js
前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Web元素定位工具-ChroPath

Web元素定位工具-ChroPath

作者头像
沈宥
发布于 2022-05-10 05:46:40
发布于 2022-05-10 05:46:40
2.5K0
举报

一、简介

1、ChroPath只需单击一下即可生成所有可能的选择器。

2、ChroPath Studio有助于记录所有手动步骤以及自动化步骤

3、ChroPath支持iframe,多选择器生成,动态属性,使用自定义属性生成相对xpath,自动化脚本步骤生成。

二、下载配置

在浏览器中安装ChroPath扩展程序即可

[opera](https://addons.opera.com/en-gb/extensions/details/chropath-for-opera/)

[edge](https://microsoftedge.microsoft.com/addons/detail/ggabncnodmglgcdbmmmnkekknpehhcea)

[firefox](https://addons.mozilla.org/en-US/firefox/addon/chropath-for-firefox/)

[chrome](https://chrome.google.com/webstore/detail/chropath/ljngjbnaijcbncmcnjfhigebomdlkcjo/)

三、使用教程

基础使用

1.右键单击网页,然后单击“检查”。

2.在“元素”选项卡的右侧,单击“ ChroPath”选项卡,即最后一个选项卡。

3.要生成选择器,检查元素或单击任何DOM节点,它将生成唯一的相对XPath以及所有可能的选择器及其出现。在ChroPath面板中滚动以查看所有生成的选择器。

4.要评估XPath / CSS,请输入XPath / CSS查询,然后按Enter键。

输入后,它将在DOM中查询相关的元素/节点。您可以按顺序出现的顺序查看匹配节点的总数和节点值。周围出现绿色轮廓以突出显示第一个匹配的元素,并在网页中以蓝色其余部分。

5.如果将鼠标悬停在ChroPath选项卡中的任何匹配节点上,则绿色/蓝色虚线轮廓将转换为点缀的橘红色,以突出显示网页中的相应元素。

6.如果找到的元素不在网页的可见区域中,则将鼠标悬停在ChroPath面板中“找到的”节点上时,该元素将在可见区域中滚动,并带有点缀的橙红色轮廓。

7.如果找到的元素未突出显示但可见,则将鼠标悬停在ChroPath选项卡上匹配节点上时,它将突出显示带有点缀的橙红色轮廓的元素。

8.只需单击复制图标即可复制定位器。

9.如果要编辑任何定位器,请单击“编辑”图标。

脚本录制

点击ChroPath选项卡中的打开主面板按钮:

脚本录制主界面

页面元素操作,脚本展示独立窗口

脚本下载至本地
本文参与 腾讯云自媒体同步曝光计划,分享自微信公众号。
原始发表:2020-05-23,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 从头开始学习测试开发 微信公众号,前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
【Python爬虫实战】深入解析 Selenium:从元素定位到节点交互的完整自动化指南
Selenium 是进行网页自动化操作的强大工具,在测试、数据抓取、用户行为模拟等领域广泛应用。本指南将带您详细了解如何在 Selenium 中查找和定位页面元素,并深入介绍各种节点交互方法,包括点击、输入文本、选择选项等操作。无论您是初学者还是经验丰富的开发者,本篇文章将帮助您掌握 Selenium 自动化的核心技能,实现更高效的网页自动化操作。
易辰君
2024/11/07
6820
web自动化捕捉元素基本方法
前言:前面已经把环境搭建好了,从这篇开始,正式学习selenium的webdriver框架。我们平常说的 selenium自动化,其实它并不是类似于QTP之类的有GUI界面的可视化工具,我们要学的是webdriver框架的API。
测试小兵
2019/11/20
1.9K0
web自动化捕捉元素基本方法
Chrome 35个开发者工具的小技巧【动态图演示】
谷歌浏览器如今是Web开发者们所使用的最流行的网页浏览器。伴随每六个星期一次的发布周期和不断扩大的强大的开发功能,Chrome变成了一个必须的工具。大多数可能熟悉关于chorme的许多特点,例如使用c
前朝楚水
2018/04/02
8780
Chrome 35个开发者工具的小技巧【动态图演示】
Katalon Studio元素抓取功能Spy Web介绍
Katalon Studio提供了Web Object Spy功能,该功能可以主动抓取元素及其属性。同时,内置的验证和Highlight显示功能可以进一步验证元素定位的准确性。用户使用Web Object Spy可以随心所欲的抓取应用程序界面中的任何元素及其属性,并且保存到元素对象库中。备注:博主使用Katalon Studio当前最新版本:5.5.0
Altumn
2019/10/21
2.3K0
Katalon Studio元素抓取功能Spy Web介绍
CSS 1.0~3.0选择器(上)
HTML5学堂:我们学过了最为基础的id,类名和标签名选择器,然后就一直用它们了吗?如果是这样,那会丢失掉CSS选择器强大的功能。我们会花费几篇文章的篇幅,将CSS1.0版本至当前最新的3.0版本当中,存在的所有选择器讲解一遍,今天我们先来说说比较基础的选择器。 通配符选择器 基本语法 * { margin: 0; padding: 0; } HTML5学堂的一些提醒: 对于初学者,在学习更多高级选择器之前,最先了解的选择器。 星号选择器将匹配页面里的每一个元素。很多开发者使用这个技巧将外边距和内边距重置为
HTML5学堂
2018/03/12
8570
这30个CSS选择器,你必须熟记(中)
大家好,上一篇文章里,《这30个CSS选择器,你必须熟记(上)》,我们一起学习了常用的10个CSS选择器,这篇文章我们将继续学习CSS选择器,由于文章篇幅有限,再介绍10个常用常用的CSS选择器。
前端达人
2019/10/30
6530
这30个CSS选择器,你必须熟记(中)
[Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解(定位元素、常用方法、鼠标操作)
Selenium是一款用于测试Web应用程序的经典工具,它直接运行在浏览器中,仿佛真正的用户在操作浏览器一样,主要用于网站自动化测试、网站模拟登陆、自动操作键盘和鼠标、测试浏览器兼容性、测试网站功能等,同时也可以用来制作简易的网络爬虫。
Eastmount
2021/12/02
5K0
[Python从零到壹] 九.网络爬虫之Selenium基础技术万字详解(定位元素、常用方法、鼠标操作)
前端开发必备之Chrome开发者工具(上篇)
本文介绍的 Chrome 开发者工具基于 Chrome 65版本,如果你的 Chrome 开发者工具没有下文提到的那些内容,请检查下 Chrome 的版本 简介 Chrome 开发者工具是一套内置于 Google Chrome 中的Web开发和调试工具,可用来对网站进行迭代、调试和分析 打开 Chrome 开发者工具的方式有: 在Chrome菜单中选择 更多工具 > 开发者工具 在页面元素上右键点击,选择 “检查” 使用 快捷键 Ctrl+Shift+I (Windows) 或 Cmd+Opt+I (Mac
laixiangran
2018/04/24
8.7K0
前端开发必备之Chrome开发者工具(上篇)
PlayWright(五)- 元素定位
上文我们已经掌握好怎么启动playwright了,我们就可以开启playwright的正式学习之路了?
似小陈吖
2023/10/17
1.6K0
PlayWright(五)- 元素定位
CSS伪类与伪元素「建议收藏」
css引入伪类和伪元素概念是为了格式化文档树以外的信息。也就是说,伪类和伪元素是用来修饰不在文档树中的部分,比如,一句话中的第一个字母,或是列表中的第一个元素,又或者是鼠标悬停在某个超链接上时要设置的样式。
全栈程序员站长
2022/11/01
1.7K0
Apache JMeter工具的基本介绍与安装
  JMeter是一个纯粹的Java编写的应用程序,它主要是用来进行负载和性能测试。原先它是为Web/HTTP测试而设计的。设计JMeter最初始的目的是用来测试Web Application但是现在已经扩展了很多功能。JMeter通常被用来对一些静态的或者动态资源(比如PHP, Java,ASP.Net等编写的Web,或者是Java Object, Data Bases and Queries, FTP 服务器等等)进行性能测试。 它通常模拟大量的数据对一个Server或者一个Server Group 网络等进行负载测试。然后通过分析它产生的性能图表来判断测试结果。和其他性能压测工具相比较,还是比较轻量级的,不够好像不支持IP伪装。官网有更详细的介绍 http://jmeter.apache.org/
菲宇
2019/06/12
1.1K0
Apache JMeter工具的基本介绍与安装
Selenium Python使用技巧(二)
您可能需要在多种情况下针对不同的浏览器(例如Firefox,Chrome,Internet Explorer,Edge)测试代码。跨不同浏览器测试网站的做法称为自动浏览器测试。要使用Selenium自动化测试执行自动浏览器测试,您应该在单元测试代码或pytest代码中合并对这些浏览器的选择性处理。下面显示了一个代码片段(利用pytest)来处理多个浏览器:
FunTester
2020/02/17
6.7K0
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
在当今数据驱动的世界中,抓取动态网页内容变得越来越重要,尤其是像抖音这样的社交平台,动态加载的评论等内容需要通过特定的方式来获取。传统的静态爬虫方法难以处理这些由JavaScript生成的动态内容,Selenium爬虫技术则是一种能够有效解决这一问题的工具。本文将以采集抖音评论为示例,介绍如何使用Selenium模拟鼠标悬停,抓取动态内容,并结合代理IP技术来应对反爬机制。
jackcode
2024/10/22
2080
Selenium爬虫技术:如何模拟鼠标悬停抓取动态内容
【Playwright+Python】系列教程(五)元素定位
定位器是 Playwright 自动等待和重试能力的核心部分。简而言之,定位器代表了一种随时在页面上查找元素的方法,以下是常用的内置定位器。
软件测试君
2024/07/12
9160
【Playwright+Python】系列教程(五)元素定位
Cypress web自动化28-运行器界面调试元素定位和操作
Cypress提供了一个很好的测试运行器, 它为你提供了一套可视化结构的测试和断言套件, 很快你也会看到命令, 页面事件, 网络请求等. 当你还没熟练掌握元素定位时,在运行器界面点开探测器,会自动帮我们定位好元素,甚至写好部分代码。
上海-悠悠
2020/06/04
1.4K0
如何用7个简单的步骤,在Firefox开发工具中调试JavaScript
本文将着重于在Firefox的开发工具中调试JavaScript代码。Firefox中的开发工具是一个非常强大的工具,可以加速您的bug查找和修复过程!
程序你好
2018/07/23
4.3K0
Selenium必须掌握的元素定位方法
Web端的UI自动化测试,目前使用比较多的就是Python+Selenium。当前一些UI自动化测试工具也是基于Selenium做开发的。 最近经常有童鞋后台询问selenium元素定位方法,其实网上学习资料很多,只要你肯动手,都可以搜的到。元素定位对于自动化测试来说是比较重要而且繁琐的一件事。接下来就来讲一下如何使用webdriver提供的基本元素定位方法。 再次声明:本站点已经和百度、必应、谷歌等各大搜索引擎达成长期的战略合作协议,你有任何疑问都可以通过以上公司提供的免费服务得到解答。
Altumn
2019/10/20
4.8K0
Google earth engine——矢量数据的上传(新手必备)!
要上传和管理地理空间数据集,请使用代码编辑器中的资产管理器。资产管理器位于代码编辑器左侧的资产选项卡上(图 1)。有关上传栅格(图像)数据的说明,请参阅导入栅格数据,有关上传表格数据的说明,请参阅导入表数据。您的资产最初是私有的,但可能会与他人共享。有关详细信息,请参阅 共享资产部分。
此星光明
2024/02/02
9130
Google earth engine——矢量数据的上传(新手必备)!
【译】一文洞察 Chrome DevTools 近半年新增了哪些功能
https://developers.google.com/web/updates/2019/09/devtools
政采云前端团队
2019/12/20
1.7K0
【译】一文洞察 Chrome DevTools 近半年新增了哪些功能
python selenium定位元素
查找元素: find_element_by_id find_element_by_name find_element_by_xpath find_element_by_link_text find_element_by_partial_link_text find_element_by_tag_name find_element_by_class_name find_element_by_css_selector 查找多个元素: find_elements_by_name find_elements_by_xpath find_elements_by_link_text find_elements_by_partial_link_text find_elements_by_tag_name find_elements_by_class_name find_elements_by_css_selector
用户5760343
2022/05/13
1.7K0
推荐阅读
相关推荐
【Python爬虫实战】深入解析 Selenium:从元素定位到节点交互的完整自动化指南
更多 >
领券
💥开发者 MCP广场重磅上线!
精选全网热门MCP server,让你的AI更好用 🚀
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档