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.textreturns 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”.
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:
- Clone the code from here
- Start a simple python web server:
- Open a terminal and go to demo_app.html file located in /scripts folder
- Start a simple Python server by running:
python -m http.server 9002
- Follow the instructions from README.md to run the tests on all the browsers
NOTE: Each browser displays to the user:
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.
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:
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.
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.
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.
1 Note: Since I am using a MacBook, I used BrowserStack services to test on Edge and IE11.