如何使用Chrome开发者工具根据CSS选择器查找元素？ （例如，班级或 ID）

Question

这里是长期自动化开发人员（仅供参考）。 很长一段时间以来，Chrome 中用于查找元素的开发工具似乎无法按我的预期工作，这一直困扰着我。 希望有人能指出我做错了什么。

查看 Sauce Labs 页面：https://saucelabs.com/blog/selenium-tips-finding-elements-by-their-inner-text-using-contains-a-css-pseudo-class

该页面有 div 和锚点：

事实上我可以做

find ('a')

或

find('div')

。 但为什么我在使用类或 id 时遇到问题？

Answer 1

find()

方法指的是

window.find()

，浏览器内置查找功能的非标准API。它不像 Selenium 或 Capybara 那样查找 Web 元素，因此它不会将输入解析为选择器。

您可以使用

document.querySelector()

或

document.querySelectorAll()

在 Chrome DevTools 中查找带有选择器的元素。 Chrome DevTools 中没有为此提供特殊方法，但它确实提供了

$()

和

$$()

别名（分别）以节省您的时间和击键次数。

Answer 2

您可以在 Chrome 控制台中使用 jquery 代码，例如，如果您想查找 class 为“foo”的内容，您可以编写

$('.foo')

或 id 为“bar”您编写

$('#bar')

您可以在这里阅读所有相关内容

你也可以直接谷歌搜索你想要的“Jquery 如何找到带有 id 的 div”