如何使用 Selenium WebDriver 获取 Inspect Element 代码

Posted 2023-02-23

【中文标题】如何使用 Selenium WebDriver 获取 Inspect Element 代码

【英文标题】：How to get Inspect Element code using Selenium WebDriver

【发布时间】：2014-12-06 01:04:54

【问题描述】：

我正在使用 Firefox 浏览器在 selenium 中工作。

查看源代码 (CTRL+U) 中显示的 html 代码与我在 Firefox 中检查元素时看到的 html 代码不同。

当我运行driver.getPageSource() 时，我只获得查看源代码 (CTRL + U)。

有什么方法可以访问检查元素代码而不是查看源代码？

【问题讨论】：

Get HTML Source of WebElement in Selenium WebDriver (Python) 的可能重复项

【参考方案1】：

通过查看源代码（即使用ctrl + U）显示的标记与通过Inspector 显示的标记之间存在一些根本区别即使用 ctrl + shift + I.

这两种方法都是两种不同的浏览器功能，允许用户查看网页的 HTML。但是，主要区别在于 查看源代码 显示了从 Web 服务器（应用程序服务器）传递到浏览器的 HTML。其中，Inspect element 是一个 Developer Tool，例如Chrome DevTools 查看DOM Tree 在浏览器应用错误更正后和任何 javascript 操作 DOM 后的状态。其中一些活动可能包括：

浏览器的 HTML 错误更正 浏览器的 HTML 规范化 通过 Javascript 操作 DOM

简而言之，使用查看源代码，您将观察到 Javascript 而不是 HTML。 HTML 错误可能会在 Inspect Elements 工具中得到纠正。举个例子：

在查看源代码中你可能会观察到：

<h1>The title</h2>

而通过 Inspect Element 可以更正为：

<h1>The title</h1>

getPageSource() 总是返回通过查看源代码获得的标记。

【参考方案2】：

我认为您的问题已得到回答here。

查看源代码 html 是服务器发送的内容。我认为它是编译时 html，或者 DOM 的初始状态。

Inspect Element html 可能已由 ajax 响应或 javascript 更新，因此不一定相同。我认为它是运行时 html，或 DOM 的当前状态。

GetAttribute() 方法查询当前 DOM 元素状态。可以直接返回特定的html属性值

webElement.GetAttribute("class")

或者获取整个 html 字符串。

webElement.GetAttribute("innerHTML")

【讨论】：

如果webElement 是动态生成的并且在DOM（检查元素）中而不是源中怎么办？我们如何才能到达元素本身？

这应该没什么区别。 GetAttribute() 方法适用于 DOM 中的任何内容。 HTML 是描述 DOM 的语言，因此当前的 HTML 会告诉您当前的 DOM 是什么。我编辑了答案以反映这一点。

我也遇到了同样的问题，页面只出现了简单的页面。我只能在检查器中看到的高级代码。有没有人设法解决这个问题？