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

Adjusting the color of text based on the fulfillment of a condition

What could be causing all of my Bootstrap accordion panels to close at once instead of just the one I selected?

What is the best way to flip cards with the onClick event in JavaScript?

Choosing values randomly from dropdown using selectByIndex method within the Selenium Hybrid Framework

Apply a class to each consecutive element following the current one until reaching a child element with a

When utilizing an API to render text into a div, the offsetHeight function may return 0

Achieving space between elements using Flexbox with a line separating each row

The functionality of activating a button is not functioning as expected in AngularJS framework

Harness the power of Selenium within Odoo version 13 to enhance

Concealing specific sections of HTML content in a webview on the fly

Encountering issue: Unable to establish a connection with FirefoxBinary binary on port 7055

Steps for generating instances of an HTML page and dynamically adding them to a list on the main page

Even though my test cases are running successfully on my local machine, they are not being marked as passed

jwt io - unable to change the predefined value

Creating visually pleasing HTML emails with uniform table data heights

``Do not forget to close the modal window by clicking outside of it or

Tips for managing the save file dialog box in Firefox with Selenium using C#

Tips for making a Bootstrap dropdown submenu appear as a 'dropup'

Specify the WebDriver path in the build.gradle file for Selenium test scripts instead of programmatically configuring the System Property

Display email address in a concise manner