Using WebDriver Selenium to choose an element within a table following another element

Question

Using WebDriver Selenium to choose an element within a table following another element

The webpage features a user details table with a functionality to delete users. To remove a user, I must select the row based on the username and then click the "Delete" button. The structure of the HTML table is as follows:

<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>

To easily locate the desired row, I can use the following XPath:

driver.findElement(By.xpath("//td[@class='cell_NameCell'][contains(text(),'xoxo')]"))

However, I am unsure how to access the removeAccountIcon element within that same row. While there are solutions using XPath for similar scenarios, I'm wondering if there is a CSS selector alternative to achieve this task rather than solely relying on XPath.

css selenium xpath selenium-webdriver

Answer 1

Answer №1

If you want to get it done in one shot, you can use the following XPath query:

//tr[td[contains(@class, 'cell_NameCell')] = 'xoxo']//div[@class='removeAccountIcon']

In this scenario, we find the right tr row by examining the text within the td element that has a class of cell_NameCell (which represents your username cell). Next, we pinpoint the "Remove Account Icon" located within this specific row.

Answer 2

If you want to get it done in one shot, you can use the following XPath query:

//tr[td[contains(@class, 'cell_NameCell')] = 'xoxo']//div[@class='removeAccountIcon']

In this scenario, we find the right tr row by examining the text within the td element that has a class of cell_NameCell (which represents your username cell). Next, we pinpoint the "Remove Account Icon" located within this specific row.

Answer 3

Answer №2

If you're dealing with Xpath, using the preceding-sibling axis can be beneficial in solving your problem. Here's a sample xpath to try out:

//td[preceding-sibling::td[contains(text(),'xoxo')]][5]/div[@class='removeAccountIcon']

Please update me on whether this solution works for you.

Answer 4

If you're dealing with Xpath, using the preceding-sibling axis can be beneficial in solving your problem. Here's a sample xpath to try out:

//td[preceding-sibling::td[contains(text(),'xoxo')]][5]/div[@class='removeAccountIcon']

Please update me on whether this solution works for you.

Answer 5

Answer №3

If you want to choose the right row, try using findElement on that specific row instead of the main driver to access the element within it. It seems like the code proposed for locating the correct row is not functioning as expected because it's selecting a td instead of a tr.

Here's an alternative approach:

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 navigates to the parent element of the td element that was chosen.

Answer 6

If you want to choose the right row, try using findElement on that specific row instead of the main driver to access the element within it. It seems like the code proposed for locating the correct row is not functioning as expected because it's selecting a td instead of a tr.

Here's an alternative approach:

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 navigates to the parent element of the td element that was chosen.

Answer 7

Answer №4

It doesn't seem possible to locate the parent using CSS selectors. However, there are alternative methods mentioned in this article that can be used for the same purpose.

If you want to find the "Remove" button using xpath, you can simply navigate back to the parent of the table cell containing the "Name" and then select the "div" element of the remove link/button.

In this case, your modified xpath should look like this:

//td[contains(text(),'xoxo')]/../td/div[@class='removeAccountIcon']

This xpath will successfully capture the "Remove Account Icon" based on the provided name information.

Answer 8

It doesn't seem possible to locate the parent using CSS selectors. However, there are alternative methods mentioned in this article that can be used for the same purpose.

If you want to find the "Remove" button using xpath, you can simply navigate back to the parent of the table cell containing the "Name" and then select the "div" element of the remove link/button.

In this case, your modified xpath should look like this:

//td[contains(text(),'xoxo')]/../td/div[@class='removeAccountIcon']

This xpath will successfully capture the "Remove Account Icon" based on the provided name information.

Using WebDriver Selenium to choose an element within a table following another element

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

Switch the background color of the body when hovering over a link

Discovering a particular element involves iterating through the results returned by the findElements method in JavaScript

Slowly zooming background image

Obtaining the class value using the getAttribute function

How can you prevent the automatic reset of sessions between scenarios in Behat Mink?

Tips for selecting a Checkbox within a table generated by ng-repeat using Selenium

Do I have to cram all the content onto a single page just to use a scroll effect?

Struggling to interact with a radio button using Selenium WebDriver

The escape character appears to be misunderstood, causing an error due to an invalid escape sequence

Unneeded return is necessary when utilizing recursion and restarting the application

Toggling the visibility of a div using JavaScript

Creating solid, dotted, and dashed lines with basic HTML/CSS for tcpdf rendering

Dynamic navigation menu shifting when bolded

Python selenium is now equipped to enable the 'Play DRM' feature

Stopping an endless loop in JavaScript by pressing a key on the keyboard can be a useful

Is there a way to make my HTML file search beyond its current directory?

What is the method for using jQuery to retrieve hidden fields with the visible attribute set to "false"?

The Angular material datepicker fails to organize items in a horizontal row

How to prevent the scroll bar from affecting a fixed div located at the top of the page

My test script consistently runs an unnecessary additional instance when using Selenium Grid