How to handle dynamic IDs in Selenium webdriver using C#

Question

I am automating our application and it has ids that are dynamic in a form. What happens is when I click on a button to add another form within the page, the HTML shows below:

<table id = "expense_table">
<div id = "OtherExpense">
<input id = "Form01_dropdown01"></input>
<div id = "OtherExpense">
<input id = "Form02_dropdown01"></input>
<input id = "Form02_dropdown02"></input>
</table>

the Form01 increments, as well as the dropdown01 upon clicking add buttons. I had tried to use increments so everytime the add button is clicked the Form01 will increment to 2.

 public int mainCtr = 0; // this increments when the add button is clicked
 public int formctr = 0;
 public int dropcTr = 0;
 IList<IWebElement> elements = driver.FindElements(By.XPath(".//*[contains(@id,'dropdown')]")); //counting dropdown boxes that are existing in the TA form
 int intLinkCount = elements.Count; // get the number of the dropdown boxes that are existing in the TA form
 dropdownCount = intLinkCount;
 if (dropdownCount > 0)
 {
 dropdownCount = dropdownCount + 1;
 dropCtr = dropdownCount;
 }
 else
 {
 dropCtr = dropCtr + 2;
 }
 if(formctr > 0)
 {
 dropcTr = dropcTr + 1;
 }
 driver.FindElement(By.Id(String.Format("Form0{0}_Button", otherExpCtr))).Click(); // button to add the dropdown below
 var otherexpInput = driver.FindElement(By.Id(String.Format("Form0{0}_dropdown0{1}", formCtr, dropcTr)));

Everytime the button is clicked, the new form will be added in the page, and when the add button for dropdown is clicked, a new dropdown is added as well.I am not sure how to handle it because what happens is that when there's 1 existing dropdown on Form01, the value of dropdownCount will become 1 that makes it 2 as assigned to dropCtr. When the add dropdown is clicked, it will look for dropDown02 which is not existing yet because it just added dropDown01. Thanks!

Answer 1

Create selectors without using the part that is changing, is the entire attribute is changing then use other elements that do not change.

For example if you have: Form01_dropdown01> Form02_dropdown02 and so on, then you can use a css selector like:

[id*=dropdown]

or

[id*=dropdown]

or

[id*=dropdown][id*=Form]