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 cells and columns 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

@oscarlagatta Are you still using DevExtreme components? We're using the JQuery version and I'm really struggling to get playwright tests to not be flakey.

We're switching from Cypress which handled waiting, much, much better. Did I say "much?" 🙂

If so, have you found any good resources or tips/tricks when using DevExtreme components?

The comment about "Cypress which handle waiting much better..." Not knowing Cypress or having explicit/implicit expectations.... Might suggest many will assume PW doesn't. On the contrary it is baked into PW, generally have found it is fairly robust... Might seem Cypress handles it better because one must code it explicitly, but not sure, just not familiar with it. Then again question would come back how good are the locators used...? Or the HTML emitted just a sea of generic "<div>div><div>" with the necessary class properties. Might be great for devs to create stuff but terrible for testability with out test-ids...? And no comment how PW's recorder works on the code...?