Responsive Steps

Responsive steps resize the browser viewport from inside a scenario, so real mobile, tablet, and desktop coverage lives in one suite instead of separate device runs. You can jump to a named breakpoint (mobile, xl, …), change just the width or just the height, or set an exact width-by-height pair - then assert what the layout does at that size with the usual element and visibility steps.

Named breakpoints come from a registry with ten built-ins covering common device classes from a 375-px phone up to full HD. Projects can override or extend the registry in two ways: globally through the selectors.breakpoints world parameter, or per-scenario with a Gherkin data table. Project-defined names win over the built-ins, and the merged registry is resolved lazily the first time a scenario touches a breakpoint.

Resizing is instant and does not reload the page - CSS media queries and resize handlers fire exactly as they would when a user rotates a device or drags the window edge. Combine with screenshot steps for visual evidence at each size, or with element assertions to prove a hamburger menu replaces the full navigation below a given width.

Quick reference

Step	What it does
Given the following responsive breakpoints:	Replace the breakpoint registry for the current scenario from a data table.
When I set the viewport to the "mobile" breakpoint	Resize the viewport to a registered named breakpoint.
When I set the viewport width to 1200	Resize the viewport width while keeping the current height.
When I set the viewport height to 800	Resize the viewport height while keeping the current width.
When I set the viewport to 1200 by 800	Resize the viewport to an explicit width-by-height pair.

Built-in breakpoints

Name	Width	Height
xs / mobile	375	667
sm	576	800
md / tablet	768	1024
lg	992	768
xl / desktop	1200	900
xxl	1400	900
xxxl	1920	1080

Steps in detail

Given the following responsive breakpoints:

Takes a three-column data table - name, width, height - and merges it over the built-in registry for the rest of the scenario. Rows with a built-in name (say, a wider tablet) override it; new names are added alongside. The override lasts only for the current scenario; the next scenario starts from the registry defined by your world parameters (or the built-ins).

Given the following responsive breakpoints:
  | watch   | 280  | 280  |
  | phablet | 414  | 896  |
When I set the viewport to the "phablet" breakpoint

When I set the viewport to the "..." breakpoint

Looks the name up in the merged registry and calls Playwright's setViewportSize() with its width and height. An unknown name fails immediately with Unknown breakpoint "<name>" - check the built-in table above and your project overrides. we set the viewport ... and bare And set the viewport ... phrasings also match.

Given I am on the homepage
When I set the viewport to the "mobile" breakpoint
Then I should see an "button.menu-toggle" element
When I set the viewport to the "desktop" breakpoint
Then I should not see an "button.menu-toggle" element

When I set the viewport width to <n> / When I set the viewport height to <n>

Change one dimension and keep the other. Handy for walking a layout across media-query boundaries without caring about height, or for testing sticky headers and infinite scroll at short viewport heights. If no viewport is set yet, the untouched dimension falls back to 800 (height) or 1200 (width).

When I set the viewport width to 768
And I set the viewport width to 992
And I set the viewport height to 600

When I set the viewport to <w> by <h>

Sets both dimensions in one step - the direct route when a designer hands you an exact device spec or you need to reproduce a bug reported at a specific window size.

When I set the viewport to 1024 by 768
And I set the viewport to 375 by 667

Complete example

Adapted from tests/features/responsive.feature, running against the bundled example site.

Feature: Responsive step definitions

  Scenario: Set viewport via breakpoints
    Given I am on the homepage
     When I set the viewport to the "mobile" breakpoint
      And I set the viewport to the "tablet" breakpoint
      And I set the viewport to the "desktop" breakpoint
      And I set the viewport width to 800
      And I set the viewport height to 600
      And I set the viewport to 1024 by 768
     Then I should see "Welcome to the homepage of the Webship-js Examples"

Configuration

Define project-wide breakpoints once in your world parameters under selectors.breakpoints; the named-breakpoint step merges them over the built-ins for every scenario:

selectors: {
  breakpoints: {
    xs: { width: 375, height: 667 },
    sm: { width: 576, height: 800 },
    md: { width: 768, height: 1024 }
  }
}

The same map can be supplied via the WEBSHIP_SELECTORS_BREAKPOINTS environment variable as a JSON string. See global settings for details. Per-scenario data tables (above) override both.

Back to all step groups