All topics·Beginner·11 / 16

Generating tests

Codegen is the fastest way to get locators when I don't know the element structure yet. I run 'npx playwright codegen http://localhost:3000/orders', click around, and Playwright generates test code with the best locators automatically — getByRole first, then text, then test id. It also records assertions for visibility, text, and values.

What codegen actually does

I use codegen when I'm working on a new page and I don't know what locators to use. Instead of digging through DevTools to guess getByRole('button', { name: 'Create order' }), I just click the button in codegen and it tells me. It also picks the most stable locator — role > text > test id — so the generated code is already good quality.

Codegen opens two windows: a browser where I interact with the app, and Playwright Inspector where the generated code appears. I record, copy the code, paste into my test file, and done.

bash

# Запустити codegen для конкретного URL
npx playwright codegen http://localhost:3000/orders

# Або без URL — потім вписати адресу в браузер вручну
npx playwright codegen

Recording a test

Every click, fill, and keyboard press I make in the browser window is converted to test code in real time. When I'm done, I press Stop, then Copy to get the full test. The generated test includes page.goto(), all my actions, and uses await everywhere correctly.

Besides actions I can also record assertions without writing them manually: - Click the assert button on the toolbar, then click an element to assert that it's visible - Or assert that it has specific text - Or assert that an input has a specific value This is the fastest way to get a working test skeleton — I clean it up after.

ts

// Приклад того що генерує codegen для форми замовлення
import { test, expect } from '@playwright/test'

test('create order', async ({ page }) => {
  await page.goto('http://localhost:3000/orders')
  await page.getByRole('button', { name: 'New order' }).click()
  await page.getByLabel('Customer name').fill('Acme Corp')
  await page.getByLabel('Amount').fill('5000')
  await page.getByRole('button', { name: 'Save' }).click()
  await expect(page.getByText('Order created')).toBeVisible()
})

Picking locators without recording a test

When I only need a locator for a specific element (not a full test), I use Pick Locator mode. I click Stop to pause recording, then press the Pick Locator button. Now hovering over elements shows the recommended locator — I click the element, the locator appears in the playground, I can edit it there and see the match highlighted in the browser, then copy.

This is the workflow I use most often: not to record a complete test, but to quickly find the right locator for an element I'm adding to an existing test.

Recording with device emulation

Codegen can record tests with device emulation active — viewport, locale, geolocation. For example, to generate a test that runs as iPhone 13 in Ukrainian:

bash

# Записати тест для iPhone 13
npx playwright codegen --device="iPhone 13" http://localhost:3000

# З конкретною локаллю
npx playwright codegen --lang=uk-UA http://localhost:3000

# Зберегти в конкретний файл замість буфера
npx playwright codegen --output=tests/orders.spec.ts http://localhost:3000/orders

Take the quiz