定位元素时,一般用xpath或css selector来定位,定位时可以借助chrome浏览器或firefox浏览器的firebug来直接copy selector或copy xpath。此文介绍使用chrome怎样去验证css selector或xpath的有效性。

步骤
1. 按F12打开chrome的开发者工具;
2. 再按Esc键调出console
经过这俩步骤,chrome的Elements和Console展示在同一个窗口,便于查看。

$(selector)和$$(selector)

可见: 前者会列出与selector匹配的所有元素,而后者则是把这些匹配到的元素组成了数组 。(点击返回的每个元素,则会定位到页面中的img元素及html中的具体位置)
另外还有两种方法与上面类似:
这里写图片描述
document.querySelector()会返回DOM中匹配的第一个元素(只返回一个元素);
document.querySelectorAll()等同于$$(selector)
综上:使用$(selector)即可满足验证css selector是否有效的需求

$x(path)

这里写图片描述
$x(path)返回的是一个数组,数组中即为与xpath匹配的所有元素。
References:
https://developers.google.cn/web/tools/chrome-devtools/console/command-line-reference?hl=zh-cn
https://getfirebug.com/wiki/index.php/Command_Line_API

本教程的前一个步骤 SAP UI5 应用开发教程之三十六 - 使用 Chrome 开发者工具 Elements 标签动态修改 CSS 类 我们学习了 Chrome 开发者工具 Elements 面板的 使用 。本步骤继续探索另一个 Console 面板的 使用 。 技巧1:利用 jQuery 选择器 ,查看控件对应的 DOM 元素明细 很多 SAP UI5 开发人员,对于 Console 面板的 使用 ,可能仅仅限于浏览应用运行时打印出的 INFO 或者 ERROR 信息。其实我们还可以在 Console 面板里输入一
**Playwright是微软在` 2020 年初 `开源自动化测试工具,功能和 selenium 类似,都可以驱动浏览器进行各种自动化操作。** - 支持主流浏览器,如 Chrome 、Firefox、Safari 等,同时支持以**无头模式、有头模式**运行,并提供了**同步、异步的 API**,可以结合 `主流测试框架` 使用 ,并且支持浏览器端的自动化脚本录制等功能。 **特点:** - 跨浏览器:Playwright 支持所有现代渲染引擎,包括Chromium、WebKit 和 Firefox;
定位元素时,一般用 xpath css selector 来定位,定位时可以借助 chrome 浏览器或firefox浏览器的firebug来直接copy selector 或copy xpath 。此文介绍 使用 chrome 怎样去验证 css selector xpath 有效性 。 1. 按 F12 打开 chrome 的开发者工具; 2. 再按Esc键调出 console 经过这俩步骤, chrome 的El...
文章目录一、 Xpath 1.1 绝对定位与相对定位1.2 通配符与不包含筛选1.3 Xpath 函数运算的简单实用1.4 各种亲戚标签的定位二、 css 选择器 2.1 基本格式2.2 常用符号2.3 CSS 选择器 的属性筛选三、js定位 一、 Xpath console 中调用 xpath 的基本格式:$x(" xpath 表达式") 1.1 绝对定位与相对定位 绝对定位:$x("/ xpath 表达式") 相对定位:...
From ( Chrome Devtools 高级调试指南 ):https://juejin.cn/post/6844903961472974855 chrome devtools 设置黑色主题:https://blog.csdn.net/sinat_15347975/article/details/81151342 Chrome DevTools ...
爬虫**网络爬虫概述****==爬虫请求模块==****requests模块****常用方法****爬虫编码模块****常用方法****urlencode({ 参数为字典 })****quote('参数为字符串')****案例 - 百度贴吧数据抓取****正则解析模块re****re模块 使用 流程****正则表达式元字符****贪婪匹配和非贪婪匹配****正则表达式分组****猫眼电影top100抓取案例****数据持久化 - MySQL****今日作业** 网络爬虫概述 【1】定义 1.1) 网络蜘
Puppeteer 是 Chrome 开发团队在 2017 年发布的一个 Node.js 包,用来模拟 Chrome 浏览器的运行。我们团队从 Puppeteer 刚发布出来就开始成为忠实用户了(主要是因为 PhantomJs 坑太多了),本文主要在介绍 Puppeteer 的同时,结合我们平时的实践做一个分享。 学习 Puppeteer 之前我们先来了解一下 Chrome DevTool Pro...
Google Chrome 浏览器是基于 Safari 正在 使用 的 Webkit 引擎, 使用 的版本是 AppleWebKit/525.13 。不过 Safari3.1 使用 的是最新版本:AppleWebKit/525.18。 那 Google Chrome 浏览器对 CSS 选择器 的支持又如何呢?感谢 Engage 公司的女前端开发工程师 Estelle 测试整理的《Google Chrom...
谷歌浏览器,查找 CSS 选择器 谷歌浏览器,查找 CSS 选择器 新的改变功能快捷键合理的创建标题,有助于目录的生成如何改变文本的样式插入链接与图片如何插入一段漂亮的代码片生成一个适合你的列表创建一个表格设定内容居中、居左、居右SmartyPants创建一个自定义列表如何创建一个注脚注释也是必不可少的KaTeX数学公式新的甘特图功能,丰富你的文章UML 图表FLowchart流程图导出与导入导出导入 谷歌浏览器,查找 CSS 选择器 你好! 这是你第一次 使用 Markdown编辑器 所展示的欢迎页。如果你想学习如何 使用 M
楼主你好,我想知道你文章末尾的references的第三个链接,有关selenium的那个,是怎么发现的。 我最近在学selenium,去官网看文档,那个文档非常不清晰,很多内容都没有。直到今天看到你贴出来的链接,阅读后才算有了一个了解。 我很奇怪,为什么我在google,baidu,bing上搜索,都不会发现你贴的这个链接,这是为什么?为什么这么好的文档却没有在搜索结果上显示? 你又是怎么发现这个链接的呢?