In my code I can usually find an element by Xpath and perform actions like shown below
await I.fillField('//*[@id="edit-name"]','user1');
I am seeing the following error when I perform the following action. As the ID is dynamically created. Is there a recommended approach to tackle this type of elements?
await I.fillField('//*[@id="crmUiId_1"]','SomeTextHere');
Error:
**TypeError: Cannot read property '$$' of null
at findElements (node_modules/codeceptjs/lib/helper/Playwright.js:2087:18)
at Playwright._locate (node_modules/codeceptjs/lib/helper/Playwright.js:822:12)**
Associated HTML:
<div crm-ui-field="{name: 'caseTypeDetailForm.title', title: ts('Title')}" class="ng-isolate-scope crm-section"><div class="label">
<label crm-ui-for="caseTypeDetailForm.title" crm-depth="1" crm-ui-force-required="" for="crmUiId_1"><span ng-class="cssClasses"><span ng-transclude=""><span class="ng-binding ng-scope">Title</span></span><span crm-ui-visible="crmIsRequired" class="crm-marker ng-isolate-scope" title="This field is required." style="visibility: inherit;">*</span></span></label>
<!-- ngIf: help -->
</div>
<div class="content" ng-transclude="">
<input crm-ui-id="caseTypeDetailForm.title" type="text" name="title" ng-model="caseType.title" class="big crm-form-text ng-pristine ng-scope ng-empty ng-invalid ng-invalid-required ng-touched" required="" id="crmUiId_1">
</div>
<div class="clear"></div>
</div>
The issue here is actually the ID "crmUiId_1" is dynamically generated. Instead I tried xpath with ng-model="caseType.title" but it doesn't seem to be working either.
I would just make sure you wait for it:
Otherwise the page might still be loading.