XQA
Back to Practice

Responsive Viewport

Responsive Viewport Testing

Practice testing responsive layouts at different viewport sizes and orientations.

Select Viewport

Width: 1024px
Breakpoint: xl
Orientation: landscape
Responsive Preview (1024px × 600px)

Responsive Content

Card 1
Card 2
Card 3

This content is hidden on mobile (visible at sm and above)

Automation Tips

  • • Viewport Resizing: page.setViewportSize({ width: 375, height: 667 })
  • • Device Emulation: Use Playwright's devices like iPhone 12
  • • Visibility Checks: Verify elements hide/show at breakpoints
  • • Layout Shift: Assert grid columns change with viewport