Record actions and generate tests with codegen
Use `npx playwright codegen [options] [url]` to record actions and generate tests for multiple languages.
code generation
22 notes, read out of this brain and free to use. Each one was extracted from a source and is re-checked against its exam.
Codegen command options
Codegen options: `-b, --browser <name>` to specify browser (chromium, firefox, or webkit, default: chromium), `-o, --output <file>` to specify output file for generated script, `--target <language>` to specify language (javascript, playwright-test, python, etc.), `--test-id-attribute <attr>` to specify attribute to use for test IDs.
Pick locator button in VS Code generates locator code
Click the 'Pick locator' button from the testing sidebar and hover over elements in the browser window to see the locator highlighted underneath each element. Click the element you require and it will show up in the 'Pick locator' box. Press Enter to copy the locator into the clipboard, or press Escape to cancel.
Test generator prioritizes locators by role, text, and test id
The Playwright test generator looks at the page and figures out the best locator, prioritizing role, text and test id locators. If the generator finds multiple elements matching the locator, it will improve the locator to make it resilient and uniquely identify the target element.
VS Code extension record new test creates test-1.spec.ts file
In VS Code, clicking the 'Record new' button from the Testing sidebar creates a test-1.spec.ts file and opens a browser window for recording.
Test generator can generate three types of assertions
The test generator can generate three types of assertions: 'assert visibility' to assert that an element is visible, 'assert text' to assert that an element contains specific text, and 'assert value' to assert that an element has a specific value.
Record at cursor feature for appending actions to tests
The 'Record at cursor' button allows you to record from a specific point in your test by moving your cursor to where you want to record more actions. If the browser window is not already open, first run the test with 'Show browser' checked before clicking 'Record at cursor'.
Playwright Inspector codegen command generates test code
Using the codegen command opens two windows: a browser window where you interact with the website and the Playwright Inspector window where you can record tests. The URL is optional when running codegen.
codegen command with --viewport-size option
Use the --viewport-size option with codegen to generate tests with a different viewport size. Example: npx playwright codegen --viewport-size="800,600" playwright.dev
codegen command with --device option emulates mobile device
Use the --device option with codegen to record scripts and tests while emulating a mobile device, which sets the viewport size and user agent among other properties. Example: npx playwright codegen --device="iPhone 13" playwright.dev
codegen command with --color-scheme option emulates dark or light mode
Use the --color-scheme option with codegen to record scripts and tests while emulating a specific color scheme. Example: npx playwright codegen --color-scheme=dark playwright.dev
codegen emulation options for timezone, geolocation, and language
Use the --timezone, --geolocation, and --lang options with codegen to record tests while emulating timezone, language, and location. Example: npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" bing.com/maps
codegen --save-storage option preserves authenticated state
Run codegen with --save-storage to save cookies, localStorage, and IndexedDB data at the end of the session. This is useful to separately record an authentication step and reuse it later when recording more tests. Example: npx playwright codegen github.com/microsoft/playwright --save-storage=auth.json
auth.json contains sensitive authentication information and should not be committed
The auth.json file created by --save-storage contains sensitive authentication information including cookies, localStorage, and IndexedDB data. It should only be used locally and should be added to .gitignore or deleted once test generation is finished.
codegen --load-storage option restores authenticated state
Run codegen with --load-storage to consume previously saved storage from an auth.json file. This restores cookies, localStorage, and IndexedDB data, bringing most web apps to the authenticated state without needing to login again. Example: npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright
codegen --user-data-dir option uses custom browser profile
Run codegen with --user-data-dir to set a fixed user data directory for the browser session. If you create a custom browser user data directory, codegen will use this existing browser profile and have access to any authentication state present in that profile. Example: npx playwright codegen --user-data-dir=/path/to/your/browser/data/ github.com/microsoft/playwright
Chrome 136 default user data directory not accessible to automated tooling
As of Chrome 136, the default user data directory cannot be accessed via automated tooling such as Playwright. You must create a separate user data directory for use in testing.
codegen --http-credentials option for HTTP Basic Authentication
Run codegen with --http-credentials to authenticate with HTTP Basic Authentication. Unlike credentials embedded in the URL, they are sent to any origin that requests them during the recording session and are included in the generated code. Example: npx playwright codegen --http-credentials="username:password" example.com
Using page.pause() for custom setup recording with codegen
If you want to use codegen in a non-standard setup, such as with custom context routing, call page.pause() to open a separate window with codegen controls. This allows you to set up the context however you like and then start recording manually.
Custom setup codegen example with context routing in JavaScript
Example showing how to use page.pause() with custom context setup: const { chromium } = require('@playwright/test'); (async () => { const browser = await chromium.launch({ headless: false }); const context = await browser.newContext({ /* pass any options */ }); await context.route('**/*', route => route.continue()); const page = await context.newPage(); await page.pause(); })();
Test generator assertion tools
The Playwright test generator now includes tools to generate assertions: Assert visibility generates toBeVisible(), Assert value generates toHaveValue(), and Assert text generates toContainText().
Test generator with assertions example
```js import { test, expect } from '@playwright/test'; test('test', async ({ page }) => { await page.goto('https://playwright.dev/'); await page.getByRole('link', { name: 'Get started' }).click(); await expect(page.getByLabel('Breadcrumbs').getByRole('list')).toContainText('Installation'); await expect(page.getByLabel('Search')).toBeVisible(); await page.getByLabel('Search').click(); await page.getByPlaceholder('Search docs').fill('locator'); await expect(page.getByPlaceholder('Search docs')).toHaveValue('locator'); }); ```