Your Go-To Playwright TypeScript Cheat Sheet
Some Common Commands around Navigation and Clicking
If you are working with Playwright and TypeScript for your automated tests, you know how crucial it is to have quick access to common commands. We have put together a handy cheat sheet that covers essential Playwright operations, making your development process smoother and faster.
This cheat sheet is designed as a quick reference guide, perfect for both beginners getting started with Playwright and experienced users who need a reminder of specific syntax. It is organized into logical sections, covering navigation, input, clicking, content retrieval, and dialog handling.
Download Playwright Cheat Sheet (JPG)
What's Included in the Cheat Sheet?
Here is a breakdown of the key areas covered in this valuable resource:
Navigation
Learn how to navigate through web pages with commands like page.goto(), page.goBack(), page.goForward(), and page.reload(). Also included are useful page.waitForURL() and page.waitForLoadState() examples to ensure your tests wait for the page to be ready.
// Navigation
await page.goto('https://www.example.com');
await page.goBack();
await page.goForward();
await page.reload();
await page.waitForURL('**/dashboard'); // Waits for URL to match a pattern
await page.waitForLoadState('networkidle'); // 'load', 'domcontentloaded', 'networkidle'
Input
Handling user input is a core part of testing. This section demonstrates how to fill text fields using page.fill(), type character by character with page.type(), press specific keys with page.press(), and manage dropdowns with page.selectOption(). It also shows how to upload files using page.setInputFiles().
// Input
await page.fill('#username', 'myUser'); // Fills input field
await page.type('#search-input', 'playwright'); // Types character by character
await page.press('body', 'Escape'); // Presses a key on the page
await page.selectOption('#country-select', 'USA'); // Selects option by value
await page.selectOption('#multi-select', ['option1', 'option2']); // Multi-select
await page.setInputFiles('input[type="file"]', 'path/to/file.png'); // Uploads file
Clicking & Interaction
From simple clicks to more advanced interactions, this part of the cheat sheet covers page.click(), double clicks with page.dblclick(), checking and unchecking checkboxes/radios using page.check() and page.uncheck(). You will also find examples for hovering over elements with page.hover(), focusing on input fields with page.focus(), granular keyboard control with page.keyboard.press(), and clicking at specific coordinates with page.mouse.click().
// Clicking & Interaction
await page.click('button#submit');
await page.dblclick('.item');
await page.check('#remember-me'); // Checks a checkbox/radio
await page.uncheck('#subscribe'); // Unchecks a checkbox
await page.hover('.menu-item');
await page.focus('input-field');
await page.keyboard.press('Enter'); // More granular keyboard control
await page.mouse.click(100, 200); // Clicks at specific coordinates
Content Retrieval
Extracting information from the page is essential for assertions. This section provides commands to get text content using page.innerText(), HTML content with page.innerHTML(), input values via page.inputValue(), and attribute values with page.getAttribute().
// Content Retrieval
const text = await page.innerText('.welcome-message');
const html = await page.innerHTML('#content');
const value = await page.inputValue('input-field');
const attribute = await page.getAttribute('img', 'alt');
Dialog
Learn how to handle browser dialogs such as alerts, confirms, and prompts. The cheat sheet illustrates how to listen for dialog events using page.on('dialog') and how to accept or dismiss them with dialog.accept() and dialog.dismiss().
// Dialog
page.on('dialog', async dialog => {
console.log(dialog.message());
await dialog.accept(); // Or dialog.dismiss()
});
await page.click('#show-alert-button');
We hope this Playwright TypeScript Cheat Sheet becomes an indispensable tool in your automation journey. Keep it handy and happy testing!