Clicking a button within a specific row

Question

I currently have a test that adds an entry to the table below, generating a random location name and value. I'm now trying to click on the edit icon within the table.

I can find the correct location name cell using-

string editButton = "//td[text(),'"+locationName+ "'];
driver.FindElement(By.XPath(editButton)).Click();

But not sure how to click on the Edit button from here?

HTML for the button is-

<tr id="officeRechargeGrid_DXDataRow1" class="dxgvDataRow_Office2010Silver" style="">
    <td class="dxgvCommandColumn_Office2010Silver dxgv" align="center"><a class="dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys" data-args="[['StartEdit',1],1]" id="officeRechargeGrid_DXCBtn3" href="javascript:;" style="font-size: 0pt;"><img title="Edit" class="dx-vam" src="/Images/editgray.png" alt="Edit" style="height:16px;width:16px;" id="officeRechargeGrid_DXCBtn3Img"></a><script id="dxss_1145064087" type="text/javascript" data-executed="true">

HTML for the table is-

//-->
</script></td>
            </tr>
        </tbody></table></td><td id="officeRechargeGrid_col2" class="dxgvHeader_Office2010Silver" onmousedown="ASPx.GHeaderMouseDown('officeRechargeGrid', this, event);" style="border-top-width:0px;border-left-width:0px;"><table style="width:100%;border-collapse:collapse;" cellspacing="0" cellpadding="0">
            <tbody><tr>
                <td>Location</td><td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span><img class="dxGridView_gvHeaderFilter_Office2010Silver dxgv__hfb dx-vam" src="/DXR.axd?r=1_37-Z658g" alt="[Filter]" style="cursor:default;"></td>
            </tr>
        </tbody></table></td><td id="officeRechargeGrid_col3" class="dxgvHeader_Office2010Silver" onmousedown="ASPx.GHeaderMouseDown('officeRechargeGrid', this, event);" style="border-top-width:0px;border-left-width:0px;border-right-width:0px;"><table style="width:100%;border-collapse:collapse;" cellspacing="0" cellpadding="0">
            <tbody><tr>
                <td>Assumed Volume</td><td style="width:1px;text-align:right;"><span class="dx-vam">&nbsp;</span><img class="dxGridView_gvHeaderFilter_Office2010Silver dxgv__hfb dx-vam" src="/DXR.axd?r=1_37-Z658g" alt="[Filter]" style="cursor:default;"></td>
            </tr>
        </tbody></table></td>
    </tr><tr id="officeRechargeGrid_DXFilterRow" class="dxgvFilterRow_Office2010Silver">
        <td class="dxgvCommandColumn_Office2010Silver dxgv" align="center">&nbsp;</td><td class="dxgv"><table class="dxeTextBoxSys dxeTextBox_Office2010Silver dxeTextBoxDefaultWidthSys" id="officeRechargeGrid_DXFREditorcol2" style="width:100%;border-collapse:collapse;" cellspacing="0" cellpadding="0">
            <tbody><tr>
                <td class="dxic" style="width:100%;"><input class="dxeEditArea_Office2010Silver dxeEditAreaSys" id="officeRechargeGrid_DXFREditorcol2_I" name="officeRechargeGrid$DXFREditorcol2" onfocus="ASPx.EGotFocus('officeRechargeGrid_DXFREditorcol2')" onblur="ASPx.ELostFocus('officeRechargeGrid_DXFREditorcol2')" onchange="ASPx.EValueChanged('officeRechargeGrid_DXFREditorcol2')" type="text"></td>
            </tr>
        </tbody></table><script id="dxss_334903315" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXFREditorcol2',[[['dxeDisabled_Office2010Silver'],[''],['','I']]]);

var dxo = new ASPxClientTextBox('officeRechargeGrid_DXFREditorcol2');
dxo.InitGlobalVariable('officeRechargeGrid_DXFREditorcol2');
dxo.uniqueID = 'officeRechargeGrid$DXFREditorcol2';
dxo.ValueChanged.AddHandler(function(s, event) { ASPx.GVFilterChanged('officeRechargeGrid',s); });
dxo.KeyDown.AddHandler(function(s, event) { ASPx.GVFilterKeyPress('officeRechargeGrid',s,event); });
dxo.RequireStyleDecoration();
dxo.styleDecoration.AddStyle('F','dxeFocused_Office2010Silver','');
dxo.AfterCreate();

//-->
</script></td><td class="dxgv" style="text-align:Right;border-right-width:0px;"><table class="dxeTextBoxSys dxeTextBox_Office2010Silver dxeTextBoxDefaultWidthSys" id="officeRechargeGrid_DXFREditorcol3" style="width:100%;border-collapse:collapse;" cellspacing="0" cellpadding="0">
            <tbody><tr>
                <td class="dxic" style="width:100%;"><input class="dxeEditArea_Office2010Silver dxeEditAreaSys" id="officeRechargeGrid_DXFREditorcol3_I" name="officeRechargeGrid$DXFREditorcol3" onfocus="ASPx.EGotFocus('officeRechargeGrid_DXFREditorcol3')" onblur="ASPx.ELostFocus('officeRechargeGrid_DXFREditorcol3')" onchange="ASPx.EValueChanged('officeRechargeGrid_DXFREditorcol3')" type="text"></td>
            </tr>
        </tbody></table><script id="dxss_1037231823" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXFREditorcol3',[[['dxeDisabled_Office2010Silver'],[''],['','I']]]);

var dxo = new ASPxClientTextBox('officeRechargeGrid_DXFREditorcol3');
dxo.InitGlobalVariable('officeRechargeGrid_DXFREditorcol3');
dxo.uniqueID = 'officeRechargeGrid$DXFREditorcol3';
dxo.ValueChanged.AddHandler(function(s, event) { ASPx.GVFilterChanged('officeRechargeGrid',s); });
dxo.KeyDown.AddHandler(function(s, event) { ASPx.GVFilterKeyPress('officeRechargeGrid',s,event); });
dxo.RequireStyleDecoration();
dxo.styleDecoration.AddStyle('F','dxeFocused_Office2010Silver','');
dxo.AfterCreate();

//-->
</script></td>
    </tr><tr id="officeRechargeGrid_DXDataRow0" class="dxgvDataRow_Office2010Silver" style="">
        <td class="dxgvCommandColumn_Office2010Silver dxgv" align="center"><a class="dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys" data-args="[['StartEdit',0],1]" id="officeRechargeGrid_DXCBtn1" href="javascript:;" style="font-size: 0pt;"><img title="Edit" class="dx-vam" src="/Images/editgray.png" alt="Edit" style="height:16px;width:16px;" id="officeRechargeGrid_DXCBtn1Img"></a><script id="dxss_1182543207" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXCBtn1',[[['dxbDisabled_Office2010Silver'],[''],[''],['','TC']]]);

//-->
</script><a class="dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys" data-args="[['Delete',0],1]" id="officeRechargeGrid_DXCBtn2" href="javascript:;" style="font-size: 0pt;"><img title="Delete" class="dx-vam" src="/Images/delete.png" alt="Delete" style="height:16px;width:16px;" id="officeRechargeGrid_DXCBtn2Img"></a><script id="dxss_2131039704" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXCBtn2',[[['dxbDisabled_Office2010Silver'],[''],[''],['','TC']]]);

//-->
</script></td><td class="dxgv">TAHPOYOWAG</td><td class="dxgv" style="border-right-width:0px;" align="right">49,554.00</td>
    </tr><tr id="officeRechargeGrid_DXDataRow1" class="dxgvDataRow_Office2010Silver dxgvLVR" style="">
        <td class="dxgvCommandColumn_Office2010Silver dxgv" style="border-bottom-width:0px;" align="center"><a class="dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys" data-args="[['StartEdit',1],1]" id="officeRechargeGrid_DXCBtn3" href="javascript:;" style="font-size: 0pt;"><img title="Edit" class="dx-vam" src="/Images/editgray.png" alt="Edit" style="height:16px;width:16px;" id="officeRechargeGrid_DXCBtn3Img"></a><script id="dxss_1145064087" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXCBtn3',[[['dxbDisabled_Office2010Silver'],[''],[''],['','TC']]]);

//-->
</script><a class="dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys" data-args="[['Delete',1],1]" id="officeRechargeGrid_DXCBtn4" href="javascript:;" style="font-size: 0pt;"><img title="Delete" class="dx-vam" src="/Images/delete.png" alt="Delete" style="height:16px;width:16px;" id="officeRechargeGrid_DXCBtn4Img"></a><script id="dxss_511888854" type="text/javascript" data-executed="true">
<!--
ASPx.AddDisabledItems('officeRechargeGrid_DXCBtn4',[[['dxbDisabled_Office2010Silver'],[''],[''],['','TC']]]);

//-->
</script></td><td class="dxgv" style="border-bottom-width:0px;">JKFZICCPJA</td><td class="dxgv" style="border-right-width:0px;border-bottom-width:0px;" align="right">76,646.00</td>
    </tr>
</tbody></table>

Answer 1

You have not given us the ID from the main table (to narrow down the HTML), so just search all the tr on the page.

Then, get all rows from the table.

var rows = driver.FindElements(By.TagName("tr"));

In that collection, you will search for all the columns, and narrow down your results to a specific row with your locationName.

var desiredRow = rows.Where(row => row.FindElements(By.TagName("td"))[1] == locationName);

Now that you have your desired row, search in that row to find the edit button (I can see there is only one anchor, so easiest search, is by tagname)

deriredRow.FindElement(By.TagName("a")).Click();

If you create a function for the sole purpose of clicking the edit button, it goes like this:

public void ClickEdit(string locationName)
{
    driver.FindElements(By.TagName("tr"))
        .Where(row => row.FindElements(By.TagName("td"))[1] == locationName).Single()
        .FindElement(By.TagName("a")).Click();
}

Answer 2

Try this xpath:

driver.FindElement(By.XPath("//a[child::img[@title='Edit'] and parent::td[following-sibling::td[text()='" + locationName + "']]]")).Click();

Answer 3

To to click on the Edit button within the table you can use the following line of code :

driver.FindElement(By.XPath("//a[@class='dxbButton_Office2010Silver dxgvCommandColumnItem_Office2010Silver dxgv__cci dxbButtonSys' and @id='officeRechargeGrid_DXCBtn3']")).Click();

Answer 4

Try identifying the Edit buttons first and save them in a list. Then click on each of them in turn using loop.

List<WebElement> trList=driver.findElements(By.xpath("//table[@id='Your table ID here']/tr/td/a/img"));
                          (or)
List<WebElement> trList=driver.findElements(By.xpath("//img[@alt='Edit']"));
            for(int i=0;i<trList.size();i++){
                trList.get(i).click();
            }