<<Previous Post << Complete Tutorial>> Next Post>>
As explained in one of the previous posts, Firebug and Firepath add-ons for locating and validating the UI elements on the page got deprecated and discontinued and we have to use alternative add-ons in place of Firebug and Firepath.
Though ChroPath is the best alternative of Firebug & Firepath in locating the UI elements and validating the XPath Expressions & CSS Selectors, we can also use the default Chrome Dev Tools for validating the XPath Expressions and CSS Selectors
In this article, I am going to practically demonstrate validating XPath Expressions and CSS Selectors using the default Chrome Dev Tools.
Let’s get started.
Selenium Locators – Default Chrome Dev Tools for validating XPath Expressions and CSS Selectors
Follow the below steps for using the default Chrome Dev Tools for validating the XPath Expressions and CSS Selectors:
1) Open any application say http://omayo.blogspot.com/ in the chrome browser as shown below:
2) Right-click on any UI element on the page say ‘Button2’ button and select ‘Inspect’ option as shown below:
3) HTML code related to the inspected button will be highlighted under the ‘Elements’ tab of default Chrome Dev Tools as shown below:
4) Click on the above-highlighted HTML code to make sure the Elements section is in focus, press ‘Control + F’ keyboard keys and observe that the ‘Find by string, selector or XPath’ text field will be displayed at the bottom as shown below:
5) By looking at the above-highlighted HTML code of the inspected button, let’s create an XPath Expression for locating the ‘Button2’ button say //button[@id=’but2′]
Note: If you are new to manual creation of XPath Expressions, you can start learning about XPath Expressions from scratch in this tutorial from here: What is XPath?
Enter the above-created XPath Expression into the text field and press ‘Enter’ keyboard key and observe that the HTML code and UI element related to the executed XPath Expression will be highlighted as shown below:
6) In a similar way, by looking at the above-highlighted HTML code of the inspected button, let’s create a CSS Selector for locating the ‘Button2’ button say button[id=’but2′]
Note: If you are new to manual creation of CSS Selectors, you can start learning about CSS Selectors from scratch in this tutorial from here: What is a CSS Selector?
Enter the above-created CSS Selector into the text field and press ‘Enter’ keyboard key and observe that the HTML code and UI element related to the executed CSS Selector will be highlighted as shown below:
Here concludes this article.
In the next article, I will explain a different alternative for Firebug and Firepath.
Next Steps:
- > To learn more about Selenium, continue to the next post (Click on Next Post link below)
- > Check complete Selenium Tutorial Contents here (Click here)
Please leave your questions/comments/feedback below.
Happy Learning ?
On a mission to contribute to the Software Testing Community in all possible ways.
<<Previous Post << Complete Tutorial>> Next Post>>