Why does Playwright prefer getByRole over CSS selectors?

Role and label locators mirror how users and assistive tech perceive the page, so they are resilient to markup changes and also nudge you toward accessible UI. The Playwright team recommends them as the default; CSS selectors are a fallback.

What are web-first assertions?

Assertions like expect(locator).toBeVisible() automatically retry until the condition is met or a timeout passes. This removes flaky fixed waits because Playwright keeps checking as the page settles.

Do I need to add manual waits?

Rarely. Playwright auto-waits for elements to be actionable before clicking or filling, and assertions retry on their own. Only use page.waitForURL or waitForLoadState when you must synchronize on navigation explicitly.

Can one spec run on multiple browsers?

Yes. The browsers are configured in playwright.config.ts projects, so the same spec runs on Chromium, Firefox, and WebKit without changes to the test code.

Where do Playwright tests live?

By default Playwright looks in the testDir set in playwright.config.ts, commonly tests or e2e. Files end in .spec.ts and are picked up automatically by npx playwright test.

Playwright Test Stub Builder

Email me this result

Get this tool's output sent to your inbox, plus one useful tool a week. No spam, unsubscribe any time.

A runnable Playwright spec, generated

Playwright tests use locators and web-first assertions: you find an element by its role or label, act on it, and assert with retrying expectations. A first spec usually logs in and verifies a redirect, then checks navigation. This builder produces that file using the recommended locator style so it is robust out of the gate.

How it works

The tool imports { test, expect } from '@playwright/test' and writes a test('...', async ({ page }) => { ... }). Inside, it calls await page.goto(loginRoute), fills the email and password fields with either page.getByRole('textbox', { name }) or page.getByLabel(name), clicks the submit button via page.getByRole('button', { name }), then asserts the redirect with await expect(page).toHaveURL(/dashboard/). A second test checks navigation by clicking a link and asserting a heading is visible with toBeVisible(). All actions are awaited and all assertions are web-first, so no manual sleeps are needed.

Tips and example

Prefer role/label locators; reach for CSS or data-testid only when no accessible name exists.
Use toHaveURL and toBeVisible assertions rather than fixed timeouts — they retry automatically.
Configure baseURL in playwright.config.ts so page.goto('/login') works with a relative path.

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

test("logs in and reaches the dashboard", async ({ page }) => {
  await page.goto("/login");
  await page.getByLabel("Email").fill("[email protected]");
  await page.getByLabel("Password").fill("Passw0rd!");
  await page.getByRole("button", { name: "Sign in" }).click();
  await expect(page).toHaveURL(/dashboard/);
});