如何在 Selenium 中获取 WebElement 的 HTML 代码

Posted 2023-02-26

【中文标题】如何在 Selenium 中获取 WebElement 的 HTML 代码

【英文标题】：How to get HTML code of a WebElement in Selenium

【发布时间】：2015-11-20 22:34:13

【问题描述】：

我是测试新手，所以如果我的问题听起来有点初级，我提前道歉。

我正在使用 Selenium 和 Java 编写测试。

我知道 webElement.getAttribute("innerhtml"); 给我带来了 innerHTML，例如下面的元素：

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" style="position: absolute; border-radius: 0px 0px 4px 4px;">
    <span class="ui-icon ui-icon-closethick">close</span>
</a>

它返回：

<span class="ui-icon ui-icon-closethick">close</span>

但我需要一些能够为我带来 WebElement "a" 内部属性的东西，如下所示：

href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button" style="position: absolute; border-radius: 0px 0px 4px 4px;"

【问题讨论】：

这是不是这个的副本：***.com/questions/21681897/…

【参考方案1】：

如果你想要元素本身的 HTML，你可以使用

webElement.getAttribute("outerHTML");

它将返回元素本身的 HTML 以及所有子元素。我不确定这是否正是你想要的。我认为没有办法只获取所选元素的 HTML。

【参考方案2】：

您可以读取innerHTML 属性来获取元素内容的来源，或者使用outerHTML 获取当前元素的来源。

示例：- 现在假设你的元素如下

<tr id="myRow"><td>A</td><td>B</td></tr>

内部元素输出

<td>A</td><td>B</td>

外部元素输出

<tr id="myRow"><td>A</td><td>B</td></tr>

现场示例：-

http://www.java2s.com/Tutorials/javascriptDemo/f/find_out_the_difference_between_innerhtml_and_outerhtml_in_javascript_example.htm

您将在下面找到根据不同绑定所需的语法。根据需要将innerHTML 更改为outerHTML。

Python：

element.get_attribute('innerHTML')

Java：

elem.getAttribute("innerHTML");

C#：

element.GetAttribute("innerHTML");

鲁比：

element.attribute("innerHTML")

JS：

element.getAttribute('innerHTML');

如果你想要整个页面的 HTML 使用下面的代码：-

driver.getPageSource();

【参考方案3】：

webElement.getAttribute("href");
webElement.getAttribute("class");
.
.
.

或全部获取：

Object[] attr = ((JavascriptExecutor)seleniumdriver).executeScript("return arguments[0].attributes);", webElement);

【讨论】：

但是如果我不知道该 Web 元素可能具有哪些属性怎么办？

编辑为包含获取所有参数的通用方法 - 它应该返回一个列表。

有什么方法不能使用jacascript？

它给了我这个错误：未知错误：超过最大调用堆栈大小

获取父级的innerHTML怎么样？

【参考方案4】：

如果我们有这个：

<a href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"
style="position: absolute; border-radius: 0px 0px 4px 4px;">
<span class="ui-icon ui-icon-closethick">close</span></a>

我们需要获取“a”的所有属性：

href="#" class="ui-dialog-titlebar-close ui-corner-all" role="button"
    style="position: absolute; border-radius: 0px 0px 4px 4px;"

我们可以使用这段代码：

webElement.getAttribute("outerHTML").split(">")[0]

其中 webElement 是“a”。

或者更准确地说：

String s = we.getAttribute("outerHTML");

s = s.substring(2, s.indexOf(">"));

【讨论】：

为什么它得到了-1 ???我自己发布了这个问题，这是我找到的完美答案

【参考方案5】：

尝试.getAttribute("innerHTML");function 以字符串形式提取源代码

示例代码：

String source = driver.findElement(By.xpath("/html/body/script[6]")).getAttribute("innerHTML");

【参考方案6】：

我通常会在我的测试用例中获取元素的来源来断言。请参阅以下代码，我正在测试它是否是单选项下拉菜单。

在下面的代码中，我首先获取了元素的外部源代码，并检查它是否包含“Multiple”关键字。

   @FindBy(xpath="//div[@class='col-lg-10']//div[1]//div[1]//div[2]//select[1]")
   WebElement element;
   Boolean status = element.getAttribute("outerHTML").contains("Multiple");
   Assert.assertTrue(!status, "User can select only one value at a time in drop down field.");

在我的例子中，它断言 select 标签的外部 HTML 中没有“Multiple”关键字，并且下拉列表是单选下拉列表。