Python Automation Testing – innerText vs textContent

This is part of the Python Automation Testing blog series. You can review the code from this article on the Python Automation Git repo.

Some time ago, I had to write some tests for an Ionic app. While writing them I found something strange happening on the element text assertions. Some of them were failing even though they seemed ok!

In the following article, I’ll tell the story of what happened and why it is very important to “read the manual”.

Get the Element Text

There are several ways you can get the element text. Below I describe how to do so in Selenium Python:

element.text
element.get_property('innerText')
element.get_property('textContent')

According to the documentation:

• element.text returns the text displayed in the element.
• element.get_property('innerText') returns the element’s property value, 'innerText' in this case.
• element.get_property('textContent') also returns the element’s property value, 'textContent' in this case.

So, we have three ways of getting the text from an element using Selenium. This is good… Or is it?

What happens if these three return different values and, to make things even more complicated, what happens if different browsers return different values for the same method? Furthermore, we didn’t take into the equation the most important variable – “that the user sees”.

The Browsers

In this section we’ll put everything discussed above into practice, and see what happens in each case for the 5 major browsers, both consumer and enterprise.

For the practical part, please follow these steps:

1. Clone the code from here
2. Start a simple python web server:
3. 1. Open a terminal and go to demo_app.html file located in /scripts folder
   2. Start a simple Python server by running: python -m http.server 9002
4. Follow the instructions from README.md to run the tests on all the browsers

NOTE: Each browser displays to the user: MODUS CREATE

Table 1: Results of described methods for each browser

Even though each browser displays the same thing to the user, after analyzing the results, we can see major inconsistencies between the three methods under discussion. With further analysis, we discover that none of the methods can be used for all the environments, so a wrapper is needed to keep the consistency and properly validate the web element.

The Problem

Further investigation revealed the root cause of these inconsistencies. The element text value is Modus Create. The display value is MODUS CREATE and this happens because of a CSS style applied to the text: text-transform: uppercase;.

NEW RESEARCH: LEARN HOW DECISION-MAKERS ARE PRIORITIZING DIGITAL INITIATIVES IN 2024.

The inconsistency comes from how each browser applies the style to the element text and what values it assigns to the corresponding element properties.

After discovering that we cannot rely on consistency across all the environments, it is clear that we have to be more careful when writing tests that validate the style.

The Solution

There are several ways I’ve tried to address these kinds of issues, and I’ve found this method the most reliable:
Wrapping Selenium implementation with code to address these inconsistencies, thus creating a CustomWebdriver that overrides native methods to your needs. This can be found in the same repo under /webdriver folder, where I override the click, clear and send_keys methods to be consistent on an Ionic Hybrid application for both iOS and Android devices.

However,these wrappers hardly work in different projects as each has its own particularities, variables, requirements and implementation. Providing a general valid implementation cannot be achieved and particular work on each project is needed.

Conclusion

Testing web applications in multiple environments can be tricky. Since consistency is the key of a successful app, we have to pay more attention to the details that make the difference. This process can be time consuming and stressful, but at the end of the day, if you care about quality, it pays off.

I hope I have persuaded you to walk my path and enjoy good quality automation with Python. Stay tuned for more awesome Python automation testing posts.

¹ Note: Since I am using a MacBook, I used BrowserStack services to test on Edge and IE11.