Adding IDs to UI elements for QA Test Automation

In an ideal world, each interactive element should have a unique ID that makes it easily discoverable when writing test automation, such as with Selenium in Python or our Javascript tests in https://github.com/zowe/zowe-install-packaging/ . Finding elements with relative paths can lead to fragile tests, such as

XP_LAUNCHBAR_CLOCK = f'{XP_LAUNCHBAR}/rs-com-launchbar-widget/div[3]/div[1]'

where success of the test relies on element location via class names, element index/position in an element array, or comparing other HTML attributes.

How to add new IDs to UI elements in App framework

The format is as follows:

{app-name}_ {component-name}_ {optional-element-name}_ {optional-number}

Note: ignore spaces after _ - Git markdown issue

For example, if I wanted to add an ID to the element that represents the icon in the Zowe Desktop (zlux-app-manager) widget tray to display my notifications, in my HTML template for that element I would add,

id="ZAP_DesktopHome_NotificationsIcon"

It is important to not duplicate ID's, otherwise tests may break. If similiar elements exist with no distinguishing quality other than their sheer quantity, append a number.