Adaptations for better UI Test Automation #1843
Description
Summary
To avoid instability in test automation scripts running on the Design System UI, the best solution involves ensuring the component can be successfully steered via a simple value change on the underlying DOM element, adjusting the component's logic to listen for the DOM's native change event or by implementing the ControlValueAccessor interface correctly.
Use Case
When automating below Input type controls, there are challenges seen as :
Data cannot be directly entered into the Input Field using Automation tool
While automating the script, it requires to use ‘SENDKEYS’ , 'TEXTINPUT' functions or ‘UserSimulation’ property on the field control to ensure the input is sent as keyboard commands to the application using the automation tool.
This causes instability in script execution and requires introducing Static Wait in the script thereby increasing the execution time.
Input Control Types that cause this issues are all the text input components in a Form grid form structure and those with autocomplete feature. These can be found here - FormGrid • Baloise Design System
Suggested Solution that can be applied from Dev end for Angular–
The Angular developers can address this by adjusting the component's logic to listen for the DOM's native change event or by implementing the ControlValueAccessor interface correctly.
Native change Event: Ensure the Angular component's change detection logic is hooked up to the native DOM change event, as this event is what automation tools standard Input should be able to fire or is often designed to work with.
Standard HTML Input: If possible, wrap the custom Angular logic around a standard, visible element and ensure all custom logic runs off of standard browser events (onchange, oninput, etc.) attached to that visible . This maximizes compatibility with external tools like TOSCA.
Suggested Solution that can be applied from Dev end for React –
The best solution involves ensuring the component can be successfully steered via a simple value change on the underlying DOM element.
Implement Forwarded Ref: Ensure the React component correctly uses forwardRef to expose the underlying native element.
Use Native Event Listeners: While React prefers its synthetic system, developers could potentially add a small, auxiliary, native JavaScript listener to the underlying DOM node to watch for direct DOM value changes and force a state update programmatically.
Preferred Solution
Automation tools should be able to steer such Input controls without using keyboard simulations and Static Wait in the script to avoid instability and speed up the process of automation and scripting.
Values entered in the fields are stored in properties Inner text/Value dynamically so that they can verified later by the automation tools by capturing those values.
Additional Information
No response
Will this feature introduce breaking changes?
None
Code of Conduct
- I agree to follow this project's Code of Conduct