Cypress Set Viewport in the Test Configuration

We can also configure the viewport within the test by passing the new configuration value.

describe('Test',()=>{

    it('Studio Rec', {
        viewportHeight: 1920,
        viewportWidth: 1080,
      },()=>{

cy.visit('https://www.programsbuzz.com/');

        /* ==== Generated with Cypress Studio ==== */
cy.get('.gv-icon-52').click();
cy.get('#edit-keys').clear();
cy.get('#edit-keys').type('Cypress');
cy.get('#edit-submit').click();
cy.get(':nth-child(1) > h3 > a').click();
cy.get('.page-title > span').click();
cy.get('.page-title > span').should('have.text', 'Cypress Tutorial');
/* ==== End Cypress Studio ==== */

        })
    })

• This will set the viewport for this test.

Alternatively, we can also mention the viewport in the cypress.json file, which will load the default specified viewport for all the tests.