Get the Correct path when several elements in the DOM have the same ID

Dear Experts,

I’m trying to retrieve the correct path of my input element with the ID “im-input-number-budget”. But I don’t know exactly how to get the correct path because several id have the same value in the DOM.

When I’m using the ID of the input it’s not working because an element with the same id is defined higher in the dom:


There my html code:

<input-number _ngcontent-abn-c515="" formcontrolname="budget" label="Budget" id="im-input-number-budget" placeholder="" class="ng-valid ng-touched ng-dirty"><div class="row"><div class="col-2"><label euilabel="" euirequired="" for="im-input-number-budget" id="im-input-number-budget-label" aria-disabled="false" class="eui-label eui-label--required ng-star-inserted">Budget</label><!----><!----><button euibutton="" class="mat-tooltip-trigger eui-button eui-button--basic eui-button--icon-only eui-button--info eui-button--rounded eui-button--size-l eui-tooltip eui-tooltip--above eui-tooltip--arrows eui-tooltip--content-center" id="im-input-number-budget-tooltips" aria-disabled="false" data-e2e="eui-button" aria-describedby="cdk-describedby-message-32" cdk-describedby-host=""><span class="eui-button__container"><!----><span euiicon="" class="eui-icon eui-icon-question-circle" aria-disabled="false" role="img" aria-label="eUI Icon"></span></span></button><!----></div><div class="col-10"><input euiinputnumber="" min="0" placeholder="" aria-disabled="false" id="im-input-number-budget" type="eui-number" class="eui-input-number"><!----></div></div></input-number>

I would like to know how to get the path of an element with the id containing a specific text.

I tried that but it’s not working:

Could you help me please with that ?
Thanks in advance

Your concern when using “starts-with” is that you may get more than one element, as several of your id start with the same phrase, “im-input-number”.

If you have multiple input elements that start with “im-input-number”, then you will have to search for another tag that would differentiate the specific element to make the pathway unique, maybe like formcontrolname or class.

Maybe like:

//input[starts-with(@id,"im-input-number") and @formcontrolname="budget"]

//input[starts-with(@id,"im-input-number") and @class="eui-input-number"]

1 Like

This is not about starts-with or a failed XPATH.

@amadese Your problem is simple - the HTML is invalid.

You should tell the developer you cannot test invalid (i.e. broken, illegal) HTML because any result is therefore meaningless.

The ID attribute MUST BE UNIQUE

As you intimated, you have two elements with the same ID:

There are tricks to work around the problem, but should not do that because the page is broken from the start.

The responsible thing to do is to make a bug report.

For reference:

1 Like

Thanks, sure id should be normally unique into a page. But the issue is that our application uses EUI 13 - an additional platform for Angular - and id(s) are added automatically by the platform.

The following screenshot shows a sample test case built-in Katalon Recorder.

In 4th row, you can find a Target written as


This locator selects the 2nd <input> element with value attribute of empty string.


If your target HTML has 2 or element with id attribute of im-input-number-budget, and you want to select the 2nd one among others, then you can write


In the orignial post @amadeze wrote:

I find the Target is written correctly. I think that the xpath expression is valid against the HTML you provided. But you wrote it’s not working.

Then there must be some reason (other than xpath) that causes your test to fail.

I do not think that the duplicating ID value in the target HTML is not the cause of the test failure. There must be some other reason.

For example, the page takes long time to load and your test does not wait for it to load completely before type command is executed.