How to find Element Locators using Chrome Extension in Testsigma
Before we get started, let’s understand what a Element Locator/UI identifier is.
An element locator is what we use to identify or “locate” an element(a button, a text field, link or anything displayed) on a web page. Element Locators are the HTML properties of these elements which tells the Testing tool(Selenium, Testsigma etc) about the web element it needs to interact with.
Locators can be a huge cost factor of test maintenance if the UI keeps changing. Hence, maintaining locators is critical.
A UI Identifier(or Element locator) can be:
- A single Attribute of the Element such as id, name, class name, placeholder, visible text etc
- Multiple Attributes of the Element if a single attribute doesn’t locate the element uniquely.
- It may also be Xpaths or a CSS Selector
Let us see how UI Identifiers can be created in Testsigma.
For those who are getting started with Automation testing, the most difficult part is to find unbreakable reliable Element locators of an Application. Testsigma provides a Chrome Extension that can inspect and record the element details automatically.
You could also manually inspect an element if you are familiar with HTML basics.
Let’s check the easier way to get the UI identifier details, using Testsigma’s Chrome extension.
You may store the UI identifiers while creating Test Steps or you may skip this part and create empty UI identifiers and fill the details later.
Let’s try the latter. In the create UI Identifier page, there is a link to add the extension to the Chrome browser as shown in the image.
The link, “Click here” takes you to Testsigma’s Extension page in Chrome web store.
Click on the “Add to chrome” button and Testsigma’s UI identifier Extension will be added to the Chrome browser. After adding the chrome extension, simply refresh Testsigma’s Create UI Identifier page.
The Create UI Identifier page will look like this:
Now that we have added the extension to automatically store Element locators, let us see how we can start using it.
Click the checkbox “Capture element details automatically using Testsigma’s Chrome Plugin”. Open a new tab of the browser and go to the webpage in which you want to capture the UI Identifier information(I’m using the OrangeHRM login page).
Now, if you move the cursor around the page, you will see a green highlighter around the elements as shown in the image below.
Now click on the element that we want to inspect. Then go back to Testsigma’s Create UI Identifier page, where u can see the details of the captured element.
The element details have been captured using Testsigma’s extension. Enter the name and screen name. Screen Name help keep Element locators organized for a particular page(particularly helpful in emulating the Page Object Model). Click on Save.
You may refer to this video that explains this process – Watch video
Now that we have recorded the UI identifiers automatically using the Chrome plugin, let us now see a few actions that can be recorded in addition to capturing the element details.
Here’s a list of Advanced Keyboard Controls and gestures available in Testsigma while capturing UI identifiers.
1. Mouse Over/Hover over
Press and hold Control key while moving from cursor from one element to the required element to capture the mouse over action for the required element.
2. Pause Recording temporarily
Press and hold Alt key while performing the actions in order to skip/pause recording the user actions temporarily. Once you are ready to resume the recording, simply depress the Alt key to resume.
3. Scroll page
No Actions necessary. While recording, scroll to the desired Element and perform the required action on the desired Element to record the scroll action as well as the Element interaction.
4. Key Press
No Actions necessary. While recording, you can simply press on common Keys such as Tab, Enter etc to record the key press actions as well.
5. Choose option from Select Dropdowns
While recording, if you want to select an option from a select(dropdown) field, you need to press and hold the Control key while clicking on the select field and then depress the Control key before clicking on your required option/item in the list.
6. Record click for Input boxes
If you are clicking on input fields such as username or password boxes and entering the required value in it, the click action is ignored by default and only the type action is captured (since capturing both the click and type action is unnecessary in case of most input fields). However, if you still want to record the click for input box, you can do so by pressing and holding the Control key while clicking on the input field.
Note: From the above given controls, option1, option 5, and option 6 will work while recording UI Identifiers as well.