This step resizes the browser viewport to a named breakpoint before the rest of the scenario runs. The breakpoint name can be written bare (without quotes) or quoted. Built-in names and their dimensions are:
| Name | Width | Height | Intended device |
|---|---|---|---|
xs | 375 | 667 | phone portrait |
sm | 576 | 800 | large phone / phablet |
md | 768 | 1024 | tablet portrait |
lg | 992 | 768 | small laptop / tablet landscape |
xl | 1200 | 900 | desktop (default) |
xxl | 1400 | 900 | wide desktop / HD |
xxxl | 1920 | 1080 | Full HD / large monitor |
Custom breakpoints can be defined in worldParameters.selectors.breakpoints or via the WEBSHIP_SELECTORS_BREAKPOINTS environment variable (JSON string). If the name is not found in the configured breakpoints, the step throws a descriptive error listing the names that are defined. Use this step to test responsive layout assertions: resize to xs before checking that a sidebar stacks below content, or resize to xl before asserting a two-column layout.
Accepted phrasings
Given I am viewing the site on a xl screen
Given I am viewing the site on a "xl" screen
Given I am viewing the site on a xs device
Given I am viewing the site on a "sm" device
Given we are viewing the site on a md screen
Given viewing the site on a lg screen
Examples
Given I am viewing the site on a xl screen
Given I am viewing the site on a xs screen
Given I am viewing the site on a "md" screen
Given we are viewing the site on a lg device
In a real scenario
Scenario: Sidebar is left of content on desktop but not on mobile
Given I navigate to "https://example.org/articles/intro"
And I define css selectors:
| sidebar | .sidebar-region |
| content | .main-content |
When I am viewing the site on a xl screen
Then I see sidebar to the left of content
When I am viewing the site on a xs screen
Then I see sidebar below content