Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Question

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Is there a way to select the paragraph tag for B (or C) by utilizing nth-child or nth-of-type in Selenium WebDriver?

<tr>
    <td>
        <p class="myClass">A</p>
    </td>
</tr>
<tr>
    <td>
        <p class="myClass">B</p>
    </td>
</tr>
<tr>
    <td>
        <p class="myClass">C</p>
    </td>
</tr>

Context: I am exploring automation testing with Selenium WebDriver, and faced issues with selecting elements using standard CSS selectors like nth(i).

While I can successfully select the first element, I encounter difficulties with selecting the nth element. This could be due to nesting.
These attempts have failed:
.myClass:nth-of-type(2) (locator not found, per Selenium IDE)
.myClass:nth-child(2) (locator not found, per Selenium IDE)

css selenium selenium-webdriver css-selectors

Answer 1

Answer №1

For those using Selenium WebDriver, the following code snippet can be helpful:

String cssSelector = ".myClass";
List<WebElement> elementList = driver.findElements(By.cssSelector(cssSelector));
WebElement targetElement = elementList.get(index);

While not perfect, this solution gets the job done.

Answer 2

For those using Selenium WebDriver, the following code snippet can be helpful:

String cssSelector = ".myClass";
List<WebElement> elementList = driver.findElements(By.cssSelector(cssSelector));
WebElement targetElement = elementList.get(index);

While not perfect, this solution gets the job done.

Answer 3

Answer №2

Could the css selector function for selecting based on content work for you?

driver.FindElements(By.cssSelector("p.myClass:contains('B')"));

Response: No, as :contains() is a JQuery pseudo-function.

If you are using C#, you can import SizSelCsZzz for JQuery functionality. Then you would be able to do:

driver.FindElements(new ByJQuery.ByJQuerySelector("p.myClass:contains('B')", true));

In addition, when it comes to nth-child, this is also a JQuery pseudo-function. In similar fashion:

using SizSelCsZzz;

namespace YourNamespaceHere
{
   public class YourClass
   {
      By selectB = new ByJQuery.ByJQuerySelector("p.myClass:nth-child(2)", true);
   }
}

Answer 4

Could the css selector function for selecting based on content work for you?

driver.FindElements(By.cssSelector("p.myClass:contains('B')"));

Response: No, as :contains() is a JQuery pseudo-function.

If you are using C#, you can import SizSelCsZzz for JQuery functionality. Then you would be able to do:

driver.FindElements(new ByJQuery.ByJQuerySelector("p.myClass:contains('B')", true));

In addition, when it comes to nth-child, this is also a JQuery pseudo-function. In similar fashion:

using SizSelCsZzz;

namespace YourNamespaceHere
{
   public class YourClass
   {
      By selectB = new ByJQuery.ByJQuerySelector("p.myClass:nth-child(2)", true);
   }
}

Answer 5

Answer №3

To choose option B, employ the following code:

table tr:nth-child(2) td p {/*insert your custom styles here */}

Answer 6

To choose option B, employ the following code:

table tr:nth-child(2) td p {/*insert your custom styles here */}

Answer 7

Answer №4

Although I am not familiar with selenium, you can try using standard CSS selectors to target 'C' in the following way:

table tr + tr + tr > td > p {color:blue;}

Answer 8

Although I am not familiar with selenium, you can try using standard CSS selectors to target 'C' in the following way:

table tr + tr + tr > td > p {color:blue;}

Answer 9

Answer №5

Sibling elements are not present with the p tag as they are in separate columns. To target specific rows, consider using the nth-child pseudo-class on the tr tag. An example would be changing the background of odd rows:

table tr:nth(odd){
    background-color: #color-code;
}

Answer 10

Sibling elements are not present with the p tag as they are in separate columns. To target specific rows, consider using the nth-child pseudo-class on the tr tag. An example would be changing the background of odd rows:

table tr:nth(odd){
    background-color: #color-code;
}

Tips for choosing nested elements with basic CSS selectors like nth-of-type or nth-child for Selenium

Answer №1

Answer №2

Answer №3

Answer №4

Answer №5

Similar questions

Find the button for uploading files using Selenium

The capybara::dsl::module does not have a defined delegate method

Dynamic HTML gallery that supports the addition of fresh images

Add custom CSS styles to a webpage using the CSS Style element retrieved from

Issue with creating a new jstree node

How to customize the color of radio buttons in JFXRadioButton using CSS

The hover effect is being applied exclusively to the final React component

Tips on storing browser sessions in Selenium

Jenkins consistently delivers positive outcomes with TestNG and Selenium testing frameworks

How can I position a div element inside another fixed div element?

What is the best way to choose all initial elements within a single row using CSS?

Steps to obtain context and transition to webview context:

CSS - Utilizing Flexbox for creating inline lists that adjust based on text length

Steps to ensure a dropdown menu remains expanded when its nested menu is selected

Can you explain the slow parameter feature in Mocha?

Experiencing unexpected behavior with my code. Utilizing ArrayList and a for loop in my Selenium Webdriver Java script

The various options in the dropdown menu are descending in order

Has any of my predecessors been hidden from view?

What steps should be followed to effectively incorporate Google Fonts into a Material UI custom theme for typography in a React/TypeScript project

CSS problem: HTML element moving to the right upon clicking