Using Playwright with CSS that contains nth element

Question

I’m trying to find an element with a specific nth index as a CSS expression.

How can I fix my code without changing the CSS expression?

try:
    expect(self.page.locator('div[class="some-class"]:nth(3)')).
                   to_be_visible(timeout=20000)
    return True
except AssertionError:
    return False

The error I get is:

{Error}DOMException: Failed to execute ‘querySelectorAll’ on ‘Document’: ‘div[class="some-class"]:nth(3)’ is not a valid selector.

Asked By: Tal Angel

||

Source

Answer 1

Your locator should look like this. Replace ":" with ">>"

div[class="some-class"]>>nth=3

Answered By: itronic1990

Answer 2

You can also do something like this:

self.page.locator('div.some-class').nth(3)
//or
self.page.locator('div.some-class').nth(4)

Answered By: Alapan Das

Using Playwright with CSS that contains nth element

Question:

Answers: