Hi,
I'm trying to automate Oracle Process Cloud Application testing using Playwright (Its is a Node.js library to automate Chromium and Firefox. Refer https://playwright.dev/). Since Oracle Process Cloud uses Oracle JET components and most of the attributes like ids are dynamic and classes are shared across multiple components, i'm having difficulty identifying individual elements using Playwright Element Selectors(refer https://playwright.dev/docs/selectors).
For eg:
<div data-bind="template: {name: $data.controlTemplate, data: $data, afterRender: $data.afterRender}, visible: !$data.properties.hide(), style: {'text-align' : $data.properties.formattedStyle().controlAlign}, css: $data.properties.formattedStyle().controlClassName + ' pcs-form__'+ $data.type +'--' + $data.properties.formattedStyle().theme" class="undefined pcs-form__CHECKBOX--undefined"><!-- ko with: properties --><div class="js-checkbox checkbox-control oj-checkboxset oj-component oj-checkboxset-single oj-choice-direction-column oj-form-control oj-component-initnode" data-bind="attr: {id: $parent.domIdPrefix + $parent.id, style: parsedStyle}, ojComponent: {component: 'ojCheckboxset',validators: $parent.validators,invalidComponentTracker: $parent.tracker,disabled: $parent.isDisabled() || $parent.isReadOnly(),value: $parent.checkboxValue,rawValue: $parent.rawValue,required: required}, handleEvents: $parent" id="bffe0333-5de5-e185-cde6-6ff13bd48452" style="" role="group"><div class="oj-checkboxset-wrapper"><span class="oj-choice-item oj-enabled" data-bind="attr: {id: $parent.domIdPrefix + $parent.id + '_check'}" id="bffe0333-5de5-e185-cde6-6ff13bd48452_check"><span class="oj-radiocheckbox-icon"><input data-bind="value: 'true', attr:{id: $parent.id + '_checked'}" type="checkbox" value="true" id="bffe0333-5de5-e185-cde6-6ff13bd48452_checked" class="oj-checkbox oj-component oj-enabled oj-component-initnode" data-oj-internal="" placeholder=""></span><!--oj-bind-if test='[[inlineHtml()]]'--><!--ko if:inlineHtml()--><!--/ko--><!--/oj-bind-if--><!--oj-bind-if test='[[!inlineHtml()]]'--><!--ko if:!inlineHtml()--><div class="oj-label oj-component oj-checkboxset-label"><div class="oj-label-group"><label data-bind="attr: {for: $parent.domIdPrefix + $parent.id, id: $parent.id + $parent.requiredLabel}, text: label(), style: {'color': formattedStyle().labelColor, 'font-size': formattedStyle().labelSize}" for="bffe0333-5de5-e185-cde6-6ff13bd48452" id="bffe0333-5de5-e185-cde6-6ff13bd48452function e(){if(0<arguments.length){if("function"===typeof f)f.apply(g.sb,arguments);else throw Error("Cannot write a value to a ko.computed unless you specify a 'write' option. If you wish to read the current value, don't pass any parameters.");return this}a.l.sc(e);(g.V||g.t&&e.Sa())&&e.U();return g.M}" class="oj-component-initnode">Checkbox</label></div></div><!--/ko--><!--/oj-bind-if--></span><help-icon data-bind="visible: help()!='' " params="msg: help" style="display: none; vertical-align: middle;"><a href="#" class="help-icon oj-label-help-icon-anchor oj-label-help-icon oj-component-icon oj-clickable-icon-nocontext" data-bind="attr:{'title': msg, id: linkId}, click: open,clickBubble: false" title="" id="f08d0929-7440-f527-5fb7-dd180f2c5083"></a><div style="display:none" data-bind="ojComponent:{component: 'ojPopup'}, attr: {id: popupId}" class="oj-popup oj-component oj-component-initnode" aria-hidden="true" id="ba7a10b7-41d9-3992-c040-0a460fef5315"><div class="oj-popup-content" role="presentation"><span data-bind="text: msg"></span></div></div></help-icon></div></div><!-- /ko --></div>
The above HTML snippet is for a checkbox with label Checkbox. I'm not able to select this form field due the dynamic nature of the element and it's attributes; and the label might be repeated elsewhere. I'm facing same problem with Radio Buttons and Checklist.
I need a way to identify such elements for performing a check, uncheck or click operation using Playwright.
Thanks in Advance!