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.

CSS Selectors Examples:

  • #food selects the element with id food.
<button id="food">Get</button>

.food fetches element with class food

<li class="food">...</li>
  • .view .price selects the element with class .price within an element with class .view.

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

<button class="select">Log in</button>
  • a.cart select type a with class value cart.
  • #nav > .cart finds elements within nav id and class cart.


There are many more CSS selector methods with which we can pour into the playwright and use them effectively.

Fri, 12/02/2022 - 10:37
Ashwin possesses over five years of experience in the Quality Assurance industry and is currently serving as a Technical Lead at iVagus. His expertise encompasses a broad range of technologies, including Cypress, Rest Assured, Selenium, Cucumber, JavaScript and TypeScript.