html - 如何使用 chrome 开发工具根据 css class 或 id 查找元素?

标签 html google-chrome css-selectors google-chrome-devtools

此处为长期自动化开发人员(仅供引用)。 chrome 中用于查找元素的开发工具似乎并不像我预期的那样工作,这一直困扰着我。希望有人能指出我做错了什么。

查看酱汁实验室页面:https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class

好的,现在该页面有 div 和 anchor

enter image description here

而且我确实可以做 find ('a')find('div')

但为什么我在使用类或 ID 时遇到问题?

enter image description here

最佳答案

find() 方法引用window.find() ,用于浏览器内置查找功能的非标准 API。它不像 Selenium 或 Capybara 那样查找 Web 元素,因此它不会将输入解析为选择器。

您可以使用 document.querySelector()document.querySelectorAll() 在 Chrome DevTools 中找到带有选择器的元素。 Chrome DevTools 中没有为此提供特殊方法,但它确实提供了 $()$$() 别名(分别)以节省您的时间和击键次数。

关于html - 如何使用 chrome 开发工具根据 css class 或 id 查找元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/51631947/

相关文章:

jquery - 有没有办法提取CSS选择的属性值?

html - 输入值与标签值不一致

html - 使元素不可点击(点击它后面的东西)

javascript - Chrome 中的 MIME 类型错误

javascript - 在 Chrome 和 Firefox 中关闭 https 门控 Web API 的 https 要求

html - 如何在 css 中使用类中的特定单词?

css - 在 CSS 中设置嵌套列表的样式

HTML5 Canvas 合成(源代码)

javascript - 在 Canvas 中填充更多类型的相似对象

javascript - 将 div 填充到视口(viewport)高度会在 Chrome 而不是 Firefox 中产生额外的空间