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

Written by Timothy Joseph | Nov 9, 2020 4:00:00 PM

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

View full post