Selenium IDE - Locating Strategies

---

---

Selenium IDE has multiple locating strategies which help to automate test cases. However, Selenium IDE can not identify elements on a web page by default. In order to locate elements, we would need the help of the locators like id, name, css, and xpath.

In addition to the above locators, the older versions of Selenium IDE supported other locators like DOM, and identifier, however, they are deprecated in the latest versions.

Example

Let us take an example of the below page, where we would enter the text Selenium beside the First Name: label. This can be achieved by first locating the elements using various locators.

Let us now discuss the identification of the input box on a web page shown in the below image. First, we would need to right click on the we bpage, and then click on the Inspect button in the Chrome browser. Then, the corresponding HTML code for the whole page would be visible. For investigating a single element on a page, we would need to click on the left upward arrow, available to the top of the visible HTML code as highlighted below.

Once we had clicked and pointed the arrow to the input box (highlighted in the below image), its HTML code was visible.

<input id="firstname" name="firstname" type="text" class="form-control valid" 
   placeholder="First Name" aria-invalid="false">

Features to locate Element in Selenium IDE

Once a test would be created after recording in Selenium IDE, we would be able to get the details of any particular step in that test, by clicking on it. If we would click on the dropdown in the Target field, we would observe that Selenium IDE while recording was successful in capturing all the other locator values for an element. In the below example, we had clicked on the fourth step, where the values of Command, Target, and Value fields were type, id=name, and Selenium respectively. In this step, other locator values like the name, css, and so on for that element were visible within the Target dropdown.

All the steps that we had performed on the application would be recorded in the Selenium IDE under the Command, Target, and Value fields with a REC button to the top right.

The portion highlighted in the below image depicts the Text Script Editor Panel in Selenium IDE. It comprises user interactions that are recorded in the form of test steps that are recorded while recording is enabled.

In order to locate an element automatically by Selenium IDE, we can use the Select target in page button.

Once clicked, it would give the user the option to Select an element, and based on that, its locator value will be generated automatically by Selenium IDE.

The corresponding locator value would be generated in the Target. Also, after which, if the Find target in page button is selected, the element whose locator value is generated, will be highlighted.

Please note that, the buttons - Find target in page, and Select target in page, would become enabled only if we have something in the Command field else they remain disabled as highlighted in the below image.

Locator - ID

The steps to locate the input box using id locator and then enter the text Selenium in Selenium IDE are listed below −

Step 1 − Click on the Selenium IDE extension visible on the browser after its installation.

Step 2 − Selenium IDE should be launched along with it, a welcome message should be displayed with the version of the tool. In the below image, the version installed is 3.17.2.

Along with this, it gives us the option to select what we would like to do with the tool, like Record a new test in a new project, Open an existing project, Create a new project, and Close Selenium IDE.

Also, a link with the text - the Selenium IDE project page is provided, which on clicking would land us to the Selenium Integrated Development Environment documentation page.

https://www.selenium.dev/selenium-ide/

Step 3 − Click on the Create a new project link, then enter a project name under the Please provide a name for your new project. Finally, we would click OK.

Step 4 − We would have the workspace ready in the Selenium IDE as shown in the below image.

Step 5 − Enter open in the Command field, and https://www.tutorialspoint.com/selenium/ in the Target field, to launch the application.

Step 6 − Enter type in the Command field, id=firstname in the Target field, and Selenium in the Value field. Please note, id=firstname is the locator value of the input box and Selenium is the value to be entered.

Step 7 − Enter close in the Command field to close the browser window.

Step 8 − Click on the three dots appearing at the left pane, then select the Rename option.

Step 9 − Enter a name, say Test3 under the Rename Test case field, then click on Rename. The entered name would appear on the left of Selenium IDE.

Step 10 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message Test3 completed successfully appeared under the Logs.

In the example above, we entered the text Selenium in the input box using the id locator beside the First Name: label which appeared under the Logs. Besides, we got a green tick beside the test case name - Test3 at the top, signifying a passed test.

Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green. In this way, we identified an element using the id locator.

Locator - Name

The steps to locate the input box using name locator and then enter the text Selenium in Selenium IDE are listed below −

Step 1 − Click on the second step created in the above example and enter type in the Command field, name=firstname in the Target field, and Selenium in the Value field. Please note, name=firstname is the locator value of the input box and Selenium is the value to be entered.

Step 2 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message Test3 completed successfully appeared under the Logs.

In the example above, we entered the text Selenium in the input box using the name locator beside the First Name: label which appeared under the Log. Besides, we got a green tick beside the test case name - Test3 at the top, signifying a passed test.

Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green. In this way, we had identified an element using the name locator.

Locator - CSS

The steps to locate the input box using css locator and then enter the text Selenium in Selenium IDE are listed below −

Step 1 − Click on the second step created in the above example and enter type in the Command field, css=input#firstname in the Target field, and Selenium in the Value field. Please note, css=input#firstname is the locator value of the input box and Selenium is the value to be entered.

Step 2 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message Test3 completed successfully appeared under the Logs.

In the example above, we entered the text Selenium in the input box using the css locator beside the First Name: label which appeared under the Log. Besides, we got a green tick beside the test case name - Test3 at the top, signifying a passed test.

Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green. In this way, we had identified an element using the css locator.

Locator - Xpath

The steps to locate the input box using xpath locator and then enter the text Selenium in Selenium IDE are listed below −

Step 1 − Click on the second step created in the above example and enter type in the Command field, xpath=//input[@id='firstname'] in the Target field, and Selenium in the Value field. Please note, xpath=//input[@id='firstname'] is the locator value of the input box and Selenium is the value to be entered.

Step 2 − Click on the Run all tests from the top, and wait for the test execution to complete. In our example, we would see Runs: 1, Failures: 0, and a green bar denoting the test ran successfully without any failures. Also, the message Test3 completed successfully appeared under the Logs.

In the example above, we entered the text Selenium in the input box using the xpath locator beside the First Name: label which appeared under the Log. Besides, we got a green tick beside the test case name - Test3 at the top, signifying a passed test.

Apart from that, all the test steps, along with the test case name turned green, reflecting a PASS for all the steps. All the steps which reflected under the Log tab, showed an OK in green. In this way, we had identified an element using the xpath locator.

This concludes our comprehensive take on the tutorial on Selenium IDE - Locating Strategies. We’ve started with describing an example and walked through the different locating strategies, and illustrating how to use them along with Selenium. This equips you with in-depth knowledge of the locating Strategies in Selenium IDE. It is wise to keep practicing what you’ve learned and exploring others relevant to Selenium to deepen your understanding and expand your horizons.