Chrome扩展程序：以编程方式检查元素和“复制xpath”或“copy css path” [英] Chrome Extension: Programmatically inspect element and "copy xpath" or "copy css path"

问题描述

我想知道是否可以通过编程访问某个元素，比如我将鼠标悬停在当前元素上，然后执行相应的右键单击，进入检查元素，在元素选项卡中选择它，右键单击copy xpath或copy css path。

另外，我想知道是否有可能获得类似元素的xpath或css路径。说出本网站侧面的所有链接，如何让chrome获得一个xpath或css路径表达式，表示该类别链接下的类似问题？

我的目的是编写一个扩展，使我可以轻松地在页面上抓取元素的xpath或css路径，这足够准确地自动化Web应用程序进行测试。

一种可能性是使用

  document.querySelectorAll（：hover）; 
  

这将从parent => child => ... = >最后一个孩子。因此，NodeList中的最后一个元素将是最具特定性的，并且它（大部分时间）可以通过向NodeList返回来构建一个指向该特定元素的css路径。

对于你的第二个问题，你正在转向非常困难的领域！一般来说，如果你试图从一个未知的html页面中提取信息，那么在事先不知道页面结构的情况下自动/以编程的方式完成这些操作根本不可行。

如果你希望你的扩展只从一定数量的站点提取路径，然后很好......你可以（手动）查看这些站点是否具有良好的结构化标记，并将这些路径硬编码到你的代码中。否则，对于任何一般的网站，寻找类似的路径应作为练习留给用户（可能使用上面提到的 hover 方法：））

I want to know if it's possible to programmatically access an element, say the current element I am hovering over, and perform the equivalent of right clicking it, going to "inspect element", selecting it in the Elements tab, right click "copy xpath" or "copy css path".

Additionally, I would like to know if it's possible to get xpath or css path of similar elements. Say all the links on the side of this website, how to make chrome get an xpath or css path expression that represents that group of links under Similar Questions?

My purpose is to write an extension that lets me easily grab xpath or css path of elements on page that is accurate enough for automating web applications for testing.

解决方案

One possibility is to use

document.querySelectorAll(":hover");

Which will return a NodeList of elements in deciding order from parent => child => ... => last child. So the last element in the NodeList will be most "specific", and it would (most of the time) be possible to construct a css path to that specific element by working backwards through the NodeList.

For your second question, you are veering into extremely difficult territory! In general, if you are trying to extract information from an unknown html page it is simply not feasible to do so automatically/programmatically without knowing the page structure before hand.

If you want your extension to only extract paths from a certain (small) number of sites then great...you can (manually) see if the sites have well structured markup and hard code those paths into your code. Otherwise, for any general site, finding similar paths should be left as an exercise to the user (perhaps using the hover method as mentioned above :))

这篇关于Chrome扩展程序：以编程方式检查元素和“复制xpath”或“copy css path”的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！