Skip to the content

/

Playwright

Playwright 1.65

Playwright: 0% done

Module 1 · What testing is, and why a real browser

Every app gets checked, by hand or by code

Loading the slide…

A line of words about as long as a slide’s first line, and its second.

Another line, shorter.

1 / 179 · What testing is, and why a real browser

Course progress

0%

Every app gets checked, by hand or by code
, 1 to practiseA test does three things: prepare, act, check
Small tests check pieces, big tests check journeys
, 1 to practiseMany small tests, fewer big ones
Some bugs only show up in a browser
, 1 to practisePlaywright drives real browsers from code
, 1 to practiseWhat makes a test worth having
Recap

A web page starts as text called HTML
The browser turns HTML into a tree: the DOM
, 1 to practiseJavaScript changes the page while you watch
A click is a series of events
Pages talk to servers in the background
The accessibility tree: the page as a screen reader hears it
, 2 to practisePractise: roles and names
Recap

The terminal: typing commands to your computer
Node.js runs JavaScript; npm installs tools
One command sets up a project
, 1 to practiseWhat the starter creates
Playwright brings its own browsers
, 1 to practiseHeadless: a browser with no window
, 1 to practiseTry it
Recap

A whole test in nine lines
What each line does
, 1 to practiseWhy every line starts with await
, 1 to practiseRunning it
Reading a failure
, 2 to practisePractise: write a check
Recap

, 1 to practiseChoosing which tests run
A few flags you will use every day
The HTML report
, 1 to practiseUI mode: watch, rerun, and step back in time
Codegen: record a test by clicking
, 1 to practiseTraces: a recording of a test run
Recap

A locator describes an element the way a person would
getByRole: find by what it is and what it is called
, 1 to practiseWhy role first
The other built-in locators
Test ids: a contract with the developers
, 1 to practiseCSS and XPath, when you must
, 1 to practiseStrictness: one action, one element
Recap

Lists repeat the same buttons
Chaining: look inside another element
, 1 to practisefilter keeps the matches you want
First, last, nth: use with care
, 1 to practiseChecking a whole list at once
or and and: two locators in one
, 2 to practisePractise: the right product
Recap

Clicking and typing
, 1 to practisePressing keys
, 1 to practiseCheckboxes, menus, and files
Before every action, Playwright checks it could be done
, 1 to practiseWhen an action times out, the log says why
Do not force it
, 1 to practiseClicks that change the page
Recap

A web-first assertion keeps checking
The assertions you will use most
, 1 to practiseSaying what should not be there
How long assertions wait
, 1 to practisePlain values do not retry
Soft assertions: keep going after a failure
, 1 to practiseWaiting for anything: expect.poll and toPass
Recap

, 1 to practiseEach test stands on its own
test.describe groups related tests
Hooks run code around tests
, 2 to practisePractise: hooks
test.step names parts of a long test
Skipping, marking and focusing
, 1 to practiseTags pick out groups of tests
Avoid tests that depend on each other
Recap

One file sets how every test runs
baseURL: write addresses once
Useful use options
, 1 to practiseProjects run the suite in several setups
Phones and tablets, without a phone
webServer: start the app before the tests
, 2 to practisePractise: write a config
Recap

A fixture is something a test asks for
, 1 to practiseFixtures are made only when asked for
test.extend adds your own fixtures
, 1 to practiseUsing a custom fixture
Code after use is the cleanup
, 1 to practiseFixtures or hooks?
Automatic fixtures run for every test
Recap

The same locators, in every test
A page object for the to-do app
, 1 to practiseTests read like the plan
, 1 to practiseOffer page objects as fixtures
Objects for parts of a page
, 1 to practiseWhen abstraction hurts
, 1 to practiseSmall helper functions are fine too
Recap

Why stand in for the server
, 1 to practisepage.route catches requests; fulfill answers them
, 1 to practiseTesting what happens when things fail
Changing a real response
, 1 to practiseWaiting for a request to finish
Testing an API directly with request
, 1 to practiseUse the API to set up, the browser to check
Recap

How a site remembers you
Signing in for every test is slow
Sign in once, in a setup project
, 1 to practiseWire it up in the config
Faster still: sign in through the API
, 1 to practiseSeveral roles, several files
One account shared by parallel tests
Recap

Some bugs are only visible
Making and updating baselines
Keeping screenshots stable
, 2 to practisePractise: screenshots
Structure snapshots: the accessibility tree as text
axe checks accessibility rules automatically
, 1 to practiseWhat a machine cannot check
Recap

Workers run tests at the same time
, 1 to practiseA failure restarts the worker
Sharding: split the suite across machines
, 1 to practiseMerging reports from shards
A CI workflow on GitHub Actions
, 1 to practiseSettings that make CI strict and useful
Debugging a failure that only happens in CI
Recap

Why flakiness matters more than it seems
First, make it fail on demand
, 1 to practiseCause 1: checking before the page is ready
Cause 2: clicking before the page’s scripts are ready
, 1 to practiseCause 3: tests sharing data on the server
, 1 to practiseCause 4: time, randomness and the outside world
, 1 to practiseCause 5: a machine with too much to do
While you fix it: quarantine, do not ignore
Recap

Each test makes the data it needs
Worker fixtures: set up once per worker
, 2 to practisePractise: scopes
Option fixtures: settings projects can change
Controlling time with page.clock
, 1 to practiseKeeping a large suite fast
What deserves an end-to-end test
Recap

How this module works
, 2 to practiseReview: a locator
, 2 to practisePuzzle: the slow save
, 2 to practisePuzzle: a fixture’s cleanup
, 2 to practisePuzzle: the mock that does nothing
, 2 to practisePuzzle: signed out halfway
, 2 to practisePuzzle: the CI run
, 1 to practiseFinal: design the test
Recap: what an expert does

The project, and the starter
, 1 to practiseHow the tests reach the app
Step 1: check the start
, 1 to practisePractise: a locator that lasts
Step 2: test booking a room
Step 3: cancel the right booking
Step 4: a page object
Step 4: its steps, and a fixture
Step 4: tests that ask for bookings
, 1 to practiseStep 5: survive a reload
Step 5: the room you chose
Step 6: test what goes wrong
Step 6: make the server fail with page.route
, 1 to practisePractise: a test that cannot fail
Step 7: make a test fail, on purpose
Step 7: read the trace
Step 8: run it all, many times
What you built, and where to go next