The Best Way of the FindElement
As a test automation engineer, whenever we start to write an automation script, of course, our first job is to right-click on the web page that we want to test and to click inspect. Firstly you will come across the HTML structure. You can imagine this as a simple door that allows entering the crazy world of developers.
In order to start UI testing, we need to find every web-element that the developer embeds in the HTML structure. Sometimes this is not different than trying to find a way out of a maze.
In this case, we need some maps to find our direction like ID, CSS selector, and XPath. Here we can ask that cliche question:
Which one should we choose?
-Of course ID!
-Why?
-Because it is easily available and really fast
-But the CSS selector is also fast.
-I think that CSS or XPath is not reliable.
-You might be right about the absolute XPath. But you can use Relative XPath. In this case, the path starts from the middle of the HTML DOM structure which means it can search the element anywhere on the webpage.
-Sometimes you can face more complex HTML structures like iframes, in this case, to read ID is more simple.
-But ID is not going to be visible on all web pages for every element. On the other hand, you can not say there will be an element that will not have XPath.
…
You can find endless discussions like this on platforms like StackOverflow. Of course, locators have advantages and disadvantages. The important thing for me is not the locators which I use but “NoSuchElementException” which I do not face at the end of the day.
Developers are smart guys, and generally smart guys have messy kitchens. I mean, unfortunately, you do not always face to organized HTML structure in which every web-elements has a unique ID. In such a situation, the best way for me is XPath.
Writing complicated paths to find a few elements can even be fun. But if you have to find hundreds of web-elements and all you have is XPath, you will need a cheat sheet[1] or better.
What is “better”?
The answer is FireBug and FirePath!
What are the FireBug and FirePath?
We came to the main point after a long introduction:
Firebug integrates with Firefox to put a wealth of development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page…
FirePath is a Firebug extension that adds a development tool to edit, inspect and generate XPath expressions and CSS3 Selectors [2]
In this article, I want to mainly focus on firePath. Briefly, FirePath is a way of the best way to find web-elements by writing XPath or CSS.
How to use it?
When you install the FireBurg in your browser. You will see a bug icon (Picture 1). This provides a console that consists of HTML, CSS, script, DOM, Net, Cookies, and FirePath.
Whenever you click the button of FirePath, you can see the options of locators like XPath and CSS(Picture 2)
To get the path of any web-element you need to make only one step: only selection! I mean you click the selection button (you can see picture 3) after that you can read the path of an element which you want (picture 4)
You do not need to get lost in the HTML structure, while you drink your coffee you can find hundreds of web elements :) I think it makes writing an automation script more enjoyable.
Some tips of installation
Unfortunately, FireBug does not work with the current version of firefox. If you use already Firefox you have to uninstall and you have to install version 55.01 [3]
