I need help in creating xpath where ID's are changing dynamic! Anyone can help me!!!

[Amit Kumar]

I need help in creating xpath for the input type field shown below. In this field all the id's are changing dynamically and there is nothning unique in this field. Kindly help me in identifying the xpath for this field:-

Can anyone help me in this...?

[darrell grainger]

That image is WAY too small for me. Until you post a larger image (higher resolution so I can zoom in on it), here are some tips:

If you put focus in the window with the DOM (the picture you provided) then press ESC, it will create a split screen. The upper half will be the DOM but the lower half will be a console window. See the attached image.

In the attached image I went to www.w3schools.com with Chrome, opened the developer tools, went to the Element tab, pressed ESC. I also typed in two examples. The first was:

document.querySelectorAll("#myAccordion")

this is an example of CSS. The "#myAccordion" is the CSS selector. You can try replacing it with different CSS selectors until you find one which works for you. What I would do is try a CSS selector, refresh the page (and get a different DOM), then try the same CSS selector again and see if it finds the same element. It should return one and only one element. If it returns two or more than it isn't a specific enough selector to use with WebDriver.

The second was:

$x("//*[@id='myAccordion']")

This is an XPath locator. The "//*[@id='myAccordion']" is the XPath locator. Just like the CSS selector, you can try replacing this with different XPath locators until you find the XPath which works for you. So when people start giving you examples, you can try them out on the web page you are testing. This is great if you cannot post a link to your actual web page. We give you examples, you try them on your web page.

All this works in Chrome. There is something similar in Firefox and Safari but like you, I use Chrome and know how to do it in Chrome.

Another tips specifically around dynamically generated element attributes, if you cannot find it because of the attributes on the element changing, how would you test the web page manually? Is there something you can see on the page that gives you the answer you are looking for? Is there something to click [findElement().click()]? Or something to highlight [findElement().getText()]? If there is, sometimes you can use XPath to find the element.

For example, on the www.w3schools.com home page there is a button that has the text "Try it Yourself »". So I can try entering:

$x("//a[contains(text(),'Try it Yourself')]")

when I do this it finds:

(4) [a.w3-button.w3-theme.w3-hover-green.w3-hover-shadow, a.w3-button.w3-theme.w3-hover-green.w3-hover-shadow, a.w3-button.w3-theme.w3-hover-green.w3-hover-shadow, a.w3-button.w3-theme.w3-hover-green.w3-hover-shadow]

This is 4 WebElements. I need to find 1 WebElement. So I cursor up and edit my XPath. I look at the page and realize the "Try it Yourself »" button I want is in the box entitled "HTML Example:". So what I would manually test is:

The button, which contains "Try it Yourself", right under "HTML Example:"

The XPath for this is:

$x("//h3[text()='HTML Example:']/../a[contains(text(),'Try it Yourself')]")

Manually, I would find the "HTML Example:" text then my eyes would scroll down to the button which contained "Try it Yourself". So "//h3[text()='HTML Example:']" finds the text above the button. It then go up one level in the DOM. Now I'm not 'looking' at the whole DOM. I'm just looking at a small snippet. So from there (not from //) I search for the button: "a[contains(text(), 'Try it Yourself')]" and this query returns 1 and one 1 WebElement.

Using visuals like this isn't as efficient and fast as using id or class attributes but it works if you cannot rely on id and class attributes.

A third thing you can do is add attributes to an element. If you have access to the source code and are comfortable making minor edits to it (or you can pair with a front end developer) then you can add attributes. This is actually great for maintaining the code as well. So an element like:

<a href="/html/tryit.asp?filename=tryhtml_default" target="_blank">Try it Yourself »</a>

might change to:

<a href="/html/tryit.asp?filename=tryhtml_default" target="_blank" qa-data="The Try it Yourself button in the HTML Example box">Try it Yourself »</a>

Now the WebDriver code would look for:

driver.findElement(By.cssSelector("[qa-data='The Try it Yourself button in the HTML Example box']").click();

Even if someone TOTALLY changes the DOM or switches to a different tech stack, it will still be easy to figure out what the WebDriver code is doing. It also means you can use CSS selectors for everything (fast and efficient).

[Amit Kumar]

Hi Darrell Grainger,

Thanks for the answering quickly. It helped me a lot. I created xpath using "Following::Attribute" approach and that worked for me. If I found any difficulty then will interrupt again.

Thanks for your time and providing the solutions.

Thanks

Amit