A Playwright test drives a real browser: it navigates to a page, interacts with elements, and asserts the result. Each test is an async function that receives a page object — you call actions like page.goto and page.click, then check the outcome with expect(). The fastest way to start is to build the flow from plain steps and let a generator write the code. Here is how it fits together.
Visit a URL, fill inputs, click a button, then assert text or the URL.
A complete @playwright/test spec is produced from your steps.
Swap the example selectors for ones that match your app (ids, roles, test-ids).
Save as a .spec.ts file and run npx playwright test.
Anatomy of a Playwright test
A test imports { test, expect }, then calls test(name, async ({ page }) => { … }). Inside, await page.goto(url) navigates, await page.fill(sel, text) types, await page.click(sel) clicks, and await expect(page.locator(sel)).toHaveText(…) asserts. The Playwright generator writes all of this from your steps.
Good selectors make stable tests
Prefer user-facing or dedicated test selectors (data-testid, roles, labels) over brittle CSS paths. Stable selectors are the single biggest factor in tests that don’t break on every refactor. Building a complex selector? Test it first with the regex tester if it’s pattern-based.
Tip: Start each test from a known state (a fresh login or seeded data) so it can run independently — tests that depend on each other’s side effects are flaky.
Generate a Playwright test now
Build the flow from steps and get ready-to-run code — free, in your browser.
Open the Playwright Generator →Frequently Asked Questions
How do I write a Playwright test?
Create an async test that receives page, call actions like goto/fill/click, then assert with expect(). A generator can scaffold it from steps.
What language is it?
Usually TypeScript or JavaScript with @playwright/test. The generator outputs TypeScript-compatible code.
Is my flow uploaded?
No — the code is generated in your browser.