Handling site generated element ID's

How to work with element with element ID's randomly generated by their host website.
If you have recorded a test on a page however upon execution noticed that a step failed due to an element not being located causing a timeout, this might be caused by randomly generated element ID's.
These ID's are generated each time the web page is loaded, making the locator strategy you have used while recording incorrect, causing a timeout while searching for the element during execution.
A good idea in cases like this would be to use a different locator strategy, for example, generalizing the XPATH so it will still locate that specific element without being dependent on that ID.
For the next example we will use the following site: And validate the visibility of the following element on the page:
Interacting with the image normally through the recorder will use the current ID the image has on the page:
The current XPATH used is: //*[@id='jq-1588579164847-0']/div/div/div/div/div/div/div[2] However, during the next execution the ID will change and the correct XPATH will become: //*[@id=‘jq-1588007662647-0’]/div/div/div/div/div/div/div[2]
And the step will fail due to timeout during execution.
A solution to this problem would be to to generalize the XPATH value to not require the specific ID and locate the element despite it.
In above example I have changed the XPATH to: //*[contains(@id,'jq')]/div/div/div/div/div/div/div[2] This will search for an element that contains 'jp' in it's ID instead of the specific ID generated by the page.
And now the element will be located during each execution.
The XPATH I used is not a rule, it is a suggestion. There are many ways to write a correct XPATH that will work on that specific page on that specific element, something like that might not work on other pages that will require a different kind of XPATH. Make sure to examine your page and create a correct XPATH that will work in your situation.