Difference between Selenium getText() method and innerText property of an element

Question

I am trying to get the text of an element using Selenium getText() method and using innerText property of an element and compare the output.

HTML code:

<div>
    <h1>  DEF <p>  Demo   Shot   <span>   Taken   by   me    </span></p>   </h1>
</div>

Selenium code:

System.out.println(driver.findElement(By.xpath("//h1")).getText());
**Output:**
    DEF
    Demo Shot Taken by me
        
System.out.println(driver.findElement(By.xpath("//h1")).getAttribute("innerText"));
**Output:**
    DEF
    
    Demo Shot Taken by me

As per the Selenium doc:

getText() method gets the visible (i.e. not hidden by CSS) innerText of this element, including sub-elements, without any leading or trailing whitespace.

So, I expect both the outputs should be same. But in this case, the output of getText() and getAttribute("innerText") is completely different. Any reason ?

Answer 1

It does something different. Java implementation shows:

@Override
public String getAttribute(String name) {
  return stringValueOf(
    execute(DriverCommand.GET_ELEMENT_ATTRIBUTE(id, name))
      .getValue());
}

and

@Override
public String getText() {
  Response response = execute(DriverCommand.GET_ELEMENT_TEXT(id));
  return (String) response.getValue();
}

Going further, they are calling different W3C API, the first one calls: Get Element Attribute and the second one calls: Get Element Text.

I guess (not 100% sure) one level deeper they are calling different things in DOM. One calls .textContent while other calls .innerText.

Now it might be the same or not - depending on the browser type, selenium version and so on... ;)