TodayTools

End-to-end testing flashcards

Prove the money paths work: real browser, real backend, whole journeys, tests a team can trust.

Donate
Beginner friendly, starts from zero
Section
How to study
0
End-to-end testingStart from zero · 1 of 12

What is end-to-end testing, in one plain sentence?

A program uses your app the way a real person would, clicking and typing from the first screen to the last, and checks that the whole thing works.

A robot customer that never gets bored.

All topics

End-to-end testing at a glance

End-to-end testing means a program uses your app like a real person, from the first screen to the last, and checks the whole thing works.

Like a test drive: checking each car part alone helps, but only a real drive shows they all work together.

Words you will meet

Test
A small program that does some steps and then checks the result
Assertion
The check at the end of a test that must be true for it to pass
Journey
The path a user takes through the app, like search, add to cart and pay
Locator
How a test finds something on the screen, such as the button named Place order
Flaky
A test that passes and fails at random without any code change
Headless
A browser running without a window, as on a server
CI
A server that runs your tests automatically on every change
Staging
A practice copy of the live site used for testing

The steps

  1. 1. Start from zero (12 cards): What end-to-end tests are, why teams use them and the words you need, in plain English.
  2. 2. Core basics (15 cards): What E2E protects, your first journey test, and why waiting beats sleeping.
  3. 3. Next steps (16 cards): Test data, auth reuse, what to mock, flake causes, CI and cross-browser runs.
  4. 4. Go deeper (16 cards): Speed at scale, flake policy, production monitoring, hermetic setups and cost.
All 12 cards in Start from zero
What is end-to-end testing, in one plain sentence?
A program uses your app the way a real person would, clicking and typing from the first screen to the last, and checks that the whole thing works.
Before these tests, how did teams check an app before a release?
A person clicked through every screen by hand before each release. It was slow and boring, and small things were missed, so customers found the bugs first.
Where have you already been helped by end-to-end tests without knowing it?
Each time you order food, book a ticket or pay a bill online and it just works. Big shops run tests on sign in, cart and payment many times a day.
What is a good everyday picture of an end-to-end test?
A test drive. Checking each part of a car alone is useful, but only a drive shows that engine, brakes and steering work together on a real road.
What do test, assertion, pass, fail and flaky mean?
A test is a small program that does steps and then checks a result; that check is an assertion. It passes if the check is true and fails if not. A flaky test passes and fails at random with no change.
What are the front end, the back end and the database?
The front end is the screens you see and tap, also called the UI (user interface). The back end is the program on a server that does the work. The database is where data like orders is kept.
What are a unit test and a component?
A unit test checks one small piece of code alone, like a function that adds tax. A component is one piece of the screen, like the cart box. End-to-end tests check them all together.
What are a journey and a locator?
A journey is the path a user takes, like search, add to cart and pay. A locator is how the test finds something on screen, for example the button named "Place order".
What do deploy, pull request, CI and staging mean?
A deploy puts a new version live. A pull request is a proposed code change that others review. CI is a server that runs the tests on every change. Staging is a practice copy of the live site.
What do you need before you start, and what is a headless browser?
A computer with Node.js, a code editor, and Playwright, which installs browsers with one command. A headless browser is one that runs without a window, which servers use.
Your first tiny win: what does this test do, line by line?
The test opens the page with page.goto, finds the heading by its role and name, and checks it is visible. If the heading is missing, the test fails.
What will you be able to do after this topic?
Pick the few journeys worth testing, write tests that find things like a user does, keep them fast and steady, run them in CI, and read a failure report quickly.
End-to-end testing cheatsheet

Choose what to cover

  • Sign up, sign in, reset password Every user hits it
  • Search to product page Core discovery
  • Cart to payment to confirmation The money path
  • Create, edit, delete main record Main data flow
  • Permissions: admin vs member Security regressions
  • Post-deploy smoke set Under 2 minutes, on production

Locators, best first

  • getByRole("button", { name: "Pay" }) Role plus accessible name
  • getByLabel("Email") Form fields
  • getByPlaceholder("Search") Unlabelled inputs
  • getByText("Order placed") Visible text
  • getByTestId("delivery-map") Agreed fallback
  • locator(".btn-primary") Last resort, breaks on restyle

Stability rules

  • Wait on conditions Retrying assertions, never sleeps
  • Data per test via API Unique names, no shared accounts
  • storageState reuse Log in once per role
  • Stub third parties Payments, SMS, maps
  • Fixed locale, time zone, clock No CI-only date bugs
  • Trace on first retry Diagnose without rerunning

CI and scale

  • npx playwright install --with-deps Browsers plus OS packages
  • npx playwright test --shard=1/4 Split across machines
  • npx playwright merge-reports ./blobs One report from shards
  • --grep @smoke Run the smoke set only
  • --grep-invert @quarantine Keep flaky tests non-blocking
  • docker compose up -d --wait Hermetic dependencies
Donate