Software Development and QA Tips

Dev and QA Tips How To Get the HTML Source of WebElement in Selenium WebDriver Using Python?

How To Get the HTML Source of WebElement in Selenium WebDriver Using Python?

Selenium WebDriver | By Vakul Gotra | November 9, 2020

HTML is a web page design source code that contains multiple elements like text fields, radio buttons, checkboxes, dropdown, etc. The entire source code is simply referred as DOM (Document Object Model)

Get Page Source Code Using Selenium WebDriver Python

Assuming Python Selenium is already installed in your machine. There are few ways to get HTML source code of web elements. These are as below

1. The ‘page_source’ property is available in WebDriver class by which we can get the whole page source code. Below is the code for reference:
from selenium import webdriver
driver = webdriver.Safari() #you can use any of the desired browser

driver.implicitly_wait(5)
driver.get("https://www.facebook.com/")

# Get HTML source code
print(driver.page_source)
driver.close()
Output:

Run above code and it will print source code of whole Facebook login page

2. We can also use ‘innerHTML’ or ‘outerHTML’ attributes as well

Let’s talk about “email” address field on Facebook login page. It has the following HTML source code:

<input id="email" class="inputtext _55r1 _6luy" name="email" type="text" autofocus="1" placeholder="Email address or phone number">

Replace print(driver.page_source) from above code snippet and by following code

# Find 'email' address text field email_txt = driver.find_element_by_id("email")

# Get inner HTML from element with `get_attribute` method inner_html = email_txt.get_attribute('innerHTML') print(inner_html)

# Get outer HTML from element with `get_attribute` method outer_html = email_txt.get_attribute('outerHTML') print(outer_html)
Output:

innerHTML
# will not print any thing as there is no further inner tag available under this

outerHTML
# will print same source code as it used to include self tag

Generic e.g: Suppose we have below sample DOM for search element


 <form id="searchbox" method="get" action="http://xyz.com/index.php?
    <input type="hidden" name="controller" value="search" >
    <button type="submit" name="submit_search" >
 </form>

If we find element by id(searchbox), then

 
innerHTML will give result as:
<input type="hidden" name="controller" value="search">
<button type="submit" name="submit_search"/>

outerHTML will give result as:
<form id="searchbox" method="get" action="http://xyz.com/index.php?
   <input type="hidden" name="controller" value="search">
    <button type="submit" name="submit_search">
</form>

Difference between innerHTML & outerHTML

  • innerHTML – print source code by including tag
  • outerHTML – print source code by excluding tag

Disclaimer

This publication is for informational purposes only and nothing contained in it should be considered legal advice. We expressly disclaim any warranty or responsibility for damages arising out of this information and encourage you to consult with legal counsel regarding your specific needs. We do not undertake any duty to update previously posted materials.