How to handle Xpaths which changes dynamically every time? - selenium

Question

I am writing selenium web-driver script. The scenario of script is:
1) Login in www.yahoomail.com
2) Sign-in successfully.
3) Click on "Compose" button
4) Enter email ID in "To" Field.
5) Enter subject in "Subject Field.
6) Enter Email Body in "Text" Field.
7) Click on "Send" button.
Using Firepath, I have taken xpath of fields mentioned in "Compose" page.
But every time when I open Compose page, this xpaths changes dynamically.
Below is the script I am using:
WebDriver oYahoo = new FirefoxDriver();
oYahoo.get("http://www.yahoomail.com/");
oYahoo.manage().window().maximize();
oYahoo.findElement(By.xpath(".//*[#id='login-username']")).sendKeys("abcdefasdf#yahoo.com");
oYahoo.findElement(By.xpath(".//*[#id='login-passwd']")).sendKeys("sfgas234#123");
oYahoo.findElement(By.xpath(".//*[#id='login-signin']")).click();
oYahoo.findElement(By.xpath(".//*[#id='Compose']/button")).click();
oYahoo.findElement(By.xpath(".//*[#id='yui_3_16_0_1_1448364357109_2222']")).sendKeys("abcdefgh#gmail.com");
oYahoo.findElement(By.xpath(".//*[#id='subject-field']")).sendKeys("Hi This is my first automated mail");
oYahoo.findElement(By.xpath(".//*[#id='yui_3_16_0_1_1448364357109_1966']")).sendKeys("Hi This is my first automated mail");
oYahoo.findElement(By.xpath(".//*[#id='yui_3_16_0_1_1448364357109_2465']")).click();
oYahoo.quit();
What we can do so that it will take Xpath dynamically? Do we need to map those things in some class ? do we have to write any other class for "Compose" pop-up?
If "Yes" then how we can do it ?

Answer 1

Try to observe a common pattern that is repeated everytime. Either an id prefix or class prefix, anything.
Then use the following selector in your By.xpath(..) function.
//*[contains(#id,’your-common-pattern’)].

Answer 2

I worked on a project where class names where random each time the page was generated and the unique way i found to get those label/input/.. is i used the nth-child() function with the css selector. The thinking method is like : I want the 3rd input from the 2nd row of the 1st table.
checkout this fiddle to understand what i meant.
https://jsfiddle.net/8v150af1/