Playwright Cheatsheet for JavaScript & TypeScript
A comprehensive reference for Playwright scripting, testing, and browser gestures, with copy-ready code snippets.
Automation Quick Start
Install Playwright and local browsers
Loading...
Create a script file
Loading...
Write a basic script
Loading...
Generate code from user behavior
Loading...
Run your script
Loading...
Launch Browsers Locally
Launch Chromium
Loading...
Launch Firefox
Loading...
Launch Webkit
Loading...
Persistent User Data
Browser contexts are normally flushed. But you can optionally store context between sessions.
Launch browser with persist user data
Loading...
Configure persistent context options
Loading...
Chrome Browser Variants
Install Chrome
Loading...
Install Chrome Beta
Loading...
Launch Chrome
Loading...
Launch Chrome Beta
Loading...
Launch Chrome Dev
Loading...
Launch Chrome Canary
Loading...
Edge Browser Variants
Playwright supports all four Edge variants, but you must download Edge Canary manually.
Install Edge
Loading...
Install Edge Beta
Loading...
Install Edge Dev
Loading...
Launch Edge
Loading...
Launch Edge Beta
Loading...
Launch Edge Dev
Loading...
Launch Edge Canary
Loading...
Firefox Browser Variants
Playwright supports all four Firefox variants, but you must download Firefox Dev manually.
Install Firefox
Loading...
Install Firefox Beta
Loading...
Install Firefox Nightly
Loading...
Launch Firefox
Loading...
Launch Firefox Beta
Loading...
Launch Firefox Dev
Loading...
Launch Firefox Nightly
Loading...
Contexts (aka User Sessions)
Create new context
Loading...
Create new context with custom options
Loading...
List all browser's contexts
Loading...
Get the current page's context
Loading...
Close context
Loading...
Close context with a reason
Loading...
Pages
Create new page in context
Loading...
Create new page in new context
Loading...
Create new page in new context with custom options
Loading...
Page Frames
Web pages are made up of frames. The main frame is the viewport, which can contain numerous nested `iframe` elements.
Get parent frame for current page
Loading...
Get frame by `name` attribute
Loading...
Get frame by `url` attribute
Loading...
Get all frames for current page
Loading...
Frame Locators
Use frame locators to find elements within a specific frame. Normal locators stop at the frame boundary.
Create frame locator from CSS selector
Loading...
Create frame locator from locator
Loading...
Locate Elements
Contract-based Locators
These helpers target elements using properties unlikely to change. Use whenever possible for readability and durability.
Select element by role
Loading...
Select element by label
Loading...
Select element by placeholder
Loading...
Select element by title
Loading...
Select element by alt text
Loading...
Select element by text
Loading...
Select element by test id
Loading...
Role-based Selectors
These locators support ARIA roles, states, and properties. Very useful for shorthand selection of most DOM elements.
Select element by role
Loading...
Select element by accessible name
Loading...
Select elements by `checked` state
Loading...
Select elements by `selected` state
Loading...
Select elements by `expanded` state
Loading...
Select elements by `disabled` state
Loading...
Select elements by depth level
Loading...
Match hidden elements with ARIA locators
Loading...
CSS Selectors
Playwright supports all CSS selectors using `document.querySelector()`.
Select elements by CSS selector
Loading...
Select elements by tag name
Loading...
Select elements by tag attribute
Loading...
Select elements by CSS class
Loading...
Select elements by CSS id
Loading...
XPath Selectors
Playwright supports all XPath selectors using `document.evaluate()`. However, XPath selectors are brittle and highly discouraged.
Select element by XPath selector
Loading...
Browser Actions
Get browser type
Loading...
Get browser version
Loading...
Check if browser is connected
Loading...
Close browser (force)
Loading...
Close browser (gentle)
Loading...
Close browser with a reason
Loading...
Listen for browser disconnection event
Loading...
Network Traffic
Intercept network traffic on the `page` or `context` objects using any method listed below. Prefer `page` for narrow targeting.
Send `fetch` request
Loading...
Flush network traffic cache
Loading...
Set default HTTP headers on all requests
Loading...
Wait for Network Traffic
Wait for request matching test
Loading...
Wait for response matching test
Loading...
Wait for page request by URL
Loading...
Wait for page response by URL
Loading...
Network Events
Listen for new network requests
Loading...
Listen for successful network requests
Loading...
Listen for failed network requests
Loading...
Listen for network responses
Loading...
Listen for new websocket requests (`page` only)
Loading...
Intercept Network Traffic
Note: Playwright can't currently intercept traffic to webworkers.
Route all requests through handler
Loading...
Route requests matching glob
Loading...
Route requests matching regex
Loading...
Route request only once
Loading...
Remove all handlers from route
Loading...
Remove all network routes immediately
Loading...
Transforming Network Traffic
All routed requests must be handled using either `.continue()`, `.abort()`, or `.fulfill()`.
Allow routed request to proceed
Loading...
Modify request before allowing to proceed
Loading...
Proceed with request, but intercept response
Loading...
Fulfill routed request with custom response
Loading...
Fulfill routed request with local file
Loading...
Abort routed request
Loading...
Abort routed request with custom error
Loading...
HAR Replay Network Traffic
HAR (HTTP Archive format) records network traffic to replay later. Use for exact reproduction of test conditions or in advanced workflows.
Respond using HAR, aborting unknown requests
Loading...
Respond using HAR, allowing unknown requests
Loading...
Respond using HAR, for requests matching pattern
Loading...
Record HAR file using network traffic
Loading...
Image Generation
Take screenshots of entire pages or specific elements. Most configuration options work in both cases.
Screenshot current viewport
Loading...
Screenshot entire page
Loading...
Screenshot specific element
Loading...
Resize viewport before screenshot
Loading...
Screenshot custom HTML/CSS content
Loading...
Apply custom stylesheet during screenshot
Loading...
Hide specific elements in screenshot
Loading...
Clip screenshot to specific region
Loading...
Save screenshot to file
Loading...
Save screenshot as JPEG
Loading...
Tracing
Record context trace
Loading...
Record context trace with custom prefix
Loading...
Record screenshots for trace
Loading...
Record snapshots of all actions for trace
Loading...
Include source files in trace
Loading...
Stop recording context trace
Loading...
Save context trace to specific file
Loading...
Debugging
Launch browser with custom logger
Loading...
Launch browser with slow motion
Loading...
Launch browser in headed mode
Loading...
Open browser DevTools automatically
Loading...
Browser Servers
Connect to remote browser server
Loading...
Connect to remote browser server over CDP
Loading...
Launch a local browser server
Loading...
Connect to local browser server
Loading...
Close browser server
Loading...
Testing Quick Start
Get started without any configuration required.
Install Playwright for testing
Loading...
Create a test file
Loading...
Write a basic test
Loading...
Generate code from user behavior
Loading...
Run your tests
Loading...
Run your tests in UI mode
Loading...
Show test results in browser
Loading...
Writing Tests
Write a basic test
Loading...
Attach screenshot to a test
Loading...
Test Groups
Test groups cluster tests for shared configuration and organized reporting.
Create a test group
Loading...
Create nested test groups
Loading...
Test Steps
Test steps improve report readability. They can also be reused across multiple tests.
Break a test into steps
Loading...
Create reusable test steps
Loading...
Test Fixtures
Use Playwright's built-in fixtures to save time on setup and teardown.
Access `page` fixture in test
Loading...
Access `context` fixture in test
Loading...
Access `browser` fixture in test
Loading...
Access `request` fixture in test
Loading...
Custom Test Fixtures
Create fixtures to share behavior and improve readability.
Create fixture with setup and teardown
Loading...
Override fixture implementation
Loading...
Combine multiple custom fixture assignments
Loading...
Share fixture across all tests in worker
Loading...
Test Runner Configuration
Create a config file
Loading...
Write basic config
Loading...
Minimize CLI output
Loading...
Configure Exit Criteria
Retry failed tests before marking as failed
Loading...
Repeat all tests before marking as passed
Loading...
Fail individual tests if they exceed timeout
Loading...
Fail test suite if exceeds timeout
Loading...
Fail test suite early, after N failures
Loading...
Output Files
Select test results output path
Loading...
Only preserve test results on failure
Loading...
Test Environment Options
Configure your test environment, browser, and emulated device.
Connect to browser server
Loading...
Configure Behavior
Show browser window during tests
Loading...
Screenshot tests automatically
Loading...
Record video of tests automatically
Loading...
Record trace data for tests automatically
Loading...
Set delay between user actions
Loading...
Enable or disable JavaScript
Loading...
Grant custom browser permissions automatically
Loading...
Configure Network Traffic
Enable relative URLs with custom base URL
Loading...
Set custom HTTP credentials
Loading...
Send custom default HTTP headers with requests
Loading...
Route all traffic through a proxy server
Loading...
Ignore HTTPS errors
Loading...
Configure Browsers
Emulate specific browsers quickly
Loading...
Select browser to use for tests
Loading...
Set user preferred color scheme
Loading...
Set browser viewport size
Loading...
Configure Locale
Emulate custom locale
Loading...
Emulate custom timezone
Loading...
Emulate custom geolocation
Loading...
Test Parallelization
By default, Playwright executes test files in parallel, but it executes a file's tests in order.
Run test files in parallel, tests sequentially
Loading...
Run all tests in all files in parallel
Loading...
Set number of parallel workers
Loading...
Disable all parallelism (forcefully)
Loading...
Test File & Group Parallelism
Note that parallelizing tests within a file prohibits tests from sharing state. Use wisely.
Run a single file's tests in parallel
Loading...
Run a test group's tests in parallel
Loading...
Page Assertions
Assert page has specific title
Loading...
Assert page has specific URL
Loading...
Element Property Assertions
Assert element is visible
Loading...
Assert element is hidden
Loading...
Assert element is enabled
Loading...
Assert element is disabled
Loading...
Assert element is checked
Loading...
Assert element is focused
Loading...
Assert element is in the viewport
Loading...
Assert element has text content
Loading...
Assert element has attribute
Loading...
Assert element has class
Loading...
Assert element has value
Loading...
Assert list has N elements
Loading...
Assert element has CSS property
Loading...
Visual Assertions
Page Screenshot Assertions
Assert page matches screenshot
Loading...
Assert image matches named screenshot
Loading...
Assert page roughly matches screenshot
Loading...
Element Screenshot Assertions
Assert element matches screenshot
Loading...
Assert element matches named screenshot
Loading...
Test Annotations
.only() Tests
Run only this test
Loading...
Run only tests in this group
Loading...
.skip() Tests
Skip this test
Loading...
Skip test conditionally
Loading...
.fixme() Tests
Mark test as fixme (skipped)
Loading...
.slow() Tests
Mark test as slow (3x timeout)
Loading...
.fail() Tests
Mark test as expected to fail
Loading...
API Testing
Send GET request
Loading...
Send POST request
Loading...
Send PUT request
Loading...
Send DELETE request
Loading...
Parameterize Tests
Parameterize tests across multiple projects
Loading...
Local Web Server
Launch web server during tests
Loading...
Launch multiple web servers during tests
Loading...
Test Reporters
Configure test reporters
Loading...
CLI Reporters
Use list reporter (default)
Loading...
Use dot reporter
Loading...
Use line reporter
Loading...
File Reporters
Use JSON reporter
Loading...
Use JUnit reporter
Loading...
Use HTML reporter
Loading...
Run Tests via CLI
Run all tests
Loading...
Run tests in a specific file
Loading...
Run tests matching pattern
Loading...
Run tests in a specific project
Loading...
Run tests in headed mode
Loading...
Run tests in debug mode
Loading...
Run tests with specific number of workers
Loading...
Run tests and show results in browser
Loading...
Mouse Control
Move mouse and click at specific coordinates
Loading...
Move mouse and click with delay between events
Loading...
Click element with modifier keys
Loading...
Click element with custom X/Y coordinates
Loading...
Move mouse and double-click at specific coordinates
Loading...
Double-click element
Loading...
Scroll mouse wheel horizontally
Loading...
Scroll mouse wheel vertically
Loading...
Hover element
Loading...
Hover element with custom options
Loading...
Drag and Drop
Playwright supports manual and automatic drag-and-drop behavior. Use the automatic method, if possible.
Drag and drop element (easy method)
Loading...
Drag and drop with custom X/Y coordinates
Loading...
Drag and drop element (manual method)
Loading...
Low-level Mouse Events
Dispatch `mousedown` event
Loading...
Dispatch `mouseup` event
Loading...
Dispatch `mousemove` event
Loading...
Dispatch `mousemove` event across smooth steps
Loading...
Dispatch mouse events to specific element
Loading...
Keyboard Control
Type text with keyboard
Loading...
Type text with delay between presses
Loading...
Press key combination
Loading...
Press key combination with delay
Loading...
Press key combination in specific element
Loading...
Low-level Keyboard Events
Dispatch `keydown` event
Loading...
Dispatch `keyup` event
Loading...
Dispatch keyboard events on specific element
Loading...
Touchscreen Control
Tap screen at specific coordinates
Loading...
Low-level Touchscreen Events
Dispatch touchscreen events to specific element
Loading...
Events and Listeners
Listen for page load event
Loading...
Listen for page DOM content loaded event
Loading...
Listen for page close event
Loading...
Listen for page crash event
Loading...
Listen for page dialog event
Loading...
Listen for console messages
Loading...
Remove event listener
Loading...
Listen for event only once
Loading...
Wait for an event to be emitted
Loading...