Playwright flashcards

Drive Chromium, Firefox and WebKit with auto-waiting locators, fixtures, network control and traces.

Beginner friendly, starts from zero

CardsCheatsheetTips and tricks

PlaywrightStart from zero · 1 of 12

What is Playwright, in one plain sentence?

Think of the answer, then tap

Playwright is a free tool that opens a web and uses a website by itself, clicking and typing like a person, to check that the site works.

A robot that uses your website so you do not have to.

Show again

12 left

Got it

Drag the card: right if you know it, left to see it again, up to skip · Space turn over · K got it · J again · ← back

Tap to turn over. Swipe right if you know it, left to see it again.

All topics

What you will learn

Start from zero
- What Playwright is and why it exists4 cards
- Key words for web tests4 cards
- Tools and your first lines4 cards
Core basics
- Install and write your first test4 cards
- Locators3 cards
- Actions and auto-waiting2 cards
- Assertions2 cards
- Config, UI mode, codegen and reports4 cards
Next steps
- Fixtures, page objects and sign-in4 cards
- Network, mocking and API tests4 cards
- Projects, devices and the web server3 cards
- Tricky elements: rows, files and dialogs3 cards
- Traces and test steps2 cards
- Visual and accessibility checks2 cards
Go deeper
- Custom fixtures and test isolation2 cards
- Parallelism, sharding and CI6 cards
- Assertions for complex UIs3 cards
- Time, tabs and frames3 cards
- Debugging, component tests and AI tooling3 cards

Final test and certificate

10 questions drawn fresh from the whole topic, about 15 minutes. Sign in, score 80% or more and get a free certificate with your name and a public check link anyone can open, such as an employer or a teacher. Not signed in? Try a practice test from the cards.

Take the final test

About these cards

Reviewed 26 October 2026
CoversPlaywright 1.64 (@playwright/test)Node.js 24 LTSChromium, Firefox and WebKit builds bundled with 1.64

Checked against

How these cards are made

Playwright at a glance

Playwright is a free tool that uses a website like a person, clicking and typing, to check it works.

Like a shop tester with a checklist who tries every step and writes a report with photos when something is wrong.

Words you will meet

Browser: The app that shows websites, like Chrome or Safari
Element: One piece of a page, like a button or a box
Locator: A description of how to find an element
Test: A small program that does steps and says pass or fail
Assertion: The check inside a test, like 'the total is Rs 240'
Headless: The browser runs with no window on screen
Trace: A step by step recording of a test run
Terminal: The window where you type commands

The steps

1. Start from zero (12 cards): What Playwright is, the words tests use, and your first two-line check.
2. Core basics (15 cards): Install, locate by role, act, assert with retries, and read the report.
3. Next steps (18 cards): Fixtures, contexts, auth state, network routing, API calls, projects and traces.
4. Go deeper (17 cards): Worker fixtures, parallelism, sharding, clocks, aria snapshots, popups and AI agents.

All 12 cards in Start from zero

What is Playwright, in one plain sentence?: Playwright is a free tool that opens a web browser and uses a website by itself, clicking and typing like a person, to check that the site works.
Before tools like this, how did teams check a website?: People clicked through every page by hand before each release: slow, boring and easy to miss things. Older robot tools often clicked before the page was ready and failed for no real reason.
Where does this touch your daily life?: When a shop's checkout still works the morning after an update, a robot test like this likely tried it first. You do the same by hand when you fill a form twice to see if it works.
What everyday job is Playwright like?: A shop tester with a written checklist: open the shop, add tea to the cart, check the total says Rs 240. If anything is off, he writes a report with photos of what he saw.
What are a browser, a page, an element and the DOM?: A browser is the app that shows websites; Playwright drives three kinds: Chromium (inside Chrome and Edge), Firefox and WebKit (inside Safari). An element is one piece of a page, like a button, and the DOM is the browser's live map of all of them.
What are a 'test', an 'assertion' and a 'fixture'?: A test is a small program that does steps and says pass or fail. An assertion is the check, like 'expect the total to be Rs 240'; Playwright's assertions keep retrying until a timeout (5 seconds by default) before failing.
What are a 'locator', a 'role', a 'label' and a 'test id'?: A locator describes how to find an element, like 'the button named Add to cart'. Role is what an element is for (button, link, checkbox), label is the visible name beside a box, and a test id is a hidden name tag added just for tests.
What do 'headless', 'CI', 'trace' and 'report' mean?: Headless means the browser runs with no window on screen. CI is a computer that runs your tests on every code change, a trace is a step by step recording with snapshots, and the report is a web page summary of results.
What are the terminal, Node.js, npm, npx and a config file?: The terminal is the window where you type commands. Node.js runs JavaScript on your computer, npm installs packages (ready-made code), npx runs a package's command, and a config file like playwright.config.ts holds settings.
What do you need before starting?: A computer with Node.js installed, a text editor and a website to test, even your own small page. Knowing a little HTML and JavaScript makes the code cards easy.
Your first tiny win: what do these two lines do?: await means wait for this step to finish. page.goto opens the page in the browser, and the assertion passes if the tab title says Example Domain.
What will you be able to do after this topic?: Install Playwright, write tests that click, type and check like a real user, run them in several browsers, and read the report to find why a test failed.

Playwright cheatsheet

Commands

npm init playwright@latest Set up a project
npx playwright test --ui Interactive runner
npx playwright test cart --project=webkit One file pattern, one browser
npx playwright test -g "coupon" --debug Step through with Inspector
npx playwright test --last-failed Rerun only failures
npx playwright test --only-changed=origin/main Tests touched by this branch
npx playwright codegen localhost:5173 Record a draft
npx playwright show-trace trace.zip Open a trace

Locators

page.getByRole("button", { name: "Pay" }) Role plus accessible name
page.getByLabel("Email") Form field by label
page.getByText("Order placed") Visible text
page.getByTestId("cart-total") data-testid fallback
rows.filter({ hasText: "INV-2041" }) Narrow a list
locator("iframe").contentFrame() Inside an iframe
locator.first() / .nth(2) Only when order matters

Assertions

await expect(loc).toBeVisible() Shown on screen
await expect(loc).toHaveText(/Paid/) Text, retried
await expect(loc).toHaveCount(3) Number of matches
await expect(page).toHaveURL(/orders/) Current URL
await expect(loc).toMatchAriaSnapshot(yaml) Accessibility tree
await expect(page).toHaveScreenshot() Visual compare
expect.soft(...) / expect.poll(fn) Keep going / retry a function

Network and browser control

page.route("**/api/pay", r => r.fulfill({ json })) Mock a response
page.waitForResponse(fn) Start before the click
request.post("/api/test/orders", { data }) Seed via API
context.storageState({ path }) Save sign-in
page.clock.install({ time }) Fake time, before goto
page.once("dialog", d => d.accept()) Accept confirm()
page.waitForEvent("download") Catch a download

Config

use: { baseURL } page.goto("/cart") works
retries: process.env.CI ? 2 : 0 Retries on CI only
use: { trace: "on-first-retry" } Evidence for failures
projects: [{ dependencies: ["setup"] }] Auth setup first
webServer: { command, url, reuseExistingServer } Start the app
fullyParallel: true Parallel inside files
forbidOnly: !!process.env.CI Fail CI on test.only