Playwright select element with strict class matching

Question

How I can select element with Playwright framework with a strict class checking? For example, I have multiple elements on a page:

<li class="target target--disabled"></li>
<li class="target target--disabled"></li>
<li class="target target--disabled"></li>
<li class="target target--disabled"></li>
<li class="target target--disabled"></li>
<li class="target"></li> // <-----want to target only this one
<li class="target"></li>
<li class="target"></li>

I tried:

const element = page.locator('.target').first()

but it also target disabled ones.

```page.locator('[class="target"]')``` or `page.locator('.target:not(.target--disabled)')` are possible but there's probably a better way to select that if you don't mind providing more context. — ggorlen, Mar 16 '23 at 02:03
Does this answer your question? [Can I write a CSS selector selecting elements NOT having a certain class or attribute?](https://stackoverflow.com/questions/9110300/can-i-write-a-css-selector-selecting-elements-not-having-a-certain-class-or-attr) — ggorlen, Mar 16 '23 at 02:20

score 2 · Accepted Answer · answered Mar 18 '23 at 21:50

2

try this selector:

const element = page.locator('.target:not(.target--disabled)').first()

answered Mar 18 '23 at 21:50

Eliran Alon

79
1

Playwright select element with strict class matching

1 Answers1