Playwright CSS Selector

The playwright uses CSS selectors just like any other automation tool. CSS selector engine pierces open shadow DOM by default.

It also uses custom pseudo-classes like :visible, :text, etc. CSS was originally used to target HTML elements. The playwright uses CSS selector go to for referencing web UI elements.

Select using ID

HTML

<button id="food">Get</button>

Playwright Code

await page.locator("#food").click()

#food selects the element with id food.

Select Using Class

HTML

<li class="food">...</li>

Playwright Code

await page.locator(".food").click()

.food fetches element with class food.

Select Using Attribute and Value

HTML

<button class="select">Log in</button>

Playwright Code

await page.locator('[class=select]').click()

[class=select] Using this will select an attribute class equal to select.

Conclusion:

There are many more CSS selector methods with which we can pour into the playwright and use them effectively. All that you need to do is just add your selector in locator method.