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 webElem

Answer 1

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(">"));

Answer 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");

Answer 3

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.

Answer 4

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();

Answer 5

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.

Answer 6

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

or to get them all:

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