Chrome扩展:以编程方式检查元素和"复制xpath"或者“复制CSS路径”

Chrome Extension: Programmatically inspect element and "copy xpath" or "copy css path"

本文关键字：复制 quot 或者 xpath CSS 路径 扩展 检查 方式 元素 Chrome      更新时间：2023-09-26

我想知道是否有可能以编程方式访问一个元素，比如我悬停在当前元素上，并执行相当于右键单击它，进入"检查元素"，在元素选项卡中选择它，右键单击"复制xpath"或"复制css路径"。

另外，我想知道是否有可能获得类似元素的xpath或css路径。说所有的链接在这个网站的一边，如何使chrome获得xpath或css路径表达式，表示在类似的问题下的一组链接?

我的目的是编写一个扩展，让我可以轻松地获取页面上元素的xpath或css路径，这对于自动测试web应用程序来说足够准确。

一种可能性是使用

document.querySelectorAll(":hover");

这将返回一个NodeList的元素决定顺序从parent => child =>…=>最后一个孩子。因此，NodeList中的最后一个元素将是最"特定的"，并且(大多数时候)可以通过反向工作来构建到该特定元素的css路径。

关于你的第二个问题，你进入了一个非常困难的领域!一般来说，如果你试图从一个未知的html页面中提取信息，在不事先知道页面结构的情况下，以自动/编程的方式这样做是不可行的。

如果你想让你的扩展只提取路径从一个特定的(小)数量的网站然后伟大的…您可以(手动)查看站点是否有结构良好的标记，并将这些路径硬编码到代码中。否则，对于任何一般站点，寻找类似的路径应该留给用户作为练习(可能使用上面提到的hover方法:))

相关文章：