Practise the Playwright API the way you will write it at work: every step is an awaited page action and every check is a web-first expect() assertion. The playground runs your steps one by one on our demo shop, so you can see each fill, click and assertion land. It runs in your browser and supports the Playwright commands listed on this page, not the full Playwright test runner.
Open the Playwright playground
Pick a test from the "Test Cases" dropdown. The Full Checkout Flow is the longest: it logs in, adds the backpack to the cart, fills in the checkout form and checks that the Back Home button appears on the confirmation page.
Every Playwright action returns a promise, so each line starts with await. The playground supports these forms:
Every element in the demo shop has a data-test attribute, which makes a stable selector.
Click "Run Test". The results panel numbers each step, marks it PASS or FAIL and shows how long the run took. The first failing step stops the run, just as a failed assertion stops a real Playwright test.
The log says which step failed and why. The usual causes:
This is the part of the Playwright API the playground carries out. A selector is a CSS selector such as '[data-test="username"]'.
await page.goto('/')
Opens the demo shop (the only address available here)
await page.fill(selector, 'text')
Replaces the field's value in one step
await page.click(selector)
Clicks a button or link
await page.selectOption(selector, 'price-asc')
Picks a value in a select box, such as the sort order
await page.waitForTimeout(1000)
Pauses for the given number of milliseconds
await expect(page.locator(selector)).toBeVisible()
Passes when the element is shown
await expect(page.locator(selector)).toHaveText('text')
Checks the text; also accepts a /regex/, and .first() when several elements match
Anything else, such as getByRole() or toHaveURL(), stops the run with a message naming the command, so a test never shows as passed for steps that did not run.
page.fill() clears a field and sets its value in one step. Use it on the username, password and checkout fields.
Sort the products by price with page.selectOption() and the value price-asc, then check a price with toHaveText(/\$/).
expect(locator).toBeVisible() and toHaveText() describe what the user sees, which keeps a test easy to read.
Log in with a wrong password and assert that the error banner appears with the right message.
Add the backpack to the cart and assert that the cart badge shows 1.
Chain login, cart, the checkout form and Finish into one test that ends on the Back Home button.
In real projects, getByRole(), getByLabel() and getByTestId() survive markup changes better than CSS selectors. This playground uses CSS selectors only.
Actions and expect() assertions retry until the element is ready, so fixed waits like waitForTimeout() are rarely needed outside this playground.
A missing await lets the test move on before the action finishes, which causes failures that come and go and are hard to trace.
Playwright gives every test a fresh browser context, so tests can run in parallel. Log in inside each test, or reuse a saved session with storageState.
The same test can run in Chromium, Firefox and WebKit by adding projects in playwright.config.ts.
No. Playwright runs on Node.js and drives real browsers. This page carries out the core page actions and assertions in your browser so you can practise the syntax and the flow of a test. To run full suites, install it with npm init playwright@latest.
Real Playwright waits automatically for elements before acting on them. This playground runs each step once, so the examples pause briefly after logging in. In your own tests, leave these waits out.
Right-click an element in the demo shop and choose Inspect. Every element you need has a data-test attribute, such as data-test="login-button", which you can use as '[data-test="login-button"]'.
Yes. A Playwright test can call an API through the request fixture, for example const response = await request.get('/api/items'), and check it with await expect(response).toBeOK(). This playground focuses on the user interface.
Run a test to see results