Playwright Codegen: Generate Tests & Locators Fast

Generate Playwright tests and locators with Codegen. Record user actions, add assertions like visibility and text, and fine-tune locators for robust, reliable end-to-end tests.

Playwright Codegen provides an efficient way to generate tests and locators automatically, accelerating the test creation process. It opens a browser for interaction and an Inspector for recording and managing generated code.

Getting Started with Codegen

Running Codegen

To start the test generator, use the codegen command followed by the URL of the website you wish to test. The URL is optional and can be entered directly in the browser window if omitted.

npx playwright codegen https://demo.playwright.dev/todomvc

This command launches:

• A browser window for interactions.

• The Playwright Inspector, which displays the generated code.

Recording a Test

Codegen automatically generates Playwright code as you interact with the browser. It analyzes the page to recommend robust locators (prioritizing role, text, and test id), refining them to uniquely identify elements and reduce flakiness.

Recording Actions

Perform actions in the browser window, such as:

• Clicking: Clicking on buttons, links, etc.

• Filling: Typing text into input fields.

• Navigating: Visiting different pages.

Adding Assertions

You can add assertions directly during recording:

1. Click the "Assert" icon in the Playwright Inspector toolbar.

2. Click a page element in the browser.

3. Choose the assertion type from the options:

*   **Assert Visibility**: `expect(locator).toBeVisible()`

*   **Assert Text**: `expect(locator).toHaveText()`

*   **Assert Value**: `expect(locator).toHaveValue()`

Managing Recording

• Stop Recording: Press the "Record" button in the Inspector to pause code generation.

• Copy Code: Use the "Copy" button to transfer the generated code to your editor.

• Clear Code: Use the "Clear" button to reset the Inspector and start a new recording.

Once finished, close the Playwright Inspector window or terminate the command in your terminal.

Example Generated Test

Below is an example of a test generated by interacting with the todomvc application (e.g., adding an item and marking it complete).

import { test, expect } from '@playwright/test';

test('should add a todo item and mark it complete', async ({ page }) => {
  await page.goto('https://demo.playwright.dev/todomvc');

  // Add a new todo item
  await page.getByPlaceholder('What needs to be done?').fill('buy some milk');
  await page.getByPlaceholder('What needs to be done?').press('Enter');

  // Assert the new item is visible
  await expect(page.getByLabel('buy some milk')).toBeVisible();

  // Mark the item as complete
  await page.getByLabel('Toggle Todo').check();

  // Assert the item is marked complete (e.g., has a line-through style)
  await expect(page.getByLabel('buy some milk')).toHaveClass('completed');
});

Generating Locators

Codegen can also be used specifically to generate robust locators for existing tests or new elements.

1. Stop Recording: If recording, press the "Record" button to stop. The "Pick Locator" button will appear.

2. Activate Locator Picker: Click the "Pick Locator" button.

3. Hover and Select: Hover over elements in the browser window. Playwright highlights the element and displays its recommended locator.

4. Copy Locator: Click on the desired element. Its locator code will appear in the "Locator Playground" next to the "Pick Locator" button.

5. Refine Locator: You can edit the locator in the "Locator Playground" to fine-tune it. As you type, Playwright highlights matching elements in the browser.

6. Copy to Code: Use the "Copy" button to copy the refined locator for use in your tests.

Example Generated Locator

// Example generated locator for an 'Add' button
page.getByRole('button', { name: 'Add' })

// Example generated locator for an input field by placeholder
page.getByPlaceholder('Enter your email')

Emulation

Codegen supports generating tests under various emulation conditions without additional setup. You can emulate:

• Specific viewports and devices.

• Color schemes.

• Geolocation.

• Language.

• Timezone.

It can also preserve authenticated states, allowing you to record tests from a logged-in session. For more details on these advanced features, refer to the comprehensive Playwright Test Generator documentation.