Cypress Test: How to Use Viewport ~ MyDo Quality Assurance

The viewport is used to control the size and orientation of the screen for your application.

How to Emulate Different Devices Using Viewport — Emulate Different Devices Using Viewport

This is an example of how to use a viewport to emulate different device’s screens:

describe('Device Tests', () => {
    it('1080p', () => {
        cy.viewport(1980, 1080);
        cy.visit('https://books.toscrape.com/')
        cy.wait(3000);
    });

    it('iPhone X', () => {
        cy.viewport('iphone-x');
        cy.visit('https://books.toscrape.com/')
        cy.wait(3000);
    });
})

As we can see together, I use cy.viewport to declare the size of the screen. In addition to using the size of the resolution, the viewport can also be defined using the type of device.

Save the above test files as and run the test as per the steps mentioned in the article “Cypress Test: Create your first End to End Testing”.

Now, you can see, Cypress will open the site using two different devices screen.

The figure below is a screen for desktop

Cypress viewport screen for desktop — Screen for desktop

The figure below is a screen for iPhone X

Cypress viewport Screen for iPhone X — Screen for iPhone X

Conclusion

Using the viewport, we can simulate testing using various screen sizes

Follow me on

Facebook: https://www.facebook.com/mydoqa/

Instagram: https://www.instagram.com/mydoqa/

Twitter: https://twitter.com/MydoQa

This article is a part of the Cypress Test series. To read another story, please follow the links below:

Cypress Test Series: