Packages narrative
packages / test-viewport
test-viewport
Functions
| Name | Description |
|---|---|
installMatchMedia | Installs a controllable |
presetToUse | Maps a preset to the Playwright |
responsiveProjects | Builds one Playwright project per preset, naming each |
breakpointForWidth | Resolves a CSS pixel width to its mobile-first breakpoint name. |
Types
| Name | Description |
|---|---|
MatchMediaController | Controls a installed shim: resize the emulated viewport, then restore globals. |
ResponsiveProject | A Playwright project config carrying a viewport preset's emulation settings. |
ResponsiveProjectsOptions | Options for |
ResponsiveUse | The subset of a Playwright project |
Breakpoint | Mobile-first breakpoint names, ascending by min-width. |
ViewportPreset | A named device viewport used to drive unit and e2e responsive checks. |
Variables
| Name | Description |
|---|---|
BREAKPOINT_MIN_WIDTH | Ascending min-width (px) at which each breakpoint becomes active. |
CORE_RESPONSIVE_MATRIX | A compact, opinionated matrix for app-level e2e: one device per visually distinct tier (folded foldable, phone, tablet, side-by-side desktop) so the device fan-out stays cheap while still covering every layout branch. |
DESKTOP | Desktop — 1440 design width. |
FOLDABLE_FOLDED | Cover screen of a folded book-style foldable (Galaxy Z Fold) — extreme narrow stress. |
FOLDABLE_UNFOLDED | Inner screen of an unfolded book-style foldable — square-ish, lands in |
LAPTOP | Laptop — common 1280-wide notebook; first |
MOBILE | Modern mid-size phone — iPhone 12/13/14 class. |
MOBILE_SMALL | Narrowest realistic phone — iPhone SE; the floor for "no horizontal overflow" checks. |
TABLET_LANDSCAPE | Tablet landscape — the boundary where the editor flips to side-by-side ( |
TABLET_PORTRAIT | Tablet portrait — iPad class; the lower edge of |
VIEWPORT_PRESETS | Every preset, ascending by width. |
VIEWPORT_PRESETS_BY_ID | Presets indexed by id for direct lookup. |
WIDE | Wide / large desktop — |