Proof-read your Selenium WebElements

Selenium is a suite of software for automating browsers. It provides an API in different programming languages for automating browsers, by mimicking human actions with browser.  Locators are the part of browser automation testing. Locator tells Selenium which html element of a web page, Selenium has to perform action. These are the following locator strategies included in Selenium.

Locator Strategies-

  • ClassName
  • Css Selectors
  • ID
  • Link Text
  • Partial Link Text
  • Tag Name
  • Xpath

Selecting the correct and good locators, increases the robustness of your automation script. Good locators are –

  • Unique
  • Descriptive
  • Unlikely to change

Always prefer to access the elements using IDs and Classes, and if you have to specifically traverse an element in the web page, Go for CSS Selector and Xpath. Sometimes it happens that we create our own Xpath and CSS selectors, and as a human it does not always happen that we have create a correct CSS selector or Xpath.

Verifying the Locators

So how about verifying your locators before putting them in to your script. I have found a Firefox Add-on i.e. “FireFinder” using which it is possible and quite easy. I assume that you already have Firebug installed in your Firefox browser. Following are the instructions to install and use this add-on-

  • Open your installed Firefox browser and search for “FireFinder” add-on, as soon as you will reach to the FIreFinder add-on screen you see something like below:FireFinder_Installationpage
  • After installation, Firefox will ask for restarting the browser. After restarting the browser you can see that there is a FireFinder option in your FireBug toolbar.FireFinder_Toolbar
  • Now your browser is ready to use the Add-on. I will create a CSS Selector manually for Gmail Email Id field and verify the CSS Selector.
  • After inspecting the Gmail Email id field, I found that id for the Email field is “Email”. So I will create a CSS selector i.e. “input[id=’Email’]”. Now verify this selector by entering it in FIreFinderFireFinder_Highlighting

So this is how we can validate our customized CSS Selector and Xpath, even before executing our automation scripts. This will reduce the time spent in creating the locators and give confidence to our automation scripts.

I hope this has helped you in understanding the locators in Selenium. Your comments and feedback is most welcome. 🙂