Execute Automated Test in Different View Ports in Cypress

When we use test automation there is a need to execute test in different view ports of the browser and test whether the site is responsive. This can be done via Cypress in the following way.

First of all install the following NPM module

npm install cy-view        

Next lets add a Cypress test script which will test your scripts in different device view ports using two different URLS.

const?cyView?=?require("cy-view");


const?devices?=?[
????{
????????model:?"macbook-15",
????????width:?1440,
????????height:?900
????},
????{
????????model:?"ipad-2",
????????width:?768,
????????height:?1024
????},
????{
????????model:?"iphone-6+",
????????width:?414,
????????height:?736
????}
];
//?Add?urls?to?test?against
const?urls?=?[
????"https://demo.guru99.com/insurance/v1/index.php",
????"https://demo.guru99.com/v4/index.php"


];


//?Pass?cy-view?an?array?of?devices?structured?like?the?devices?constant?above
const?washingMachinePageTests?=?cyView(devices);


//?Pass?your?urls?constant?in?and?your?good?to?go!
washingMachinePageTests(urls,?()?=>?{
????describe("My?tests?running?on?all?viewports?across?various?URLs",?()?=>?{
????????it("should?test?something...",?()?=>?{
????????????//...do?your?test?steps?
????????});
????});        

});        

Runs of different view ports when we run in Cypress test runner.