What is UI Map in Selenium?

UI Map (User Interface Map) also termed as Object repository is a concept in Selenium for defining, storing, and serving UI elements of an application. It contains a set of ‘key-value’ pairs, where the key is an alias of the UI element, and a value is a locator. It can be defined in the very famous properties file or in a static class inside your project. To understand it even more clearly you need to understand what are Locators.

To perform any action we need locators of a UI element. Webdriver will perform any action based on the locators. For each and every action Webdriver (or any such tool) depends on these locators. If the Webdriver does not identify the locators, it simply throws an error as Locator / Element Not Found or Identified.

In order to make sure the Webdriver executes smoothly, we need to provide an accurate unique identifier/locators.

We need to keep all the locators related to one page or components (in case of single page applications) at one place where we can easily modify the locators / identifies if there are any UI changes in the application. It is the thumb rule for code reusability.

For a better understanding and code readability, we create such entity for every single page and capture all required the UI elements present on the page and use it as per needs. I need your attention when I say "capture all required the UI elements" because it can get really tiring when you try to create a map for every element in UI but not needed them for your code. This is also true in case of ever-changing elements at the beginning of the development of any project or component Or during the refactoring of the code. 

Here is an example of the UI Map for your reference in the form of a static class -

Now here is how the user will use the above UI Map -

To summarize, a UI Map has two significant advantages -

• Using a centralized location for UI objects instead of having them scattered throughout the script. This makes script maintenance more efficient.
• Cryptic HTML Identifiers and names can be given more human-readable names improving the readability of test scripts.

TIP: Although you can go a little bit more advanced than this and create an inner static class inside a page object class which will have the declaration & definition of your page objects. And it will serve as a UI Map for the actions and other member functions your page object class. And of course, you can use this concept at the component level as well.

It will be fun to attempt what I said above but then I will keep the above tip in a different blog for obvious reasons, otherwise, it will get too crowded here :)

I would love to hear what do you feel about this explanation. Please let me know your thoughts in the comment section below and I will reach you.