Not able to assign ID to components of a UI-framework

I’m unable to assign id to components.
Case 1: – Assigning id to HTML component.
<h1 id="demo-h1">Demo Heading</h1>
Assigning id to HTML component

Case 2: – Assigning id to Framework’s component.

<h1>
    <ra-ui-static-text  id="demo-head" value="Producton order item details"></ra-ui-static-text>
</h1>

Assigning id to Framework’s component.

No ID assigned in second case.

Is there any way to assign id to components or how can I make my custom attribute and assign it to components?

The goal is to assign whether an id or any custom attribute specific to that component. It’s required in automation testing.

you need to modify the html of the component ra-ui-static-text and get the ID from an @Input from the parent, or you can directly hardcode the ID on the component ra-ui-static-text html.

Or you can try the query selector to get the nested element from inside the component, for example

document.querySelector('#demo-head > div > div.static-text-inner')

I think in your automation tests you have a method to run the below query and access any div inside the framework components!

Leave a Comment