有没有办法在 Edge 浏览器中获取 xpath 和 css？答案

【问题标题】：Is there way to get xpath and css in Edge Browser?有没有办法在 Edge 浏览器中获取 xpath 和 css？
【发布时间】：2018-07-12 14:58:57
【问题描述】：

我有自动化测试脚本，它们在 Chrome 上运行良好。现在扩展了对 Edge 和 IE11 的支持。很少有测试脚本在 Edge 浏览器上失败。相同的定位器在 chrome 中工作正常，但在 Edge 中它们不工作。我们有什么方法可以在 Edge 浏览器中识别 xpath 和 css 之类的吗？

我只是想验证 xpath 是否与 Chrome 和边缘浏览器中的相同元素匹配。

我们有什么方法可以在 Edge 浏览器上验证 xpath 和 css，就像我们在 chrome 上使用控制台中的 $x() 和 $$() 进行验证一样？

【问题讨论】：

请提供相关 HTML、代码试验和错误堆栈跟踪
在使用 '$x' 的控制台上的 chrome 上，我们可以使用 xpath 。我们有什么方法可以在 Edge 浏览器上获取 xpath 和 CSS？
通过任何工具获得的 XPath 将是一个 absolute xpath，它将是 flaky 和 fragile 跨多个浏览器使用时。改为构造 relative xpath。
@DebanjanB 我已经构建了相对 xpath，它们在 chrome 和 firefox 中运行良好。
@DebanjanB 我的问题是“我们有没有办法在 Edge 浏览器上获取 xpath 和 CSS？”

标签： css selenium selenium-webdriver xpath microsoft-edge

【解决方案1】：

是和不是。

CSS 选择器

不，Edge 没有像其他浏览器那样使用开发工具复制 CSS 选择器的功能。

是的，如果您自己编写它们，您可以在控制台中使用$$() 来验证它们是否有效。

XPath

不，Edge 没有像其他浏览器那样使用开发工具复制 XPath 选择器的功能。

是的，您可以使用$x() 来测试它们是否有效。

【讨论】：

我们不应该总是编写自己的定位器吗？而不是依赖于一些第三方工具。
@cruisepandey 我同意。编写自己的定位器是获得良好、可靠的定位器的最佳方式，但是当您是新手时，能够使用这样的工具进行学习会很有帮助。 OP 表示他正在编写自己的定位器。我只是确认没有复制定位器的功能，但您可以验证它们。
@JeffC 和 Cruisepandey 我正在编写自己的定位器并在 chrome 浏览器的控制台中使用 $x() 和 $$() 进行验证。
@JeffC 感谢您的回复，但不幸的是，我们无法在 Edge 控制台中使用 CSS 的 $$() 和 xpath 的 $x() 来验证定位器。如果我错了，请纠正我。当前使用 Microsoft Edge 41.16299.371.0
我昨天测试了它，它在我的 Microsoft Edge 42.17134.1.0 中运行良好。

【解决方案2】：

根据您在 Edge Browser 中识别 xpath 和 css 的问题，内置 调试协议 即DevTools 协议 将满足您的需求。 Edge Browser 的 DevTools 协议 仍然是一个正在进行中的工作。

话虽如此，您仍然可以使用公开通用协议的Microsoft Edge Diagnostics Adapter。

Microsoft Edge 诊断适配器

Microsoft Edge Diagnostics Adapter 是一个协议适配器，它使工具能够使用Chrome DevTools Protocol 调试和诊断 Microsoft Edge。最新版本的 Microsoft Edge 诊断适配器适用于 Windows 10 - 14393 x64。

Installation and Usage

通过 npm 安装 Microsoft Edge 诊断适配器：
```
npm install edge-diagnostics-adapter
```
也可以从releases page of edge-diagnostics-adapter下载

本地安装后可以如下执行：

node /path/to/edge-diagnostics-adapter/out/src/edgeAdapter.js --port=9222 --servetools

View and Inspect Debuggable Targets

现在您可以导航到 localhost:9222 并查看所有可调试目标的列表。

Supported features and API

以下是受支持的 Chrome 调试器协议 API 列表：

Area        Method
----        ------
CSS         getComputedStyleForNode
CSS         getInlineStylesForNode
CSS         getMatchedStylesForNode
CSS         setPropertyText
CSS         getStyleSheetText
Debugger    canSetScriptSource
Debugger    disable
Debugger    enable
Debugger    evaluateOnCallFrame
Debugger    getScriptSource
Debugger    pause
Debugger    removeBreakpoint
Debugger    resume
Debugger    setBreakpointByUrl
Debugger    stepInto
Debugger    stepOut
Debugger    stepOver
DOM         getAttributes
DOM         getDocument
DOM         getOuterHTML
DOM         hideHighlight
DOM         highlightNode
DOM         pushNodeByPathToFrontend
DOM         pushNodesByBackendIdsToFrontend
DOM         querySelector
DOM         querySelectorAll
DOM         requestChildNodes
DOM         setInspectModeEnabled
Network     enable
Network     clearBrowserCache
Network     setCacheDisabled
Network     requestWillBeSent
Network     responseReceived
Network     getResponseBody
Page        canEmulate
Page        canScreencast
Page        deleteCookie
Page        enable
Page        getAnimationsPlaybackRate
Page        getCookies
Page        getNavigationHistory
Page        getResourceTree
Page        loadEventFired
Page        navigate
Page        reload
Page        setOverlayMessage
Page        setShowViewportSizeOnResize
Page        screencastFrameAck
Page        startRecordingFrames
Page        startScreencast
Page        stopRecordingFrames
Page        stopScreencast
Runtime     callFunctionOn
Runtime     enable
Runtime     evaluate
Runtime     getProperties

或者，您也可以下载protocol.json

【讨论】：