Glossary

130 terms from Testing Web Apps, in plain words, each with the chapter that teaches it.

Search the glossary

A

a11y: Short for accessibility: "a", 11 letters, "y". It means people can use the page however they browse, such as with a screen reader or only a keyboard.
Accessible name: The name a screen reader announces for an element, such as a button's text or an input's label. Testing Library and Playwright use it to find elements, for example the button named "Place order".
Action (GitHub): A ready-made, published step for a GitHub Actions workflow, such as actions/checkout, which you use with `uses:`.
actionlint: A free tool that checks a GitHub Actions workflow file for mistakes before you push it.
afterAll: A Vitest function that runs a piece of code once after the last test in a file. It is typically used for one-time cleanup, such as stopping a mock server like MSW's.
afterEach: Vitest functions that run a piece of code after (`afterEach`) or before (`beforeEach`) every test in a file. `afterEach` is commonly used for cleanup, such as removing rendered components or resetting mock request handlers.
Arrange-Act-Assert (AAA): A way to structure a test in three parts: set up the input, call the code, and check the result.
Artifact: A file saved from a CI run, such as the Playwright report, that you can download from the run's page.
Auto-waiting: Playwright automatically waiting for an element to exist, be visible and be enabled before it clicks or fills it. That's why the order test needed no explicit wait.
axe: A library that checks a page against many accessibility rules automatically. `@axe-core/playwright` runs it inside a Playwright test and returns a list of violations.

B

Baseline: The approved screenshot that a visual test compares the page against. Playwright writes it on the first run and keeps a separate one per operating system.
baseURL: A Playwright config setting giving the start of every address, so a test can write page.goto("/") instead of the full URL.
beforeAll: A Vitest function that runs code once before the first test in a file. It is typically used for one-time setup, such as starting a mock server like MSW's.
Behavior testing: Checking what a customer or caller can see, such as the total on the page, instead of how the code works inside. Behavior tests survive tidying the code.
Boundary: A value where a rule changes, such as $25.00 and $50.00 for Kettle & Crane's shipping bands. Bugs gather there, so tests check both sides.
Branch coverage: The share of paths through each `if`, `? :`, `&&` and `??` that ran during the tests. It's the most telling coverage column because bugs hide in untried paths.

C

Cents (money as whole numbers): The shop keeps prices as whole cents (1600, not 16.00) because decimal fractions are slightly inaccurate in computers. Rounding then happens in one place you can test.
Chromium: The browser engines Playwright can control: Chromium (Chrome's), Firefox and WebKit (Safari's). Playwright downloads its own copy of Chromium.
CI environment variable: An environment variable that test services set to say "this is an automatic run". The Playwright config reads it to decide whether to reuse servers and whether to retry.
cleanup: A Testing Library function that removes rendered components from the page. The setup file runs it after each test so the next test starts with an empty page.
Code coverage: A measure of which statements, branches, functions and lines of src/ ran while the tests ran. It shows what ran, not what was actually checked.
Component (React): A function that returns the markup for one piece of the page, such as CouponForm for the coupon box.
Component test: A test that renders a piece of the page and uses it like a user would, running several pieces of code together in a pretend browser page.
Confidence: What a test buys: assurance that the app works. Each test also costs time to write, run and maintain, so you spend it where a bug would hurt.
Continuous integration (CI): A server automatically running every test on every change, so a failure shows up before customers see it.
Contract test: A kind of test that checks an app and its API agree on the shape of the data they exchange. It catches mismatches between the two sides before they cause failures for customers.

D

Diff: An image showing which pixels changed between the baseline and the actual screenshot, with the changes in red.
DOM: Document Object Model: the browser's tree of objects, one per element, built from HTML. Code can read and change it, and React keeps it matching the components.

E

Edge case: An unusual input a rule must still handle, such as an empty cart, a lowercase code with spaces or a state the shop doesn't ship to.
End-to-end (E2E) test: A test that starts the real server and drives a real browser through the app the way a customer would.
expect.objectContaining: A Vitest helper that matches any object with at least the listed properties, such as method: "POST", ignoring the rest.

F

Factory: A function that builds fresh, valid test data each time it's called, with overrides for the fields a test cares about, such as makeItem({ qty: 3 }).
Fake: A simple working stand-in for a real part, such as an in-memory server.
fetch: The built-in function that sends an HTTP request and returns a promise of a response. The response's `ok` is true for status codes 200 to 299 and `json()` reads the body as JSON.
findBy: A form of Testing Library query that waits up to 1 second for an element to appear. It's for things that show up after a request finishes.
Fixed wait: Pausing a set time (such as `page.waitForTimeout(500)`) before checking. It makes tests flaky when the app is sometimes slower, so use a retrying assertion or findBy instead.
Fixture (Playwright): A ready-made helper the runner prepares and hands to each test, such as `page` (a fresh browser tab) or `request` (for calling the API directly).
Fixture file: A data file kept with the tests, such as test/products.json. Tests should copy its data rather than change it.
Flaky test: A test that passes on one run and fails on the next with no change to the code. It wastes time and teaches people to ignore red results.
FormData: A browser object that reads a form's named fields. CheckoutForm uses it to get the name and email.

G

getBy: A form of Testing Library query that finds an element or throws and fails the test. Use it for things that should be there now; `getByTestId` (an element's hidden `data-testid`) is the last resort.
GitHub Actions: GitHub's built-in CI service, which runs workflows on every push or pull request.
Global: A function available everywhere without importing it, such as `fetch`. `vi.stubGlobal` can replace one in a test.

H

Headless: A browser running without a visible window, which is Playwright's default. Add `--headed` to watch the browser click through the page.
Hoisting: Vitest moving `vi.mock` calls to the top of the file, before the imports run, so that every import of the mocked module gets the mock.
Hook (React): A function whose name starts with `use`, such as useState, that gives a component extra powers.
HTML report: Playwright's browsable report of a test run. A failed test shows its error and steps, and visual failures show the expected, actual and diff images.
HTTP status code: The number in every server reply saying how the request went: 200 to 299 is success (201 Created), 400 Bad request, 404 Not found, 500 Server error. `response.ok` is true for 200 to 299.

I

Implementation detail: How code works inside, such as the name of a state variable. Tests should check behavior customers can see, not these.

J

jest-dom: A library adding matchers that read the DOM, such as toBeInTheDocument, toHaveTextContent, toHaveValue and toBeDisabled. The setup file imports it.
Job: A set of CI steps that run on one runner.
jsdom: A DOM written in JavaScript that runs inside Node, so component tests can create elements, click buttons and read text without opening a real browser.
JSON: A text format for data, which the practice API uses for orders and error replies. `JSON.stringify` turns an object into JSON text and `response.json()` reads it back.
JSX: HTML-like markup written inside JavaScript, with curly braces for expressions. Files that contain it end in .jsx, and test files with JSX must end in .test.jsx.

K

key (React): A prop given to each item in a list so React can tell the lines apart when they change.

L

Linter: A tool such as ESLint that flags likely mistakes in JavaScript without running the code.
Locator: Playwright's description of how to find an element on the page, such as page.getByRole("button", { name: "Place order" }). It's the same idea as Testing Library's queries.

M

Matcher: A method after `expect(value)` that checks the value, such as `toBe` or `toEqual`. Libraries like jest-dom add more.
Mock: A test double that also records how it was called. `vi.fn()` makes a mock function, and Vitest calls all test doubles "mocks".
Mocking at the network level: Faking the server by catching requests as they leave fetch, so all your own request code still runs. MSW does this.
MSW: Mock Service Worker: a library that fakes an API at the network level, answering requests with canned replies so your real request code runs.
Mutation testing: A technique that changes the code on purpose to see whether any test notices. If the tests still pass after a change, they probably don't check that behavior well enough.

N

Node.js: The JavaScript runtime that runs a project's tools and tests outside a browser. For the Kettle & Crane shop, use the LTS (long-term support) version, 22.12 or later.
npm ci: A command that installs exactly the versions in package-lock.json and never updates it. That makes CI test the same versions you tested locally.
npx: A command that runs a tool installed in the project, such as `npx vitest run` or `npx playwright test`.

O

onUnhandledFrame: An MSW setting; "error" makes any request with no handler fail the test rather than reach a real server.

P

package-lock.json: The file npm install writes listing the exact package versions installed. `npm ci` installs from it.
page.route: A Playwright call that catches the page's requests to a URL so the test can answer with its own status and JSON, such as a fake 500. It affects only that test's page and leaves the real server untouched.
Parallel: Tests running at the same time in several workers. They can interfere if they share a server.
Playwright: A tool from Microsoft that drives real browsers (Chromium, Firefox, WebKit), plus its own test runner for end-to-end tests.
playwright.config.js: The Playwright settings file. It says where tests live (`testDir`), the base address and which servers to start before the tests (`webServer`).
POST: HTTP methods: POST sends data to the server, as when an order is placed, while GET only reads.
Practice API: The small server in `server.mjs` that checks and saves orders in memory for the Kettle & Crane checkout examples. Start it with `npm run api`.
Props: The inputs a React component receives, like a function's arguments. CouponForm gets an onApply function as a prop.
Proxy (Vite): A Vite setting that passes the page's `/api` requests on to the practice API. An E2E test checks it works, which component tests never do.
Pull request: A request to merge your changes into another branch. It's a trigger for CI workflows.

Q

Quarantine: Skipping a flaky test so it stops blocking others while marking it as needing work. `test.fixme("title", ...)` does this.
Query: A Testing Library function that finds elements on the page, such as getByRole, getByLabelText or getByText.
queryBy: A form of Testing Library query that returns null when nothing matches. Use it to check that something isn't on the page.

R

React: A library for building web pages out of components. The shop's checkout page is built with it.
React Testing Library: A library that renders components into the DOM and finds things on the page the way a person would.
Regression test: A test written for a bug that fails with the bug and passes once it's fixed, so the bug can't come back.
Regular expression: A text pattern between slashes, such as /KC-\d+/, where \d+ means one or more digits. Tests use it to match an order number without knowing it exactly.
render: A Testing Library function that draws a component into the test page with the props you pass.
Request handler: An MSW function that answers one kind of request. `http.post("/api/orders", resolver)` handles POSTs to that path and returns a reply built with HttpResponse.json.
Required status check: A CI check that must pass before GitHub lets a pull request merge, such as marking "Tests" required on the main branch.
Retries: Running a failed test again. A test that fails then passes on retry is reported as flaky, so retries are a safety net, not a fix.
Role: What an element is for, such as button, textbox, status, alert or region. Queries find elements by role.
Runner: The fresh virtual machine that runs a CI job, such as ubuntu-latest for Linux.

S

screen: Testing Library's object for the whole page, whose queries find elements. `screen.debug()` prints the page.
Seeding: Putting known data into a server before each test, such as calling /api/test/reset. A test-only route like this must never exist in production.
server.use: MSW calls for controlling the fake server. `server.use` adds a handler for one test ahead of the default, and `resetHandlers` removes such overrides.
Setup file: A file that runs before each test file, such as `test/setup.js`. It holds shared test configuration, such as cleaning up after each test and adding jest-dom matchers.
Sharding: Splitting tests across several machines, such as --shard=1/4, on bigger projects.
Shared state: Data that outlives one test, such as server data, a module-level variable or a file, and can leak into the next test. It's the commonest cause of flaky tests.
Snapshot test: A test that compares output to a previously saved copy and fails if the output changes. It is a quick way to notice unexpected changes, though differences must be reviewed to see whether they are intended.
Spy: A wrapper that watches a real function and can replace what it returns. `vi.spyOn(Math, "random")` makes randomness predictable, and `vi.restoreAllMocks()` puts the real one back.
State: Data a React component remembers between renders. `useState` gives the current value and a function that changes it and re-renders the page.
Static checks: Checks that catch bugs without running the code, such as a linter or TypeScript's type checking.
Step: One action or command in a CI job, either `uses:` an action or `run:` a shell command.
Strict mode violation: A Playwright error when a locator matches more than one element. Make the locator more exact, for example with a role and name or `exact: true`.
Stub: A test double that returns canned answers.

T

Table-driven test: A single test run once per row of a table of cases with `test.each`. In the test name, `$goods` is replaced by that case's value.
Test double: A stand-in for a real part of the system, such as a stub, mock or fake, so tests don't depend on the real server.
Test environment: The page-like world tests run in. Setting `environment: "jsdom"` gives every test a jsdom page.
Test runner: The program that finds your test files, runs them and reports the results. Vitest is a test runner for unit and component tests, and Playwright Test is one for end-to-end tests.
test.only / test.skip / test.todo: Vitest markers: `.only` runs just the marked tests in a file, `.skip` skips one, and `.todo` lists a test you plan to write. Remove `.only` and `.skip` before committing, or tests silently stop running.
Testing pyramid: The pyramid advises many unit tests, fewer component tests and a few E2E tests. The trophy puts most of the effort in the middle, in component tests.
Threshold: The lowest coverage you accept. If a run falls below it, the run fails even when every test passes.
toBeCloseTo: A Vitest matcher that allows a tiny difference, for comparing decimals such as 0.1 + 0.2 with 0.3. Keeping money in whole cents avoids the need for it.
toHaveScreenshot: A Playwright assertion that compares the page or one element with a baseline image. `mask` hides changing parts, `maxDiffPixels` forgives small noise and `--update-snapshots` accepts a change.
toMatchObject: A Vitest matcher that checks only the fields you list and ignores the rest. `toEqual` needs the whole object to match.
Trace: A recording of a Playwright test: every action with a snapshot of the page before and after.
Trace viewer: Playwright's step-by-step replay of a trace, showing exactly what the browser saw.
Trigger: The event that starts a workflow, such as `push` (new commits) or `pull_request`.

U

UI mode: Playwright's window for picking tests, running them and stepping through each action, opened with `npx playwright test --ui`.
Unique test data: Making each test's data different, such as an email containing `Date.now()`, so tests in a shared server can't collide and a test can find its own order.
Unit test: A test of one function or module on its own, such as checking that an order of $25 pays $4.95 shipping. It runs in milliseconds.
user-event: A library that simulates real typing and clicking, firing every event a browser would. Create a user with `userEvent.setup()` and always await its actions.

V

vi.mock: A Vitest call that replaces every export of a module, such as api.js, with mock functions. `vi.mocked(fn)` gives you the mock so you can set its answer.
vi.stubGlobal: A Vitest call that replaces a global such as fetch for the current test file. `vi.unstubAllGlobals()` puts the real one back.
Visual regression test: A test that takes a screenshot of the page and compares it with an approved baseline, pixel by pixel, to catch unexpected changes in how it looks.
Vite: A development server and build tool for web apps. It serves the page and reloads it when you save a file, and Vitest reads its config file.
Vitest: A test runner for JavaScript used for unit and component tests. It reads Vite's config file, so test settings live alongside the project's build settings.

W

Watch mode: Running `npx vitest` without `run` so it re-runs matching tests each time you save a file.
WCAG: Web Content Accessibility Guidelines: the standard most accessibility laws refer to. axe's `withTags` can limit a check to its A and AA rules.
Web-first assertion: A Playwright check such as `await expect(locator).toHaveText(...)` that retries until it passes or times out (5 seconds by default). Always await it.
Worker: A separate process, with its own browser, that runs tests in parallel. `workers: 1` runs tests one at a time.
Workflow: A file in .github/workflows/ that says what CI should run and when.

Y

YAML: A settings format of `key: value` lines in which indentation (spaces, never tabs) shows what belongs to what and `-` starts a list item. Workflow files are written in it.