399

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

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

4

18 回答 18

587

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

前任:$x("//img")

Web 检查器中的搜索框也将接受 xpath

于 2011-08-29T20:46:04.923 回答
294

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

于 2012-12-14T19:02:35.227 回答
122

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

从铬:

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

在此处输入图像描述

于 2017-02-12T22:44:03.820 回答
26

XPath Helper 扩展可以满足您的需要: https ://chrome.google.com/webstore/detail/hgimnogjllphhhkhlmebbmlgjoejdpjl

于 2011-05-15T07:20:51.410 回答
20

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

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

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

从元素面板

  1. 按 F12 打开 Chrome DevTools。

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

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

  4. 键入要评估的 XPath 或 CSS 选择器。

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

在此处输入图像描述

从控制台面板

  1. 按 F12 打开 Chrome DevTools。

  2. 切换到控制台面板。

  3. 输入 XPath 喜欢$x(".//header")评估和验证。

  4. 输入 CSS 选择器喜欢$$("header")评估和验证。

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

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

$x(".//article")
[<article class="unit-article layout-post">…&lt;/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.
于 2017-10-06T06:29:47.073 回答
14

chrome 现在不需要扩展。右键单击您想要 xpath 的任何元素,然后单击“Inspect Element”,然后再次在 Inspector 中,右键单击元素并单击“Copy Xpath”。

于 2013-04-27T13:12:07.970 回答
11

让我们告诉你一个简单的公式来查找任何元素的 xpath:

1-在浏览器中打开网站

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

3-单击检查元素选项

4-右键单击选定的html

5-选择复制xpath的选项在需要的地方使用它

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

注意:对于 xpath 的高级选项,您必须知道 html 的正则表达式或模式。

于 2015-11-03T06:47:17.003 回答
10

作为 chrome 的最新更新,您现在可以单击元素检查器中的任何元素并将 XPath 复制到剪贴板。

于 2012-06-18T16:45:01.633 回答
10

通过在控制台中突出显示的部分上单击它Cntl + Shift + C
来选择要获取的元素- >XPath
right click
copycopy XPath

在此处输入图像描述

于 2020-01-20T12:58:38.170 回答
9

xpathOnClick 有你要找的东西:https ://chrome.google.com/extensions/detail/ikbfbhbdjpjnalaooidkdbgjknhghhbo

不过请阅读评论,实际上需要单击三下才能获得 xpath。

于 2010-12-20T12:59:59.757 回答
9

例如,对于 Chrome:

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

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

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

绝对 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 元素。
于 2019-09-17T10:13:07.837 回答
6

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

于 2012-11-11T21:43:14.617 回答
4

在 Firefox 的 Firebug 中,您可以在检查元素后右键单击它,然后选择 Copy XPath。我无法让 ChromYQLip 顺利工作。

于 2010-08-27T18:10:49.597 回答
2

您可以尝试使用 Chrome Web 扩展TruePath,它在网页上右键单击动态生成相对 XPath,并将所有 XPath 显示为菜单项。

于 2019-12-02T03:41:41.473 回答
1

有点 OT,但可能有用:在 Mac Chrome 上,虽然您无法将 xpath 从 Dev 工具面板的搜索框中复制出来(而是将节点作为 HTML 复制),但您可以将文本拖放到外部编辑器中。

于 2012-03-30T15:43:00.903 回答
1

我尝试了几乎所有可用的扩展,并发现以下是最好的扩展之一。

ChroPath 扩展链接

就像 FirePath 一样,当您单击 Inspect 时,此扩展程序会直接为您提供 Xpath。

在此处输入图像描述

于 2018-05-09T13:49:36.950 回答
0

首先打开你的谷歌浏览器

并打开任何网站

并检查

于 2021-01-07T07:59:31.397 回答
-1

使用这个扩展,它会根据 id 或 class 生成 xpath,这可能是你想要使用的。

单击浏览器图标,面板显示在页面的右上角,然后单击开始检查,然后单击任何元素以获取您的 xpath。

XPath 生成器

于 2017-06-04T09:53:56.087 回答