Get the Id dynamic for doing a test

Product Forums Katalon Recorder
1

Hi,

I’m trying to do a test on a page containing several div with a dynamic id.
I don’t know how to do the test based on the dynamic Id.

When I tried that:
Command: asertText
Target: //div[@id='mat-menu-panel-53']/div/span[2]/span/ux-dropdown-button-item/div/button
Value: My Text

It’s correct and working but when the user reloads the page the Id changes (for instance 53 is replaced by 60) and the test can not be performed.
Is it possible to look the div with the Id starting by “mat-menu-panel”. Which command and target I have to use?

Thanks in advance for your help

2

Hi, please try the following target:

//div[starts-with(@id,'mat-menu-panel-')]/div/span[2]/span/ux-dropdown-button-item/div/button

3

@ThanhTo Thanks it’s working. Nevertheless when I call a form, I have several fields. But when I select the field in the Katalon Recorder tool (for the target), the target is id=ux-form-control-695730 and I obtained the same issue when the form is called again. The id will change. Do you know another way for calling correctly the target ?

4

@amadese

You can try to choose another locator for the target. Next to the target field there’s a drop-down where you can select available locators. You should choose a locator that doesn’t use ID.

5

@ThanhTo is it possible to work with another attribute “formcontrolname” of the field rather that the “id” ?

<div>
<ux-form-control _ngcontent-jol-c274="" formcontrolname="creditTypeId" _nghost-jol-c180="" class="ng-untouched ng-pristine ng-valid">
<select _ngcontent-jol-c180="" class="ux-form-control ux-form-control__custom-select ng-untouched ng-pristine ng-valid ng-star-inserted" id="ux-form-control-562878" data-e2e="ux-form-control-sel-rw" tabindex="0" aria-required="false" aria-invalid="false">
<option _ngcontent-jol-c180="" value="1" class="ng-star-inserted"> Operational credits </option>
<option _ngcontent-jol-c180="" value="2" class="ng-star-inserted"> Administrative credits </option>
</select>
</ux-form-control>
</div>

Thanks

6

Try something like this: //*[formcontrolname="creditTypeId"].

7

我一般是这样做的 //div[contains(@id,‘mat-menu-panel-’)]/div/span[2]/span/ux-dropdown-button-item/div/button