Cypress Set Viewport in the Test Configuration

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.

Tags
Standard (Image)