Is there a way in Selenium C# to find a specific update button on a table if all the ids are the same?

Question

I am writing a selenium test to test a crud application where you can add, update, or delete a user. I have a table that dynamically displays all of the fields. When I add a new user, a new edit button is also added and when clicked edits that particular user. When trying to test this with selenium, I am not sure how to edit a specific user. I would like to edit the 4th user in the list, which would be index 3. I tried this,

var edit = wait.Until((d) => d.FindElements(By.Id("edit")));
edit[3].Click();

but get an index out of range error. If I do this:

var edit = wait.Until((d) => d.FindElement(By.Id("edit")));
edit.Click();

It allows me to edit the first person in the table.


    Ray Peterson
    deleted_0_rpeterson@aol.com
    Developer
    
        
            
                
                    
                        
                    
                
                
                    
                
            
        
    


    Fredo Corleone
    godfather88@gmail.com
    Developer
    
        
            
                
                    
                        
                    
                
                
                    
                
            
        
    


    Try Again
    tryagain@gmail.com
    Developer

user_4481094 · Answer

You can go with the XPath for identifying the specific field

I hope you have similar page, please try XPath

user_2386774 · Answer

If you want to edit a specific user, I've found the best way to do this is to create a locator that uses data from the table to find a specific table row and then click the Edit button in that row. Since we are searching the table to find elements based on contained text, our only locator option is XPath.

I can't test this with the current HTML that contains rendering code but I mocked up something based on what you posted and these should work or at least be close.

If you want to search by firstName lastName, you can use

//tr[./td[1][.='John Smith']]//*[name()='svg'][@id='edit']

If you want to search by email, you can use

//tr[./td[2][.='address@email.com']]//*[name()='svg'][@id='edit']

Ideally you would put these into methods and pass in the search criteria and have it click the Edit button for you so that they are reusable.

/// 
/// Finds the user by the supplied email and clicks Edit
/// 
/// The email address of the user to be edited
public void EditUserByEmail(string email)
{
    By locator = By.XPath($"//tr[./td[2][.='{email}']]//*[name()='svg'][@id='edit']");
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementToBeClickable(locator)).Click();
}

/// 
/// Finds the user by the supplied full name and clicks Edit
/// 
/// The full name of the user to be edited in the format "firstName lastName"
public void EditUserByName(string fullName)
{
    By locator = By.XPath($"//tr[./td[1][.='{fullName}']]//*[name()='svg'][@id='edit']");
    WebDriverWait wait = new WebDriverWait(driver, TimeSpan.FromSeconds(10));
    wait.Until(ExpectedConditions.ElementToBeClickable(locator)).Click();
}

and you could call it like

EditUserByEmail("pinocchio@aol.com");

Is there a way in Selenium C# to find a specific update button on a table if all the ids are the same?

2 Answers