PLAYWRIGHT AUTOMATION CHEAT SHEET Created By Mayukh Bhattacharyya
Installation Navigating to a URL Assertions
npm i playwright await page.goto('https://www.example.com'); // Expect assertion
await expect(element).toBeVisible();
Launching a Browser Debugging Selectors
text= (Text content)
// Debug
css= (CSS selector)
await page.pause();
const { chromium } = require('playwright'); xpath= (XPath expression)
(async () => {
const browser = await chromium.launch();
Command Line id= (Element ID)
const page = await browser.newPage();
debugging Finding Elements
// Automate actions here... const element = await page.$('selector');
await browser.close(); Npx playwright test --debug const elements = await page.$$('selector');
})();
Interactions
Created By Mayukh Bhattacharyya
Screenshots and Videos
// Click // Screenshot
await element.click(); await page.screenshot({ path: 'screenshot.png' });
// Fill input // Video
await element.fill('text'); const context = await browser.newContext({
// Check if element is visible recordVideo: { dir: 'videos/' }
const isVisible = await element.isVisible(); }); Created By Mayukh Bhattacharyya
// Get element text
const text = await element.textContent();
await expect(element).toHaveText('Hello');
Browser Context and Cookies Timeouts and waiting
// New context // Set timeout
const context = await browser.newContext(); page.setDefaultTimeout(5000);
// Get/Set cookies // Wait for element
const cookies = await context.cookies(); await page.waitForSelector('selector');
await context.addCookies([{ name: 'foo', value: 'bar' }]);
Parallel Execution GetBy Selectors
Created By Mayukh Bhattacharyya
// Select by text content
Created By Mayukh Bhattacharyya
const { chromium } = require('playwright');
const element = await page.getByText('Click me');
// Select by label text (for input elements)
(async () => {
const input = await page.getByLabel('Username');
const browser = await chromium.launch();
// Select by placeholder text (for input elements)
const context = await browser.newContext();
const input = await page.getByPlaceholder('Enter your name');
// Create array of promises
// Select by alt text (for image elements)
const promises = [
const image = await page.getByAlt('Product Image');
context.newPage(),
ryya // Select by title text (for elements with a title attribute)
context.newPage(),
h B h a ttacha const link = await page.getByTitle('Learn More');
yuk
context.newPage(),
Ma // Select by role (for accessible elements)
]; Created By const button = await page.getByRole('button');
// Execute promises in parallel // Select by test id (for elements with a data-testid attribute)
const pages = await Promise.all(promises); const component = await page.getByTestId('product-card');
// Automate actions on parallel pages... // Select by aria-label (for accessible elements)
await browser.close(); const nav = await page.getByAriaLabel('Main Navigation');
})();
Created By Mayukh Bhattacharyya Created By Mayukh Bhattacharyya
Handling Popups and Modals Emulating Devices and Viewports
// Wait for and dismiss an alert // Emulate a specific device
const alert = await page.waitForEvent('dialog’); await page.emulate({
await alert.dismiss(); viewport: { isMobile: true, hasTouch: true },
// Wait for and accept a confirm dialog userAgent: 'Mozilla/5.0 (Linux; Android 9; Pixel 3)
const confirm = await page.waitForEvent('dialog’); AppleWebKit/537.36 (KHTML, like Gecko) Chrome/83.0.4103.61 Mobile
await confirm.accept(); Safari/537.36'
// Wait for and handle a prompt dialog });
const prompt = await page.waitForEvent('dialog’); // Set a custom viewport size
await prompt.accept('My input value'); await page.setViewportSize({
width: 1280,
height: 720
Working with Frames and }); Created By Mayukh Bhattacharyya
Shadows Created By Mayukh Bhattacharyya This cheat sheet covers the basic commands and practices for
// Switch to a frame
const frame = await page.frame({ url: launching browsers, navigating pages, interacting with elements,
/\/iframe\.html/ }); assertions, screenshots/videos, context management, timeouts,
const element = await frame.$('selector');
// Switch to a shadow root
debugging, and parallel execution. You can refer to the official
const shadow = await element.shadowRoot(); Playwright documentation for more advanced topics and examples.
const shadowElement = await shadow.$('selector');
