Summary: Add the ability to assign a custom test ID to any component in Experience Builder so automated regression tools (e.g. Selenium, Playwright) can easily identify and interact with elements.
Problem: Currently, there is no straightforward way to hook into COTS components and buttons within Experience Builder for automated testing. Testers often need to write complex workarounds to locate elements, which increases maintenance effort and reduces test reliability.
Proposed Solution: Enable a property in the Experience Builder editor for each component (e.g., button, widget) to set a data-testid or similar attribute. Example in the built application’s HTML:
<button data-testid="Layer List button">Layer List</button>
User Stories:
As an editor of Experience Builder
When I select a component (e.g., a button)
Then I can assign a custom test ID to it
So that the ID remains consistent in the built application.
As a tester
When I set up automated regression tests
Then I can use the unique test ID to reliably locate elements
So that I can execute tests without complex workarounds.
Benefits:
- Simplifies automated testing setup.
- Improves test stability and maintainability.
- Makes managing large custom Experience Builder applications easier.
Although Experience Builder is delivered as a ready-to-use product, at its core it is still a web application. This means it can benefit from the same modern development and testing standards used across the industry. Assigning custom test IDs is a widely adopted best practice in frameworks like React, Angular, and Vue, allowing automated tests to remain stable even when UI layouts or styles change. By enabling this capability, Experience Builder would align with these standards, making it easier for teams to implement reliable, maintainable regression testing without resorting to fragile selectors or complex workarounds.
