When you start browser automation, you very quickly reach to problem of testability. How to uniquely identify page elements? You know that there is html id attribute, but when you inspect the page content, you have three possible scenarios:
- no id attribute at all
- id attribute on every element, but is value changes after every deploy
- id attributes are used, but not on all elements
As an excellent tester, you immediately go to developers and kindly ask them to start using id attribute. They answer is:
- do not have time for that
- what id value would you like me to use?
- gwt automatically dynamically populates id value
That problem bothered me from the first moment I did browser automation. Lets recap what is the problem.
"Element from DOM tree, that is part of browser automation, need to have id with unique predictable value on that page."
We need some kind of magic that will do that automatically (programmatically).
What if element already has id attribute?
That is great because developer put it on purpose to help us testers to do our job.
What if developer did not put that id attribute, but it was put automatically by framework, like gwt?
We could easily break web page functionality if we put our predictable unique value (short brainstorm session with Daro).
So I decided to use custom attribute. HTML5 standard helps us with data-* custom element attributes. I chose attribute name
data-testabilityid
What about predictable, unique value for that attribute?
I choose to put path that consists of node names up to document root.
Code needs to be triggered after page is fully loaded in browser or when there is change in DOM tree. I decided to try chrome extension. And in two days, with help of excellent resources that could be found using Google, I had working application.
Here is
source code along with automation code used for testing the extension.
Additional feature is to get id value. By using shit+left click, value will be printed in javascript console.
I tried to implement clipboard functionality, but without success (I tried all the know stackoverflow solutions). So this is first to do.
Of course, we need Firefox and IE>10 extensions as well.
Icon credit goes to:
http://www.iconarchive.com/artist/rud3boy.html
Labels: learn testing, testing tool
