Cypress Viewports: The way to automate the mobile web view of an application in Cypress
Nowadays, most web applications have support for responsiveness. As the number of mobile device users is increasing, most websites are adopting responsive website designs for their applications.
What is a Responsive website Design?
It is an approach in which design and development are done in such a way that it should respond to the user’s behavior based on the screen size, platform, etc. By Following the responsive web design approach, we can provide users with a consistent experience across all devices.
If we say, our web application is responsive that means it renders web pages on viewports of multiple devices and is optimized well for all types of screen sizes and resolutions.
How to test the responsiveness of the web application manually?
When you access your web application on your browser, you can change the viewports using chrome developer tools as shown in the below screenshot.
- Open Chrome Developer’s Tools, select the icon (device Icon in chrome developer’s tools)
- Select different dimensions (Dimension Responsive) on the screen and you can test different viewports.
In the above approach, we saw how we can test the mobile/tab view of an application using chrome developer tools. Now, we will see how we can automate the same scenario in Cypress.
Automate viewports in Cypress
By using the cypress in-built command=> cy.viewport(), we can change the viewport of any web application as per our requirements. It controls the orientation and size of the opened web application.
By default, the cypress viewport is 1000x660 but you can customize the width and height as per your choice. Cypress has a list of preset dimensions For Example : iphone-7, macbook-16, samsung-note9,etc. We can either re-use the existing preset or define a new one also. For the complete list, you can refer to cypress's official documentation.
Below is the syntax:
cy.viewport(‘macbook-16’, landscape);
cy.viewport(‘iphone-xr’)
- Sample Code: Different preset viewports
Cypress._.each([‘macbook-15’, ‘samsung-note9’], viewport => {it(`works on ${viewport}`, () => {cy.viewport(viewport)})})
Code Explanation:
In the above code, we are running a single test case for multiple viewports. We have passed the viewport as parameters and used it in cy.viewport(). The same test case would be executed for macbook-15 and samsung-note9 viewport. Below is the sample screenshot.
2. Sample Code: Different Orientation (Landscape / Portrait)
Cypress._.each([‘landscape’, ‘portrait’], orientation => {it(`Testing different ${orientation}`, () => {cy.visit(“https://www.dropbox.com/")cy.viewport(‘macbook-16’, orientation);})})
Code Explanation:
In the above code, we are running a single test case for multiple viewports. It would be run for macbook-16 but with different orientations (Landscape and portrait). In the below screenshot, you can see the viewport is changed. Below is the sample screenshot (viewports are changed as per the orientation. It is different in both the cases — landscape and portrait).
3. Sample Code: Customized width and height
it(‘Testing customized width and height’, () => {cy.visit(“https://www.dropbox.com/")cy.viewport(360, 890);})
Code Explanation:
In the above code, we have passed the customized viewports (360 x 890). Apart from the predefined viewports, we can also configure them as per our requirements. We can customize the width and height. It would run for the defined viewport. The same can be seen in the screenshot also.
You can see the viewport value in the logs (Left Side) on the Test Runner Screen.
Passing Viewport as part of the config file:
As part of the framework, we can also define the viewport in the config file and run your smoke/regression test pack as per the configured viewports. You need to pass viewportWidth and viewportHeight in cypress.config.js (Cypess 10).
Sample:
viewportWidth: 1000,viewportHeight: 600
You can then get the value from the config file using the syntax: Cypress.config(‘viewportWidth’)
Conclusion:
In this post, we saw how to check the responsive view of an application both manually and through automation using the cypress command (cy.viewport). It is really important to test your application for different viewports because sometimes the UI (content /images) does not load for all the viewports. So, being QA we need to make sure our application is working fine in different viewports as well.
Thanks for reading. Happy Learning! — AB
Thanks, Naveen AutomationLabs for the great content.
Ref: https://docs.cypress.io/api/commands/viewport
Ref Video: https://youtu.be/CHwexurgwZQ
Ref Code (Github Repo): https://github.com/Anshita-Bhasin/Practise_QA/blob/main/cypress/e2e/webResponsive.cy.js
