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]