WebDriver Selenium: Need to select element in the table after some element - css

Question

The HTML page contains a table of users details.
I need to remove user.
I can select the first element in the row by username.
I need to select the "Delete" button on that row to delete that user.
The HTML structure is:
<table id="tblUsersGrid" cellpadding="2">
<thead>
<tbody>
<tr class="aboutMeRow" data-parentid="223">
<tr>
<tr>
...
<tr>
<td class="cell cell_278 cell_NameCell">xoxo</td>
<td class="optionIcon overrideFloat orgIcon cell cell_278 gridCell"></td>
<td class="cell cell_278 gridCell">Custom</td>
<td class="cell cell_278 gridCell">qaadmin</td>
<td class="cell cell_278 gridCell">0</td>
<td class="cell gridCell">
<div class="removeAccountIcon"></div>
<td class="cell gridCell">
<div class="editAccountIcon"></div>
</td>
<td></td>
</tr>
So I can easily select the desired row by
driver.findElement(By.xpath("//td[#class='cell_NameCell'][contains(text(),'xoxo')]"))
But how can I reach the removeAccountIcon element on that row?
I saw many questions dealing with selecting elements inside tables but didn't find solution for this issue.
Is there a way to do this by CSS selector, not only by Xpath? (I am sure there is a Xpath solution for this).

Answer 1

You can make it in one go using the following XPath expression:
//tr[td[contains(#class, 'cell_NameCell')] = 'xoxo']//div[#class='removeAccountIcon']
Here we are locating the appropriate tr row by checking the text of the td element containing cell_NameCell class (this is your username cell). Then, we locate the "Remove Account Icon" inside this row.

Answer 2

Xpath axes preceding-sibling would helps you to resolve the issue. You can try below xpath:
//td[preceding-sibling::td[contains(text(),'xoxo')]][5]/div[#class='removeAccountIcon']
Let me know if it works for you.

Answer 3

If you can select the correct row, you can select the desired element within that row by calling findElement on that row instead of the original driver. However, the code you suggested for finding the correct row doesn't appear to work. (It selects a td instead of a tr.)
I would suggest the following:
WebElement userDataInRow = driver.findElement(By.xpath(//td[contains(text(),'xoxo')]))
WebElement row = userDataInRow.findElement(By.xpath(".."))
row.findElement(By.xpath("//div[#class='removeAccountIcon']"))
The second line goes to the parent element of the selected td element.

Answer 4

I don't think there is an option to find the parent by using the css selectors.
This article gives other alternates for finding the same.
To capture the "Remove" button by using the xpath, we just need to traverse back to the parent of the "Name" cell of the table and then fetch the "div" of the "remove link/button".
Then your xpath //td[#class='cell'][contains(text(),'xoxo')] should be updated as below :
//td[contains(text(),'xoxo')]/../td/div[#class='removeAccountIcon']
This will capture the "Remove Account Icon" based on the given name.