Headless Browser
A real browser driven programmatically without a visible window.
A headless browser is a full browser engine controlled by a script rather than a person, with rendering happening off-screen. It is what makes it possible to test the things only a browser knows: layout, styling, focus, scrolling, and actual paint.
The essential distinction is between a headless browser and a simulated DOM. A simulated environment is fast and cannot evaluate layout, cascade, or focus, so tests that appear to check visual behavior there are checking a model of it. When the question is visual or interactive, only a real engine answers it.
Automation has its own reliability discipline. Set the viewport explicitly — defaults are much narrower than real monitors, and layouts that overflow at desktop width look perfectly centered at the default. Wait on conditions, not durations. Load fonts and disable animation before capturing anything.
Two limits are worth knowing in advance. Synthetic events are not real user input: they do not feed the browser's native undo stack, and code gated on a genuine gesture will not run. And headless can differ from headed in real ways — a component that renders correctly in a headless capture and blank in a real browser is a genuine and well-documented category of bug, so a headless screenshot is not proof.
See also13
Component Story
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
Testing & Verification17 connections
Visual Regression Testing
Comparing rendered output against a stored baseline to catch unintended visual change.
Testing & Verification14 connections
contenteditable
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
Web Platform12 connections
Responsive Breakpoint
A viewport width at which a layout changes, and the assumptions that come with it.
Design & Interface18 connections
Integration Test
A test exercising several components together, through real interfaces rather than doubles.
Testing & Verification17 connections
Test Fixture
The prepared data or state a test runs against.
Testing & Verification16 connections
Focus Management
Deliberately controlling which element receives keyboard focus as an interface changes.
Design & Interface28 connections
Test Double
A stand-in for a real dependency during a test — and the ways a stand-in can lie.
Testing & Verification18 connections
Stacking Context
The nested coordinate system that decides what paints above what, and why z-index often does nothing.
Design & Interface21 connections
Unit Test
A fast, isolated test of one unit of behavior with its collaborators replaced.
Testing & Verification25 connections
requestAnimationFrame
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
Web Platform12 connections
End-to-End Test
A test that drives the whole running system the way a user would, from the interface down through every real dependency, buying the most confidence at the highest cost.
Testing & Verification16 connections
User Agent String
The header every browser sends to identify itself, which grew into a pile of mutual impersonations because sites served different pages to different browsers, and why it's being frozen.
Web Platform6 connections
Linked from9
- Accessibility TestingTesting & Verification
Checking that people using screen readers, keyboards, magnification, or other assistive technology can actually use an interface, through a mix of automated scans and hands-on testing.
- Component StoryTesting & Verification
An isolated rendered instance of a component, usable as documentation, a workbench, and a test.
- contenteditableWeb Platform
The HTML attribute that makes an element directly editable, and the surface behind most rich-text editors.
- End-to-End TestTesting & Verification
A test that drives the whole running system the way a user would, from the interface down through every real dependency, buying the most confidence at the highest cost.
- Integration TestTesting & Verification
A test exercising several components together, through real interfaces rather than doubles.
- requestAnimationFrameWeb Platform
The browser callback that runs once per display frame just before paint, which is the right clock for visual work and stops entirely when nothing is being displayed.
- Responsive BreakpointDesign & Interface
A viewport width at which a layout changes, and the assumptions that come with it.
- User Agent StringWeb Platform
The header every browser sends to identify itself, which grew into a pile of mutual impersonations because sites served different pages to different browsers, and why it's being frozen.
- Visual Regression TestingTesting & Verification
Comparing rendered output against a stored baseline to catch unintended visual change.