DevExtreme

Have you had a go at recording some tests and seeing how Playwright identifies the components?

Have a look through this page for best practice: https://playwright.dev/docs/best-practices

What issues do you have? Sometimes I used some JavaScript functions to access celos columna in grids or some complex components

thank you, basically the componnets won't let me add data-id attributes, or perhaps they will create the components dynamicall where it's difficult to assign an attribute, (eg. radio button group creates the radio buttons on the fly based on an array list of items) https://js.devexpress.com/Demos/WidgetsGallery/Demo/RadioGroup/Overview/Angular/Light/ and it creates; based on the selected radio button; an input checked with the selected option, not even a checked with state

I think developers can add datatest-id to most of the elements with this code [elementAttr]="{ datates-id: 'elementId'}"

<dx-radio-group [items]="priorities" [value]="priorities[1]" [disabled]="true" [elementAttr]="{ id: 'elementId'}" >

Too you can try to access by text or delete the random id and try to check how codegen access

Or worse case if you can't muck with the internals of the control from the devexpress, as i thnk there is more than one cat to skin.... No reason you can't do:

Not pretty but as a last resort this will get you to each respective control. From there at least if you have the immediate parent for the controls in question, you should have easy access to identify and have a deterministic way to get the control.

While that said now it matter if they have an open or closed dom model,... But worse case if you can't update the source for the control you have now have a generic way to handle all control in a standard way, You will probably want your own controls to wrap each of the DevExpress for: dx-text dx-options dx-link ...

thank you so much great views in your comments

the dx-radio-group generates the items, and the elementId not sure where to get it from

but will figure it out, as it's not an actual radio, it's a hidden input with its value

For dx-radio-group is generated in parent element, so you can chain after to find by text.

thanks @apis3445