HomeSelenium

Selenium – About ID locator in Detail

Selenium – About ID locator in Detail

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

In one of the previous articles, I have demonstrated the ID locator in a practical way.

In this article, I am going to explain more details about ID locator.

Let’s get started.

Selenium – About ID locator in Detail

Following are the different points which will help you in understanding the ID locators in detail:

1) id attribute value of the element in the HTML code will be used as an ID locator to find the UI element on the web page. Refer demonstrated the ID locator in a practical way.

2) ID locator is the highest preferred and first priority locator, as id attribute value is always unique. i.e. Elements should not have the same id attribute value as per standard development process. Hence it will be given the highest priority while locating the UI elements (Refer Locators Priority)

3) There are few cases where the id values are auto-generated and they keep on changing for the elements to be located.

These id attribute values should not be chosen as ID locator for locating the UI elements.

I will explain this in a practical way using the below steps:

i) Open facebook.com in Chrome Browser and click on ‘Forgot account?’ link as shown below:

ID locator in detail - Forgotten account link

 

 

 

 

 

 

 

 

ii) In the displayed ‘Find your account’ page, right click on the ‘Search’ button and click on ‘Inspect’ option as shown below:

ID locator in detail - Inspect Button

iii) Observe that the HTML code for the inspected ‘Search’ button got highlighted and the id attribute value is displayed as ‘u_0_2’ as shown below:

ID locator in detail - id value one

 

 

iv) Now refresh the ‘Find your account’ page multiple times and observe that the id attribute value of the keeps on changing as shown below (Earlier it was ‘u_0_2’ and now it is ‘u_0_5’):

ID locator in detail - id value twoWe cannot rely on this id attribute value for locating the UI elements as it keeps on changing. Hence we should not use the id attribute value as ID locator.

4)  There are few cases where the id values are duplicated for multiple UI elements, when the developers won’t follow any standard process.

We should not be using these duplicated id attribute values for locating the UI elements. Even, if we try to use, our ID locator will locate the First Button (i.e. Buttox X only).

I will explain this in a practical way using the below steps:

i) Open omayo.blogspot.com in Chrome Browser and scroll down to see the below buttons as shown below:

ID locator in detail - Two Buttons

 

 

 

 

 

 

 

ii)  Right-click and inspect ‘Button X’ and ‘Button Y’ separately and observe that both the buttons have the same id attribute value as shown below:

ID locator in detail - Button X - Same ID

 

 

 

 

 

 

 

 

 

 

 

 

 

iii) Right-click and inspect ‘Button X’ and ‘Button Y’ separately and observe that both the buttons have the same id attribute value (i.e. button9) as shown below:

ID locator in detail - Button X and Y - Same ID

iv) Try to locate using the id attribute value in Selenium IDE as shown below and observe that the first button ‘Button X’ will be located as shown below and we won’t be able to locate the second button ‘Button Y’ using this id attribute value as shown below:

ID locator in detail - Only One Located

 

 

Hence we cannot use id attribute value for locating the second UI Element. Since there is no way, we can talk to the developer to change the duplicate id value and give a unique value to this element. If the developer is not willing to change, you can use different locator other than ID to locate such UI elements having duplicate id values.

5) Another advantage of ID locator is that, even the location of the UI element changes on the web page, we can still locate the UI element using the same ID locator.

I will explain this in a practical way using the below steps:

i) Open omayo.blogspot.com in Chrome Browser and scroll down to see ‘Button2’ button and right click and select ‘Inspect’ option, and then copy the id attribute value of the Button from the highlighted HTML code as shown below:

ID locator in detail - Copy ID attribute value

ii) Open Selenium IDE and observe that we are able to locate the Button using the ID attribute value (i.e. ID locator) as shown below:

ID locator in detail - Able to locate - Position Oneiii) As a developer, let’s say I have moved the ‘Button2’ to a different location on the Web Page as shown below:

ID locator in detail - Moved the Button

 

 

 

 

 

 

 

 

 

iv) Again Open Selenium IDE after moving the button on the page as a developer and observe that we are able to locate the Button using the ID attribute value (i.e. ID locator) as shown below:

ID locator in detail - Still Locatable

Hence ID locator works even after the UI element changes its position on the web page.

6) Finally, the developers provide unique id attribute values to all the UI elements on the Web Page as a best practice or standard process.

If the developers follow the above standard, then it will easy for the Test Automation Engineers to use the id attribute value (i.e. ID Locator) to locate the UI element on the Web Pages.

If not, we can reach the developers to provide the id attribute values to the UI elements to make our job easy or to resolve any difficulties in locating any UI elements.

If the developers listen and provide unique id attributes values, this will make our job easy. Otherwise, we have to look into other locator types for locating the UI elements.

Hope this article has given you enough information on ID Locators and its different aspects.

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 🙂

About Me > Arun Motoori

On a mission to contribute to the Software Testing Community in all possible ways.

<<Previous Post                            << Complete Tutorial>>                              Next Post>>

If you like this article, share it on LinkedIn using the below button:

Comments (0)

Leave a Reply

Your email address will not be published. Required fields are marked *