Clicking on a particular button of a particular record in a webTable

Question

In our application, i have a scenario to click on edit icon for a particular user. So currently i am using the following code:

Below is the html source of the Edit button:

<tbody id="defaultOverviewTable_data" class="ui-datatable-data ui-widget-content">
    <tr class="ui-widget-content ui-datatable-even ui-datatable-selectable" aria-selected="false" role="row" data-rk="5910" data-ri="0">
    <tr class="ui-widget-content ui-datatable-odd ui-datatable-selectable" aria-selected="false" role="row" data-rk="1" data-ri="1">
    <tr class="ui-widget-content ui-datatable-even ui-datatable-selectable" aria-selected="false" role="row" data-rk="1211" data-ri="2">
    <tr class="ui-widget-content ui-datatable-odd ui-datatable-selectable ui-state-hover" aria-selected="false" role="row" data-rk="14" data-ri="3">
        <td class="ui-selection-column" style="width:17px;min-width:17px;max-width:17px;" role="gridcell">
        <td role="gridcell">HemaSundar</td>
        <td style="width:105px;min-width:105px;max-width:105px;" role="gridcell">52A-4EB-52C-294</td>
        <td role="gridcell">HemaSundar</td>
        <td role="gridcell">HemaSundar</td>
        <td role="gridcell">Banking, Admin, System, EuropeanGate, SAP, MBS, Audit, Confidential Payments, iPhone App</td>
        <td role="gridcell">
        <td class="fillerColumn" style="width:0px;min-width:0px;max-width:0px;" role="gridcell"/>
        <td class="iconColumn width_components_4" style="width:160px;min-width:160px;max-width:160px;" role="gridcell">
            <div class="columnDiv">
                <div id="defaultOverviewTable:3:j_id128" class="ui-outputpanel ui-widget">
                    <button id="defaultOverviewTable:3:j_id129" class="ewms-ui-icon-superEdit ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only ui-state-hover" type="submit" title="" alt="Edit" onclick="return false;PrimeFaces.addSubmitParam('defaultOverviewForm',{'edit_id':'14'})" name="defaultOverviewTable:3:j_id129" role="button" aria-disabled="false">
                        <span class="ui-button-text ui-c">ui-button</span>
                    </button>
                </div>

Here is the code i am using now:

WebElement overview = driver.findElement(By.id("defaultOverviewTable_data"));// considering the complete webtable
        List<WebElement> individualRows = overview.findElements(By.tagName("tr"));//considering invidual user
        for (WebElement wb: individualRows)
        {
            List<WebElement> indWb = wb.findElements(By.tagName("td"));// considering individual columns for individual users
            System.out.println(indWb.get(1).getText());
            if (indWb.get(1).getText().equalsIgnoreCase(username))// if the username equals the expected
            {
                List<WebElement> allButtons = wb.findElements(By.tagName("button"));// getting all the buttons of that user
                for (WebElement edit: allButtons)
                {
                    System.out.println(edit.getAttribute("title"));
                    if (edit.getAttribute("title").matches("Edit"))
                    {
                        edit.click();// clicking on button where title is Edit.
                        break;
                    }
                }
                break;
            }
        }

Some times in there are more than 300 user in the table, Then if i want to click edit for a user which is at 200 position approximatlely. It is taking more time.

Is there any other way by using XPATH for clicking on edit button where username column equal to a particular name?

Note: IDs of the buttons are not constant.

Answer 1

I believe this XPath should accomplish what you want to achieve.

//tbody[@id='defaultOverviewTable_data']/tr[./td[2][text()='HemaSundar']]//button[@alt='Edit']

Note:

• td[2] is used because XPaths are 1 based, and you're looking in the second column

• You mention clicking the button where title="Edit" but your code snippet doesn't actually have that so I'm selecting by alt attribute instead

XPaths can be very powerful, let me know if you'd like a more in depth explanation

EDIT: Adding better explanation of XPath below...

//tbody[@id='defaultOverviewTable_data']

This finds the tbody element with the id='defaultOverviewTable_data', anywhere on the page. Simple

/tr[./td[2][text()='HemaSundar']]

This finds a tr element that is an immediate child of the tbody (there is only one / at the beginning). The square bracket part means that it will only find rows that match the criteria within the square bracket (./td[2][text()='HemaSundar']), or in english, it will only find rows that have the text 'HemaSundar' in the second child td.

//button[@alt='Edit']

Finally, this will find any buttons below the tr (not just immediate children, because of the double //), that have an alt attribute of 'Title'. You can switch up the @alt part to match any other attributes if you wish.

Don't forget to mark this answer as correct if it's solved your issue :)