Cypress Test: How to Use Viewport
The viewport is used to control the size and orientation of the screen for your application.
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
The figure below is a screen for iPhone X
Conclusion
Using the viewport, we can simulate testing using various screen sizes
Connect with me
Krisnawan: Twitter | Linkedin | Medium
MydoQA: Twitter | Blog | Instagram | Facebook
This article is a part of the Cypress Test series. To read another story, please follow the links below:
Cypress Test Series:
API Test Series:
- API Test: Create your first API Testing in POSTMAN
- API Test: How to assert array in response body using Postman
- API Test: How to loop request in Postman
- API Test: How to test HTTP methods using Postman
- API Test: How to assert JWT Token content using Postman
Software Testing Series:
