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.

Answer 1

try this selector:

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