Having issues with the components developed by DevExpress called DevExtreme. Would anyone know how to use Playwright or best practices using these UI components ? https://js.devexpress.com/Overview/Angular/ as it's difficult to fine a common approach, or use a data-id attribute.
This thread is trying to answer question "No question provided in the thread."
Have a look through this page for best practice: https://playwright.dev/docs/best-practices
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
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:
<div data-test-id='...'> <dx-radio-group [items]="priorities" [value]="priorities[1]" [disabled]="true" [elementAttr]="{ id: 'elementId'}" > </div>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 ...
@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...?
Rayrun is a community for QA engineers. I am constantly looking for new ways to add value to people learning Playwright and other browser automation frameworks. If you have feedback, email [email protected].