cy.viewport() for screen sizes in Cypress - Test Execution Trace

Test Overview

This test sets the browser viewport to a specific screen size and verifies that a responsive element is visible and correctly displayed at that size.

Test Code - Cypress

Cypress

describe('Viewport size test', () => {
  it('sets viewport to 375x667 and checks mobile menu visibility', () => {
    cy.viewport(375, 667);
    cy.visit('https://example.cypress.io');
    cy.get('.mobile-menu').should('be.visible');
  });
});

Execution Trace - 3 Steps

Step	Action	System State	Assertion	Result
1	Set viewport size to 375x667	Browser window resized to width 375px and height 667px	-	PASS
2	Visit the URL https://example.cypress.io	Page loads with mobile layout due to small viewport	-	PASS
3	Find element with class '.mobile-menu'	Mobile menu element is present in DOM	Check if '.mobile-menu' is visible on screen	PASS

Failure Scenario

Failing Condition: The '.mobile-menu' element is not visible after setting viewport to mobile size

Execution Trace Quiz - 3 Questions

What does cy.viewport(375, 667) do in this test?

A Clicks on an element with size 375x667

B Changes the page URL to include viewport parameters

C Sets the browser window size to 375 pixels wide and 667 pixels tall

D Waits for 375 milliseconds before continuing

Key Result

Always set the viewport size before visiting the page to test responsive layouts accurately, and verify selectors match the elements shown at that size.