Responsive layouts

DrevOps\BehatSteps\Steps\Web\ResponsiveTrait - Source, Example, Helpers

Test responsive layouts with viewport control.

Default breakpoints: mobile_portrait, tablet_landscape, desktop, etc.

Custom breakpoint registration via responsiveSetBreakpoints()

Tag-based viewport control using @breakpoint:NAME tag

Step-based viewport control during scenario execution

Individual width/height control or combined dimensions.

Every viewport step needs a browser driver that can resize the window, such as the one a @javascript scenario runs.

Tag-based viewport control:
@javascript @breakpoint:mobile_portrait
Scenario: Mobile navigation test
  When I am on the homepage
  Then I should see the mobile menu
Step-based viewport control:
@javascript
Scenario: Responsive layout test
  When I am on the homepage
  And I set the viewport to the breakpoint "tablet_landscape"
  Then I should see the tablet layout
  When I set the viewport to "1920" by "1080"
  Then I should see the desktop layout
Custom breakpoints:
class FeatureContext extends WebContext {

  #[BeforeScenario]
  public function setupCustomBreakpoints(): void {
    $this->responsiveSetBreakpoints([
      'iphone_12' => '390x844',
      '4k' => '3840x2160',
    ]);
  }
}

Steps

@Given the following responsive breakpoints exist:

Set custom responsive breakpoints from a table

Given the following responsive breakpoints exist:
  | name       | dimensions |
  | iphone_12  | 390x844    |
  | 4k_display | 3840x2160  |

@When I set the viewport to the breakpoint :breakpoint

Set the viewport to a specific breakpoint

When I set the viewport to the breakpoint "mobile_portrait"
When I set the viewport to the breakpoint "desktop"

@When I set the viewport width to :width

Set the viewport width

When I set the viewport width to "1920"
When I set the viewport width to "768"

@When I set the viewport height to :height

Set the viewport height

When I set the viewport height to "1080"
When I set the viewport height to "900"

@When I set the viewport to :width by :height

Set the viewport to specific dimensions

When I set the viewport to "1920" by "1080"
When I set the viewport to "375" by "667"

Steps​

Steps