当前位置： 文江博客话题详情

有没有办法在 Google Chrome 中获取 XPath？

发布于 2024-09-05 01:32:06 字数 119 浏览 3 评论 0原文

我有一个网页想要与 YQL 一起使用。但我需要特定项目的 XPath。我可以在 Google Chrome 的调试工具区域中看到它，但我没有找到复制该 XPath 的方法。

有没有办法复制完整的 XPath？

原文

I have a webpage I want to use with YQL. But I need the XPath of a specific item. I can see it in the debug tools area for Google Chrome but I don't see a way to copy that XPath.

Is there a way to copy a full XPath?

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论， 你可以免费 注册 一个本站的账号。

评论（15）

晨光如昨 2024-09-12 01:32:10

从 Chrome 的最新更新开始，您现在可以单击元素检查器中的任何元素并将 XPath 复制到剪贴板。

As of the latest update for chrome you can now click any element in the element inspector and copy the XPath to clipboard.

回复 原文
神魇的王 2024-09-12 01:32:10

例如，对于 Chrome：在

  1. 您尝试查找 XPath 的项目上右键单击“检查”。
  2. 右键单击 HTML DOM 上突出显示的区域。
  3. 转到复制>选择“复制 XPath”。
  4. 经过上述步骤后，您将从 DOM 中获取元素的绝对 XPath。
  5. 您可以进行更改以使其相对于 XPath（因为如果 DOM 发生更改，您的 XPath 仍然能够找到该元素）。

一个。为此，请打开浏览器的“元素”面板，按 CTRL+F，粘贴 XPath。

b.按照以下示例中的说明进行更改。

绝对 xpath = //*[@id="app"]/div[1]/header/nav/div[2]/ul/li[2]/div/button

相关 xpath = //div//nav/div [2]/ul/li[2]/div/button

进行更改时：

  1. 确保 XPath 在 DOM 中是唯一的。
  2. 仍然在 DOM 和网页上选择了 Web 元素。

For Chrome, for instance:

  1. Right-click "inspect" on the item you are trying to find the XPath.
  2. Right-click on the highlighted area on the HTML DOM.
  3. Go to Copy > select 'Copy XPath'.
  4. After the above step, you will get the absolute XPath of the element from DOM.
  5. You can make changes to make it relative XPath (because if the DOM changes, still your XPath would be able to find the element).

a. To do so, by opening the 'Elements' panel of the browser, press CTRL+F, paste the XPath.

b. Make changes as describes in the following example.

Absolute xpath = //*[@id="app"]/div[1]/header/nav/div[2]/ul/li[2]/div/button

Related xpath = //div//nav/div[2]/ul/li[2]/div/button

When you make changes:

  1. make sure the XPath is unique within the DOM.
  2. still the web element is selected on the DOM and on the webpage.
回复 原文
暗喜 2024-09-12 01:32:10

只需右键单击您想要 xpath 的元素，您就会看到一个用于复制它的菜单项。当OP发表他的帖子时，这可能不存在，但现在肯定存在。

Just right-click on the element you want the xpath for and you will see a menu item to copy it. This may not have existed when the OP made his post but it's certainly there now.

回复 原文
摇划花蜜的午后 2024-09-12 01:32:10

在 Firefox 的 Firebug 中，您可以在检查元素后右键单击该元素，然后选择“复制 XPath”。我无法让 ChromYQLip 顺利工作。

In Firebug in Firefox, you can right click on an element after inspecting it, and choose Copy XPath. I could not get ChromYQLip to work smoothly.

回复 原文
故人爱我别走 2024-09-12 01:32:10

首先打开您的 Google Chrome 浏览器

并打开任意网站

并检查

First open your Google Chrome

and open any website

and inspect that

回复 原文
送君千里 2024-09-12 01:32:10

有点过时，但也许有用：在 Mac Chrome 上，虽然您无法将 xpath 从开发工具面板的搜索框中复制出来（相反，复制会以 HTML 形式抓取节点），但您可以将文本拖放到外部编辑器中。

Slightly OT, but perhaps useful: On Mac Chrome, although you cannot copy the xpath out of the search box in the Dev tools panel (instead, copy grabs the node as HTML), you can drag and drop the text into an external editor.

回复 原文
韶华倾负 2024-09-12 01:32:10

我经常看到有关如何查找网页中项目的“the” XPath 以及短语“the XPath”（而不是“an XPath” ") 总是突然出现在我面前，让我想跳起来说“你确定这就是你想要做的吗？” 这就是

短语“XPath”的原因“ 触发我的是 XPath 不是一个标识符方案；它是一种查询语言。在网页上下文中计算的 XPath 查询可以返回该页面中的一个项目或一组项目，但是许多其他 XPath 表达式（无限多个）可以返回相同的一组项目。 ，事实上）。其中一些 XPath 比其他 XPath 好得多。

我同意这里许多评论者的观点，他们警告不要使用浏览器或浏览器插件自动生成的 XPath 表达式，因为这些 XPath 表达式往往过长，并且过度依赖于 HTML 标记中不相关的细节，并且因此易碎；当网页将来发生变化时，可能会损坏或失败。

如果您必须使用 XPath，那么您自己至少学习一点确实值得，这样您就可以编写自己的 XPath 表达式，该表达式会更短且工作效果更好。 XPath 1.0 是浏览器支持的 XPath 版本，它是无论如何，这门语言都不是很难学的；这与编写 CSS 选择器没有什么不同，如果您需要帮助，该网站上有 XPath 专家，他们会回答问题。

例如，假设您打开有关弗朗茨·卡夫卡日记的互联网档案馆页面 Chrome，并且您想要创建一个 XPath 来引用“EPUB”下载链接（以电子书形式下载该书）。在 Chrome 中，您可以右键单击链接的 元素，然后从“复制”菜单中选择“复制 XPath”，您将获得以下 XPath：

//*[@id="maincontent"]/div[5]/div/div/div[2]/section[2]/div[3]/a

使用“复制完整 XPath”您将获得

/html/body/div[1]/main/div[5]/div/div/div[2]/section[2]/div[3]/a

：相比之下，这是我手写的 XPath：（

//a[substring(@href, string-length(@href) - 4) = '.epub'][1]

翻译为英语；第一个 a 元素，其 href 属性以 .epub 结尾）

或者更简单的是：

//a[contains(@href, '.epub')][1]

如果将自动生成的 XPath 与基于人类理解而手写的 XPath 进行比较，手写 XPath 的优越性是显而易见的：它可以定位实际上是 XPath 的基本识别标记。您想要的元素，因为人类作者能够理解该元素实际上在做什么，并且可以避免依赖于与该元素的功能无关的其他细节。

然而，由于自动生成的 XPath 是在不知道 a 用途的情况下创建的，因此它们采用了指定一条长而杂乱的路径的方法，该路径逐步引导页面，到达您的最终目的地。当然，每当互联网档案馆的网页设计者对页面布局进行微小更改时，这些长路径就很可能会失效；当发生这种情况时，自动生成的 XPath 将开始返回一个空集，但手写的 XPath 可能会继续工作。

I often see questions about how to find "the" XPath for an item in a web page, and the phrase "the XPath" (rather than "an XPath") always jumps out at me, and makes me want to jump up and say "ARE YOU SURE THAT'S WHAT YOU WANT TO DO?"

The reason the phrase "the XPath" triggers me is that XPath isn't an identifier scheme; it's a query language. An XPath query evaluated in the context of a web page can return an item or set of items in that page, but the same set of items could be returned by many other XPath expressions (infinitely many, in fact). And some of those XPaths are much better than others.

I agree with a number of commenters here who have warned against using XPath expressions that have been automatically generated by a browser or browser plugin, because these XPath expressions tend to be over-long, and excessively dependent on irrelevant details in the HTML markup, and hence brittle; liable to break or fail when the web page changes in future.

If you have to work with XPath, it's really worth learning at least a little of it yourself, so that you can write your own XPath expressions which will be much shorter and work better. XPath 1.0 is the version of XPath supported in browsers, and it's not a hard language to learn by any means; it's not all that different to writing a CSS selector, and there are XPath experts on this website who will answer questions, if you need help.

For example, let's say you open the Internet Archive's page about Franz Kafka's diaries in Chrome, and you want to create an XPath to refer to the "EPUB" download link (to download the book as an eBook). In Chrome you can right-click the link's <a> element and choose "Copy XPath" from the "Copy" menu, you get the following XPath:

//*[@id="maincontent"]/div[5]/div/div/div[2]/section[2]/div[3]/a

Using "Copy full XPath" you get:

/html/body/div[1]/main/div[5]/div/div/div[2]/section[2]/div[3]/a

By contrast, this is my hand-written XPath:

//a[substring(@href, string-length(@href) - 4) = '.epub'][1]

(translated to english; the first a element with the href attribute ending in .epub)

Or even more simply:

//a[contains(@href, '.epub')][1]

If you compare the auto-generated XPaths with one that's been hand-written based on a human understanding, the superiority of a hand-written one is obvious: it can home in on what is actually the essential identifying markers of the element you want, because a human author is in a position to understand what the element is actually doing, and can avoid relying on other details that are irrelevant to the element's function.

Whereas because the auto-generated XPaths are created without the benefit of knowing what the a is even for, they take the approach of specifying a long rambling path that leads step by step through all the container elements in the page, to reach your final destination. Of course it's so much more likely that those long paths will be invalidated any time the web designers at the Internet Archive make a tiny change to the page layouts; when that happens, the auto-generated XPath will start returning an empty set, but a hand-written XPath is likely to continue to work.

回复 原文
梦境 2024-09-12 01:32:09

Google Chrome 提供了一个名为“Chrome DevTools”的开箱即用的内置调试工具，其中包括方便的功能，可以评估或验证 XPath/CSS 选择器，无需任何第三方扩展。

这可以通过两种方法来完成：

使用 Elements 面板内的搜索功能来评估 XPath/CSS 选择器并突出显示 DOM 中的匹配节点。
在控制台面板中执行标记 $x("some_xpath") 或 $$("css-selectors")，这将进行评估和验证。

从 Elements 面板

  1. 按 F12 打开 Chrome DevTools。

  2. 默认情况下应打开元素面板。

  3. 按 Ctrl + F 可在面板中启用 DOM 搜索。

  4. 输入 XPath 或 CSS 选择器进行评估。

  5. 如果有匹配的元素，它们将在 DOM 中突出显示。
    但是，如果 DOM 中存在匹配的字符串，它们也将被视为有效结果。例如，CSS 选择器标头应匹配包含单词标头的所有内容（内联 CSS、脚本等），而不是仅匹配元素。

输入图片此处说明

从控制台面板

  1. 按 F12 打开 Chrome 开发工具。

  2. 切换到控制台面板。

  3. 输入 XPath（例如 $x(".//header")）来评估和验证。

  4. 输入 CSS 选择器，例如 $$("header") 来评估和验证。

  5. 检查控制台执行返回的结果。

如果元素匹配，它们将在列表中返回。否则将显示空列表 [ ]。

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

如果 XPath 或 CSS 选择器无效，则会以红色文本显示异常。例如：

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.

Google Chrome provides a built-in debugging tool called "Chrome DevTools" out of the box, which includes a handy feature that can evaluate or validate XPath/CSS selectors without any third-party extensions.

This can be done by two approaches:

Use the search function inside Elements panel to evaluate XPath/CSS selectors and highlight matching nodes in the DOM.
Execute tokens $x("some_xpath") or $$("css-selectors") in Console panel, which will both evaluate and validate.

From Elements panel

  1. Press F12 to open up Chrome DevTools.

  2. Elements panel should be opened by default.

  3. Press Ctrl + F to enable DOM searching in the panel.

  4. Type in XPath or CSS selectors to evaluate.

  5. If there are matched elements, they will be highlighted in DOM.
    However, if there are matching strings inside DOM, they will be considered as valid results as well. For example, CSS selector header should match everything (inline CSS, scripts etc.) that contains the word header, instead of match only elements.

enter image description here

From Console panel

  1. Press F12 to open up Chrome DevTools.

  2. Switch to Console panel.

  3. Type in XPath like $x(".//header") to evaluate and validate.

  4. Type in CSS selectors like $$("header") to evaluate and validate.

  5. Check results returned from console execution.

If elements are matched, they will be returned in a list. Otherwise an empty list [ ] is shown.

$x(".//article")
[<article class="unit-article layout-post">…</article>]

$x(".//not-a-tag")
[ ]

If the XPath or CSS selector is invalid, an exception will be shown in red text. For example:

$x(".//header/")
SyntaxError: Failed to execute 'evaluate' on 'Document': The string './/header/' is not a valid XPath expression.

$("header[id=]")
SyntaxError: Failed to execute 'querySelectorAll' on 'Document': 'header[id=]' is not a valid selector.
回复 原文
枕头说它不想醒 2024-09-12 01:32:09

现在 Chrome 中不需要扩展。右键单击您想要 Xpath 的任何元素，然后单击“检查元素”，然后再次在检查器中，右键单击元素并单击“复制 Xpath”。

No extension needed in chrome now. Right click on any element you want xpath for and click on "Inspect Element" and then again inside the Inspector, right click on element and click on "Copy Xpath".

回复 原文
挖鼻大婶 2024-09-12 01:32:09

按Cntl + Shift + C
通过单击选择您想要获取其 XPath 的元素
右键单击控制台中突出显示的部分
复制 -> 复制 XPath

在此处输入图像描述

press Cntl + Shift + C
select the element you wish to get its XPath by clicking on it
right click on the highlighted part in the console
copy -> copy XPath

enter image description here

回复 原文
帥小哥 2024-09-12 01:32:09

让我们告诉您一个查找任何元素的 xpath 的简单公式：

1- 在浏览器中打开站点

2- 选择元素并右键单击它

3- 单击检查元素选项

4- 右键单击​​选定的 html

5- 选择复制 xpath 的选项 使用它无论您在哪里需要，

此视频链接都会对您有所帮助。
http://screencast.com/t/afXsaQXru

注意：对于 xpath 的高级选项，您必须了解 html 的正则表达式或模式。

Let tell you a simple formula to find xpath of any element:

1- Open site in browser

2- Select element and right click on it

3- Click inspect element option

4- Right click on selected html

5- choose option to copy xpath Use it where ever you need it

This video link will be helpful for you.
http://screencast.com/t/afXsaQXru

Note: For advance options of xpath you must know regex or pattern of your html.

回复 原文
七分※倦醒 2024-09-12 01:32:07

您可以在 Chrome javascript 控制台中使用 $x。无需扩展。

ex: $x("//img")

另外，Web 检查器中的搜索框将接受 xpath

You can use $x in the Chrome javascript console. No extensions needed.

ex: $x("//img")

Also the search box in the web inspector will accept xpath

回复 原文
猫弦 2024-09-12 01:32:07

右键单击节点 => “复制 XPath”

Right click on the node => "Copy XPath"

回复 原文
溺深海 2024-09-12 01:32:07

以上所有答案都是正确的，这里还有另一种截图方式。

从 Chrome 中：

  1. 右键单击您要查找 xpath 的项目上的“检查”
  2. 右键单击​​控制台上突出显示的区域。
  3. 转到复制 xpath

“在此处输入图像描述"

All above answers are correct here is another way with screenshot too.

From Chrome :

  1. Right click "inspect" on the item you are trying to find the xpath
  2. Right click on the highlighted area on the console.
  3. Go to Copy xpath

enter image description here

回复 原文
~没有更多了~

关于作者

演出会有结束

暂无简介

0 文章
0 评论
22 人气
发私信

相关话题

更多

热门标签

操作系统 程序设计 IT运维 Linux系统管理 JavaScript 服务器应用 solaris C/C++ PHP Shell BSD Vue.js aix Oracle Python HTML 系统管理 HTML5 CSS 前端
更多

推荐作者

不再见

文章 0 评论 0

真是无聊啊

文章 0 评论 0

樱娆

文章 0 评论 0

浅语花开

文章 0 评论 0

烛光

文章 0 评论 0

绻影浮沉

文章 0 评论 0

更多

友情链接

文江博客
    我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站，即表示您同意使用 Cookies 和您的相关数据。
    原文