codegen.md

id	title
codegen	Test Generator

Playwright comes with the ability to generate tests out of the box and is a great way to quickly get started with testing. It will open two windows, a browser window where you interact with the website you wish to test and the Playwright Inspector window where you can record your tests, copy the tests, clear your tests as well as change the language of your tests.

Running Codegen

npx playwright codegen demo.playwright.dev/todomvc

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen demo.playwright.dev/todomvc"

playwright codegen demo.playwright.dev/todomvc

pwsh bin/Debug/netX/playwright.ps1 codegen demo.playwright.dev/todomvc

Run codegen and perform actions in the browser. Playwright will generate the code for the user interactions. Codegen will attempt to generate resilient text-based selectors.

Emulate viewport size

Playwright opens a browser window with it's viewport set to a specific width and height and is not responsive as tests need to be run under the same conditions. Use the --viewport option to generate tests with a different viewport size.

npx playwright codegen --viewport-size=800,600 playwright.dev

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --viewport-size=800,600 playwright.dev"

playwright codegen --viewport-size=800,600 playwright.dev

pwsh bin/Debug/netX/playwright.ps1 codegen --viewport-size=800,600 playwright.dev

Emulate devices

Record scripts and tests while emulating a mobile device using the --device option which sets the viewport size and user agent among others.

npx playwright codegen --device="iPhone 11" playwright.dev

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --device="iPhone 11" playwright.dev'

playwright codegen --device="iPhone 11" playwright.dev

pwsh bin/Debug/netX/playwright.ps1 codegen --device="iPhone 11" playwright.dev

Emulate color scheme

Record scripts and tests while emulating the color scheme with the --color-scheme option.

npx playwright codegen --color-scheme=dark playwright.dev

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --color-scheme=dark playwright.dev"

playwright codegen --color-scheme=dark playwright.dev

pwsh bin/Debug/netX/playwright.ps1 codegen --color-scheme=dark playwright.dev

Emulate geolocation, language and timezone

Record scripts and tests while emulating timezone, language & location using the --timezone, --geolocation and --lang options. Once page opens, click the "show your location" icon at them bottom right corner of the map to see geolocation in action.

npx playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args='codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com'

playwright codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com

pwsh bin/Debug/netX/playwright.ps1 codegen --timezone="Europe/Rome" --geolocation="41.890221,12.492348" --lang="it-IT" maps.google.com

Preserve authenticated state

Run codegen with --save-storage to save cookies and localStorage at the end of the session. This is useful to separately record an authentication step and reuse it later in the tests.

After performing authentication and closing the browser, auth.json will contain the storage state.

npx playwright codegen --save-storage=auth.json

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen  --save-storage=auth.json"

playwright codegen --save-storage=auth.json

pwsh bin/Debug/netX/playwright.ps1 codegen --save-storage=auth.json

Run with --load-storage to consume previously loaded storage. This way, all cookies and localStorage will be restored, bringing most web apps to the authenticated state without the need to login again.

npx playwright codegen --load-storage=auth.json github.com/microsoft/playwright

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="codegen --load-storage=auth.json github.com/microsoft/playwright"

playwright codegen --load-storage=auth.json github.com/microsoft/playwright

pwsh bin/Debug/netX/playwright.ps1 codegen --load-storage=auth.json github.com/microsoft/playwright

Use the open command with --load-storage to open the saved auth.json.

npx playwright open --load-storage=auth.json github.com/microsoft/playwright

mvn exec:java -e -Dexec.mainClass=com.microsoft.playwright.CLI -Dexec.args="open --load-storage=auth.json github.com/microsoft/playwright"

playwright open --load-storage=auth.json github.com/microsoft/playwright

pwsh bin/Debug/netX/playwright.ps1 open --load-storage=auth.json github.com/microsoft/playwright

Record using custom setup

If you would like to use codegen in some non-standard setup (for example, use [method: BrowserContext.route]), it is possible to call [method: Page.pause] that will open a separate window with codegen controls.

const { chromium } = require('@playwright/test');

(async () => {
  // Make sure to run headed.
  const browser = await chromium.launch({ headless: false });

  // Setup context however you like.
  const context = await browser.newContext({ /* pass any options */ });
  await context.route('**/*', route => route.continue());

  // Pause the page, and start recording manually.
  const page = await context.newPage();
  await page.pause();
})();

import com.microsoft.playwright.*;

public class Example {
  public static void main(String[] args) {
    try (Playwright playwright = Playwright.create()) {
      BrowserType chromium = playwright.chromium();
      // Make sure to run headed.
      Browser browser = chromium.launch(new BrowserType.LaunchOptions().setHeadless(false));
      // Setup context however you like.
      BrowserContext context = browser.newContext(/* pass any options */);
      context.route("**/*", route -> route.resume());
      // Pause the page, and start recording manually.
      Page page = context.newPage();
      page.pause();
    }
  }
}

import asyncio
from playwright.async_api import async_playwright

async def main():
    async with async_playwright() as p:
        # Make sure to run headed.
        browser = await p.chromium.launch(headless=False)

        # Setup context however you like.
        context = await browser.new_context() # Pass any options
        await context.route('**/*', lambda route: route.continue_())

        # Pause the page, and start recording manually.
        page = await context.new_page()
        await page.pause()

asyncio.run(main())

from playwright.sync_api import sync_playwright

with sync_playwright() as p:
    # Make sure to run headed.
    browser = p.chromium.launch(headless=False)

    # Setup context however you like.
    context = browser.new_context() # Pass any options
    context.route('**/*', lambda route: route.continue_())

    # Pause the page, and start recording manually.
    page = context.new_page()
    page.pause()

using Microsoft.Playwright;

using var playwright = await Playwright.CreateAsync();
var chromium = playwright.Chromium;
// Make sure to run headed.
var browser = await chromium.LaunchAsync(new BrowserTypeLaunchOptions { Headless = false });

// Setup context however you like.
var context = await browser.NewContextAsync(); // Pass any options
await context.RouteAsync("**/*", route => route.ContinueAsync());

// Pause the page, and start recording manually.
var page = await context.NewPageAsync();
await page.PauseAsync();