Building selenium testcases resilient to UI changes

Selenium tests use object locators to for testing websites. This is the most common way automation QA follow. But problem with this approach is all testcases fail if css object locator changes its name or id. OR sometime when framework is updated, we will have to change these locators. In some cases we have to change them to enhance to readability.

Every-time locators change test case scripts needs a change. Sometimes, because of lack of communication between QA and dev team , QA learn about this change after sometime with good time spent on analysis of the failure. Good amount of time will be spent for RCA and adds delay to release.

To address it we can try following approaches

1. we need to prepare map of UI page and its elements. Using githooks, if any page listed in map is change, inspect code change to detect UI components rename. Then notify related team either via email or open ticket against automation team to take quick action.
2. Try to build deliverable components name, if possible. For example pagenameComponentName, like LoginUserNameTxt.
3. Another solution is: https://docs.gitlab.com/ee/development/testing_guide/end_to_end/page_objects.html
4. A common map of page to components can be used by both UI and QA.

Demo code is here just to get point across. Solution for option #1

Please let know if there is another smarter way…