How to find two web objects with the same properti

Question

I have this piece of HTML codes

I need to find those 2 objects using JavaScript so I can click() it and write some text (Test Automation).

The issue is the id is dynamically generated, thus can't be used because it keeps changing everytime the page loads. Now because the id can't be used , those 2 objects looks the same without any unique identifier.

If I use this

document.querySelector("input.value-restored[type='text']");

Then it will just find the first one.

Any idea how can I hit both objects?

Thank you.

Answer 1

You can use [contains()] to construct a xpath for these elements. As I can see the parent span has a stable class name which you can use.

in JAVA

WebElement firstElement = driver.findelements(By.xpath("//span[contains(@class,'form-row-ui-calender-row')]/input[@type='text']")).get(0);
WebElement secondElement = driver.findelements(By.xpath("//span[contains(@class,'form-row-ui-calender-row')]/input[@type='text']")).get(1);

OR use indexing with your xpath.

WebElement firstElement = driver.findelements(By.xpath("//span[contains(@class,'form-row-ui-calender-row')]/input[@type='text'][1]"));
WebElement secondElement = driver.findelements(By.xpath("//span[contains(@class,'form-row-ui-calender-row')]/input[@type='text'][2]"));

Hope this helps.

Answer 2

In TestComplete, you can do this in the following way (within script):

  let obj = page.FindChildByXPath('//span[text()="Date to:"]/following-sibling::span/input[contains(@class, "ui-calendar-display")]', false);
  obj.Click();

If you are using Name Mapping, you can map this object quite reliably using the Required Children feature and access the object directly by a name from the mapping tree. Let me know if you need more details on how to create such mapping.

Answer 3

Try this way.

Use indexing after complete your xpath. Inside below xpath [2] indicates second input webelement. If there are multiple input tag is available then you should use of indexing.

//input[@class='ui-calendar-display widget has-change-tracker value-restored'][2]

If you want to locate first webelement then use below xpath.

//input[@class='ui-calendar-display widget has-change-tracker value-restored'][1]