CSS Selector Reference Sheet in PlayWright
PlayWright with Typescript reference guide
When working with Playwright and TypeScript, having a concise reference guide for selectors and locators can significantly improve productivity. This cheat sheet highlights commonly used locator strategies and actions in Playwright - ideal for anyone writing end-to-end tests or automating modern web applications.
Below is a handy visual cheat sheet that you can download and keep nearby during your testing work.
Highlights from the Cheat Sheet
Here's a breakdown of some key locator patterns and actions:
// CSS Selectors
page.locator('#id');
page.locator('.class');
page.locator('tagname');
page.locator('[data-test="button"]');
// By Text
page.locator('text=Submit');
page.locator('text=/Submit/i');
page.getByText('Submit');
// By Role (Recommended for accessibility)
page.getByRole('button', { name: 'Submit' });
page.getByRole('textbox', { name: 'Username' });
page.getByRole('checkbox', { name: 'Remember me' });
page.getByRole('link', { name: 'Learn More' });
// By Test ID
page.getByTestId('submit-button');
// Filtering Locators
page.locator('div.card').getByRole('button', { name: 'Add to Cart' });
page.locator('.item').first();
page.locator('.item').last();
page.locator('.item').nth(2);
// Filter by text content
page.locator('.product-item').filter({ hasText: 'Limited Edition' });
// Filter by child element
page.locator('.product-card').filter({ has: page.locator('.discount-badge') });
// Actions on Locators
await page.locator('#element').click();
await page.locator('#element').fill('value');
await page.locator('#element').scrollIntoViewIfNeeded();
This cheat sheet is great for both beginners and experienced QA engineers who want quick access to essential Playwright syntax. It covers a variety of selector strategies from basic CSS to accessibility-driven roles and filtering techniques.
Feel free to print it out, save it, or bookmark this post for future reference.