I am currently working on automating a web form using Selenium and VBA. The form includes a search box that generates an autogenerated list when a value is entered. While I can successfully input a value into the search box and trigger the javascript to create the list, the issue arises with the dynamic ID value assigned to the list each time. I believe utilizing Xpath search may be the solution to obtaining the ID, but I'm struggling to implement it accurately.
The following code snippet executes the autocomplete feature to generate a dynamic list with "121312" as the search value, limiting the list to contain only one item. Therefore, we need to extract the value at the 0 index from the auto-generated list.
$('.ui-autocomplete-input').slice(20,21).val("121312").autocomplete('search')This code correctly populates the cell with the value from the autogenerated list. However, the challenge lies in handling the changing number after "ui-id-". This number varies each time and needs to be dynamically found.
$('#ui-id-6.ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()Referencing the HTML inspection below where the ID has been highlighted in blue, it is evident that everything except the number remains constant. I've been grappling with this issue for several days now, so any assistance would be greatly appreciated!
I suspect that leveraging Xpath could automatically detect the value to be clicked. However, I am not well-versed in Xpath, and copying the Xpath directly results in a specific ID value that changes every time.
Here are two examples of Xpath copied from inspection: `/html/body/ul[21]/li[14]/div //*[@id="ui-id-1855"] //*[@id="ui-id-563"] /html/body/ul[31]`
UPDATE
Following Michael M's suggestion, I have observed some intriguing outcomes.
It was necessary to include the ID search at the beginning of the CSS selector.
$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()Although this approach works, it seems to only function on the first entry box, which puzzles me.
https://i.sstatic.net/4oJBo.png
The initial entry box operated flawlessly. The search initiated, allowing me to enter the desired value into the box using
`$('[id^="ui-id-"].ui-menu.ui-widget.ui-widget-content.ui-autocomplete.ui-front').children().first().click()`Image illustrating the executed JavaScript https://i.sstatic.net/yQWFt.png
The first two lines performed perfectly, while the third line represents the search on the second box. Surprisingly, the fourth line failed to input the searched value, leaving me puzzled.