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

Guide on determining the total number of rows within a given table

Discrepancies arise when attempting to extract specific specifications from a particular website

Encountering a problem while trying to log into Instagram with selenium, receiving the error message "We had trouble logging you in to Instagram."

Header with Sticky Behavior and Smooth Slide Down Animation

Using Selenium Web Driver to interact with buttons within Eclipse IDE

Steps for setting up Dependency in POM.XML for Testlink (testlink-api-client) 2.0

What is the best way to align a checkbox and text in the same row within a Mailchimp embedded form?

Determining the decimal width of an element using jQuery

Issue with xPath not being able to find and input data into a field when using tools like selenium and Webdriver

Styling JavaFX ChoiceDialog with CSS

Rotating and moving two boxes using CSS3 transformations

What is the process to include a CSS file in PHP?

Combining an image and a card in Bootstrap 5: a step-by-step guide

Tips for keeping two row headers in place on a table while scrolling:

Adjust the color of the text in Ionic based on the condition

Experiencing difficulties when attempting to show or hide elements using jQuery

In my selenium test, what is the best method to drag and drop an element to adjust its offset specifically for FireFox compatibility?

Skipping BDD tests in Terminal Serenity due to unexpected errors

What is the best way to eliminate the left padding on a TimelineItem component?

What are the steps for setting up Geckodriver on my computer?