Selenium WebDriver - Finding Elements using cssSelector and nth child

Question

<ul>
<li class="active">
    <a href="#">
    <i class="fa fa-home"></i><br>
    <span class="title">Home</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-rss-square"></i><br>
    <span class="title">Posts</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-calendar"></i><br>
    <span class="title">Events</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-bar-chart-o"></i><br>
    <span class="title">My Activity</span>
    </a>
</li>

<li>
    <a href="#">
    <i class="fa fa-edit"></i><br>
    <span class="title">Assessments</span>
    </a>
</li>
</ul>

I want to locate the respective span element. I want to check the order of the span elements using css selector. So when I use selenium IDE,I will verify it like below(using nth child concept).

But when I do the same thing in Selenium WebDriver I am not able to locate the elements with the order which I did using Selenium IDE.

Below are the codes that I used in WebDriver and it dint work.

driver.findElement(By.cssSelector(".title:nth(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-of-type(0)")); // to locate the "Home" element

driver.findElement(By.cssSelector(".title:nth-child(0)")); // to locate the "Home" element

Could anyone please help me.

score 34 · Accepted Answer · edited Nov 26 '15 at 13:34

34

You can generate the css-selector from ul like ul > li:nth-child(1) for home. See below:

driver.findElement(By.cssSelector("ul > li:nth-child(1)")); >> home
driver.findElement(By.cssSelector("ul > li:nth-child(2)")); >> posts
driver.findElement(By.cssSelector("ul > li:nth-child(3)")); >> events

also reachin span is the same:

driver.findElement(By.cssSelector("ul > li:nth-child(1) > a > span")); >> home

edited Nov 26 '15 at 13:34

drkthng

6,651
7
33
53

answered Nov 26 '15 at 13:03

Mesut GUNES

7,089
2
32
49

OP is asking for CSS selector. – JeffC Nov 26 '15 at 13:18
1

@JeffC it is css selector – Mesut GUNES Nov 26 '15 at 14:03
6

Sorry... I have no idea what I was thinking when I said that. – JeffC Nov 27 '15 at 01:27
1

@JeffC You ara rigtht it was written XPath in explanation and corrected by drkthng check edited link. – Mesut GUNES Nov 27 '15 at 05:16

score 7 · Answer 2 · edited Jan 08 '21 at 11:25

7

do you need css specifically? if not, you can also go for xpath, which imho reads better/clearer:

driver.findElement(By.xpath("(//span[@class='title'])[0]")); // home
driver.findElement(By.xpath("(//span[@class='title'])[1]")); // posts
...

edited Jan 08 '21 at 11:25

Ciaran Gallagher

3,895
9
53
97

answered Nov 26 '15 at 12:55

drkthng

6,651
7
33
53

Css selector is faster than xpath. – a Learner Dec 26 '21 at 17:01
1

Yes, Css selector is faster, but we're talking microseconds of difference (which is generally negligilbe when working with Selenium). Xpath also indexes from `1` and not from `0`, so the correct implementation would be ``` driver.findElement(By.xpath("(//span[@class='title'])[1]")); // home driver.findElement(By.xpath("(//span[@class='title'])[2]")); // posts ... ``` – Milan Smolík Jul 13 '22 at 08:35

score 3 · Answer 3 · edited Sep 23 '19 at 13:42

3

<body>
        <div class=parent>
            <div></div>
            <div></div>
            <div></div>
        </div>
    </body>

If you already have the parent element and just need to find nth child

parent.find_element_by_css_selector('div:nth-child(2)')

would select the second div

edited Sep 23 '19 at 13:42

Joe Triccas

13
3

answered Jul 26 '18 at 14:45

Ger Mc

630
3
11
22

score 0 · Answer 4 · answered Oct 12 '20 at 06:43

We can write this way-

To get all the span text like-

Home
Posts
Events
My Activity
Assessments
Then
driver.findElements(By.cssSelector("ul>li>a span:nth-child(3)"));
and
To get individual span text then you need to pass the index position in nth-child(index) method.
driver.findElement(By.cssSelector("ul>li:nth-child(1)>a span")).getText();//Home driver.findElement(By.cssSelector("ul>li:nth-child(2)>a span")).getText();//Posts driver.findElement(By.cssSelector("ul>li:nth-child(3)>a span")).getText();//Events driver.findElement(By.cssSelector("ul>li:nth-child(4)>a span")).getText();//My Activity driver.findElement(By.cssSelector("ul>li:nth-child(5)>a span")).getText();//Assessments

For more details please visit- CSS Selector in Details

score 0 · Answer 5 · answered Jul 19 '22 at 10:40

0

driver.find_element_by_css_selector('ul>li:nth-of-type(1)>a>')

answered Jul 19 '22 at 10:40

Deepak Gautam

28
6

Your answer could be improved by adding more information on what the code does and how it helps the OP. – Tyler2P Jul 20 '22 at 09:52

Selenium WebDriver - Finding Elements using cssSelector and nth child

5 Answers5

Linked