Playwright CSS Selectors: The Ultimate Guide (With Examples)

Are you trying to master CSS selectors in Playwright? If so, you’re in the right place. In this simple and clear guide, we’ll walk you through everything step by step, starting with the basics of Playwright CSS selectors in Playwright and moving on to advanced examples. Along the way, you’ll learn how to write cleaner and more reliable tests with ease.

What is a CSS Selector in Playwright?

In Playwright, a CSS selector lets you easily target HTML elements using familiar CSS syntax. With it, you can quickly interact with buttons, input fields, checkboxes, and many other elements on a web page. This makes your test scripts cleaner, faster, and more efficient to write.

Why Use CSS Selectors in Playwright?

Playwright supports various locator strategies. However, CSS selectors remain one of the most popular choices and for good reasons. First, they are simple and easy to read. Second, they work seamlessly across all modern browsers. And finally, they allow advanced filtering using powerful pseudo-classes like :visible and :nth-child.

Basic CSS Selector Syntax

Now, let’s say you are working with a button element. For example, consider the following HTML code. This basic structure will help you understand how to use Playwright’s CSS selectors effectively.

 <button class="submit-btn" id="lgnbtn">Login</button>

 <button class="submit-btn" id="lgnbtn">Login</button>

To locate the button using a CSS selector, you can simply use any of the following options. Each method is easy to understand and works well across different scenarios.

await page.locator('button'); // Select all buttons
await page.locator('.submit-btn'); // Select elements with class "submit-btn"
await page.locator('#lgnbtn'); // Select element with ID "lgnbtn"

await page.locator('button'); // Select all buttons
await page.locator('.submit-btn'); // Select elements with class "submit-btn"
await page.locator('#lgnbtn'); // Select element with ID "lgnbtn"

Playwright CSS Selectors Examples

Below are some easy-to-follow Playwright examples that show how to locate various web elements using CSS selectors and then perform the right action on each one.

Locate a button using a CSS selector and click on it

Let’s start with the HTML structure of a simple button element:

<button>Register</button>

<button>Register</button>

Now, let’s look at the Playwright syntax you can use to click on a button.

// Click a visible button
await page.locator('button:visible').click();

// Click a visible button
await page.locator('button:visible').click();

Locate a checkbox using a CSS selector and select it

Let’s now look at the HTML structure of a checkbox element that you can work with using Playwright.

<input type="checkbox" class="agree">

<input type="checkbox" class="agree">

To proceed, you can easily select the checkbox in Playwright using the following command.

// Select a checkbox by its class
await page.locator('input[type="checkbox"].agree').check();

// Select a checkbox by its class
await page.locator('input[type="checkbox"].agree').check();

Select an input field using a CSS selector and fill text in it

Let’s begin by looking at the HTML structure of the input element below.

<input type="text" placeholder="Enter email">

<input type="text" placeholder="Enter email">

Now, let’s see how you can use Playwright syntax to quickly fill text into the input textbox.

// Fill input field by placeholder
await page.locator('input[placeholder="Enter email"]').fill('test@example.com');

// Fill input field by placeholder
await page.locator('input[placeholder="Enter email"]').fill('test@example.com');

Chaining CSS selectors

For example, let’s say you have the following HTML structure for a text box:

<form id="login-form"><input type="text"></form>

<form id="login-form"><input type="text"></form>

In this case, you can easily chain CSS selectors as shown below, and then fill in the desired value.

await page.locator('form#login-form >> input[type="text"]').fill('JohnDoe');

await page.locator('form#login-form >> input[type="text"]').fill('JohnDoe');

Essential Playwright Locators to Learn Next

• ID Element Locator in Playwright
• Text Element Locator In Playwright
• getByTitle Element Locator in Playwright
• getByAltText Element Locator in Playwright
• getByPlaceholder Element Locator in Playwright
• getByRole Element Locator in Playwright
• getByLabel Element Locator in Playwright

Filter Elements Using CSS Pseudo-classes

Moreover, Playwright fully supports various CSS pseudo-classes, such as the following:

• :visible
• :nth-child(n)
• :first-child
• :last-child
• :hover (for hover simulation)

Example:

Suppose you have a list of items and want to select the second item. You can use the following syntax:

await page.locator('ul > li:nth-child(2)').click(); // Click second list item

await page.locator('ul > li:nth-child(2)').click(); // Click second list item

Best Practices for Playwright CSS Selectors

To make your selectors more reliable and easier to maintain, consider the following tips.

• First, try using class names or data-test attributes instead of relying on long or overly complex selectors.
• Next, use the :visible pseudo-class to ensure you’re only interacting with elements that are visible on the page.
• Also, avoid using nth-child() unless necessary, as these selectors can easily break when the page layout changes.
• Finally, combine your CSS selectors with Playwright’s built-in assertions—like toBeVisible() or toHaveText() to make your tests more accurate and robust.

CSS Selectors vs Other Locators in Playwright

Playwright gives you more than just CSS selectors. You can also use these helpful locators:

• getByRole() – Great for apps that follow accessibility standards.
• getByText() – Useful when you want to select elements based on their visible text.
• getByLabel() – Perfect for form fields linked to labels, like input boxes.

You can mix these locators with CSS selectors to make your tests easier to read and more reliable.

Final Thoughts

CSS selectors in Playwright offer a powerful and flexible way to find and interact with elements during your tests.

In fact, they support advanced features like pseudo-classes (such as :hover and :visible) and combinators (like >, +), which give you precise control over element selection.

Moreover, by combining CSS selectors with Playwright’s built-in locator methods, you can create tests that are not only more reliable but also easier to read and maintain in the long run.

Playwright CSS Selectors FAQs

Aravind

Hi, I’m Aravind — a seasoned Automation Test Engineer with over 17 years of hands-on experience in the software testing industry. I specialize in tech troubleshooting and tools like Selenium, Playwright, Appium, JMeter, and Excel automation. Through this blog, I share practical tutorials, expert tips, and real-world insights to help testers and developers improve their automation skills.In addition to software testing, I also explore tech trends and user-focused topics, including Snapchat guides, codeless test automation, and more.