How to get Inspect Element code using Selenium WebDriver

Question

I'm working in selenium with Firefox browser.

The Html code shown in View Source (CTRL+U) is different from the html code i see when inspecting the elements in Firefox.

When i run the driver.getPageSource() i only get the View source (CTRL + U) codes.

Is there is any way to access the Inspect element code instead of View source code?

Phoebe

possible duplicate of Get HTML Source of WebElement in Selenium WebDriver (Python) – Ardolino

Answer 1

I think your question is answered here.

The View Source html is what is sent by the server. I think of it as compile time html, or the initial state of the DOM.

The Inspect Element html could have been updated by ajax responses or javascript so will not necessarily be the same. I think of it as runtime html, or the current state of the DOM.

The GetAttribute() method queries the current DOM element state. You can return a particular html attribute value directly

webElement.GetAttribute("class")

or get the whole html string.

webElement.GetAttribute("innerHTML")

Immensity

What if webElement is dynamically generated and in the DOM (inspect element) but not the source? How can we get to the element itself? – Mere

That should make no difference. The GetAttribute() method works with whatever is in the DOM. The HTML is the language that describes the DOM, so current HTML is tells you what the current DOM is. I edited the answer to reflect this. – Immensity

I'm also having the same problem, the page only appears the simple one. the advanced code I can only see in the inspector. Has anyone managed to solve this problem? – Anthracite

Answer 2

There are some fundamental difference between the markup shown through View Source i.e. using ctrl + U and the markup shown through Inspector i.e. using ctrl + shift + I.

Both the methods are two different browser features which allows users to look at the HTML of the webpage. However, the main difference is the View Source shows the HTML that was delivered from the web server (application server) to the browser. Where as, Inspect element is a Developer Tool e.g. Chrome DevTools to look at the state of the DOM Tree after the browser has applied its error correction and after any Javascript have manipulated the DOM. Some of those activities may include:

• HTML error correction by the browser
• HTML normalization by the browser
• DOM manipulation by Javascript

In short, using View Source you will observe the Javascript but not the HTML. The HTML errors may get corrected in the Inspect Elements tool. As an example:

• With in View Source you may observe:

  <h1>The title</h2>
  

• Whereas through Inspect Element that would have corrected as:

  <h1>The title</h1>
  

getPageSource() always returns the markup obtained through View Source.

Fascista