How to get HTML code of a WebElement in Selenium

Question

I am new at testing so my apologies in advance if my question sounds a bit primary.

I am using Selenium and Java to write a test.

I know that webElement.getAttribute("innerHTML"); brings me the innerHTML, for example for the element below:

<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>

it returns:

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

but I need something that brings me the inner attribute of WebElement "a", something like below:

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

Is this a duplicate of this: https://stackoverflow.com/questions/21681897/getting-all-attributes-from-an-iwebelement-with-selenium-webdriver — tdrury, Aug 26 '15 at 21:43

score 40 · Answer 1 · answered Aug 26 '15 at 23:31

If you want the HTML of the element itself, you can use

webElement.getAttribute("outerHTML");

It will return the HTML of the element itself plus all the children elements. I'm not sure if that's exactly what you want. I don't think there is a way to just get the HTML of the selected element only.

score 13 · Answer 2 · answered Sep 03 '17 at 07:17

You can read innerHTML attribute to get source of the content of the element or outerHTML for source with the current element.

Example :- Now suppose your Element is as below

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

Inner element Output

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

Outer element Output

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

Live Example :-

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

Below you will find the syntax which require as per different binding. Change the innerHTML to outerHTML as per required.

Python:

element.get_attribute('innerHTML')

Java:

elem.getAttribute("innerHTML");

C#:

element.GetAttribute("innerHTML");

Ruby:

element.attribute("innerHTML")

JS:

element.getAttribute('innerHTML');

If you want whole page HTML use below code :-

driver.getPageSource();

tdrury · Answer 3 · 2015-08-26T21:32:08.907

4

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

or to get them all:

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

edited Aug 26 '15 at 21:32

answered Aug 26 '15 at 19:06

tdrury

2,307
1
22
25

but what if I do not know what attributes that web element may have ? – LoveLovelyJava Aug 26 '15 at 19:10
edited to include generic method to get all arguments - it should return a List. – tdrury Aug 26 '15 at 19:21
any way that I can not use jacascript? – LoveLovelyJava Aug 26 '15 at 19:44
it is giving me this error: unknown error: Maximum call stack size exceeded – LoveLovelyJava Aug 26 '15 at 20:24
How about getting the innerHTML of the parent? – tdrury Aug 26 '15 at 21:30
Try assigning the Javascript output to an Object[] and see what happens. You shouldn't get a maximum call stack size error. – tdrury Aug 26 '15 at 21:31
The Javascript version is cute, but it has a misplaced closed paren that (for me, working in Chrome) caused : org.openqa.selenium.JavascriptException: javascript error: Unexpected token ')' The correct code is: String allAttributes = (String)((JavascriptExecutor)driver).executeScript("return arguments[0].attributes;", element); – Tihamer May 29 '20 at 17:19
Oops! I meant: ArrayList allAttributes = (ArrayList)((JavascriptExecutor)Common.driver).executeScript("return arguments[0].attributes;", element); – Tihamer May 29 '20 at 19:43

score 2 · Answer 4 · edited Jul 20 '17 at 11:50

2

Try .getAttribute("innerHTML");function to extract source in string form

Example code:

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

edited Jul 20 '17 at 11:50

Ripon Al Wasim

36,924
42
155
176

answered Aug 28 '15 at 10:21

fahad

389
2
12

score 2 · Answer 5 · answered Aug 28 '15 at 14:25

If we have this:

<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>

and we need to get all attributes of "a" which will be this:

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

We can use this code:

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

where webElement is "a".

Or more precisely:

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

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

Why on earth it got that -1 ??? I myself posted this question and this is the perfect answer that I found for it — LoveLovelyJava, Aug 28 '15 at 18:24

score 0 · Answer 6 · answered Jul 24 '19 at 18:02

I usually get a source of the element in my test cases to assert. See the following code in which I am testing whether or not it is a single-option dropdown.

In the following code, first I got the outer source code of the element and checked whether or not it is having "Multiple" keyword in it.

   @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.");

In my case, it asserted that there is no "Multiple" keyword in outer HTML of the select tag and dropdown is a single-selection dropdown.

How to get HTML code of a WebElement in Selenium

6 Answers6

Linked