How to run Cypress Tests on Mobile Browsers

As one of the most frequently used automation testing tools, Cypress supports End to End Testing, Unit Testing, and multiple API Testing types. Its many advantages have quickly made it a favorite of devs and testers, and it has quickly gained popularity in these circles. This article will discuss how to emulate mobile browser like behavior for Cypress tests

The Importance of Mobile Web Browser Testing 

Testing sites on these browsers is important to ensure that a page’s responsive design is working as intended. In other words, it checks how a website performs on different device screen sizes, resolution, and the parameters of mobile browsers. 

Responsive design, when implemented on a website, equips it to run on any device seamlessly without any glitch in functionality. It is essential since sites are accessed via different devices – desktop. mobile, tablet, etc.

If a website is designed with a responsive approach and is rendered on a mobile device, it adjusts the CSS elements according to the device screen size and resolution. This can also include hiding and showing CSS elements based on screen size. Testing this function is also often called viewport testing, and such tests can be run with the help of the viewport functionality in Cypress.

Of course, automation is integral to creating any comprehensive browser testing strategy, be it on desktop or mobile devices. It cuts down on time and effort by taking care of repetitive tasks, cutting out human error, and generating faster results through parallel testing. 

Testing Websites on Mobile Browsers with Cypress

 Cypress provides a viewport command to set the size of the screen; the viewport varies from device to device. For example. the iPad 2 has a viewport of 768X1024 while the iPhone 3 has a viewport of 320X 480. 

The viewport command in cypress accepts the height and width of the device in question. The syntax is: 

cy.viewport(height, width)

Example: cy.viewport(768, 1024) 

This is how testers can manually set the viewport in Cypress.

Cypress also provides a predefined set of devices and viewports. To use any of them, directly pass the device name instead of passing height and width.

Example: cy.viewport(‘iphone-6’)

Below is the list of available predefined device viewports on Cypress.

Source: cypress.io.

Simple tests to demonstrate viewports usage

describe('Nav Menus', () => {

  context('iphone-5 resolution', () => {

    beforeEach(() => {

      cy.viewport('iphone-5')

    })

    it('displays mobile menu on click', () => {

      cy.get('nav .desktop-menu').should('not.be.visible')

      cy.get('nav .mobile-menu')

        .should('be.visible')

        .find('i.hamburger')

        .click()

      cy.get('ul.slideout-menu').should('be.visible')

    })

  })

})

Consider the code above.

cy.viewport(‘iphone-5’): sets the viewport to iPhone 5 which means the display resolution will be the same as iPhone 5, so we will be able to test and view how web page renders in iPhone 5. 

The way a web page renders will be differ based on the device it is accessed from. In this scenario, we can test the webpage with iPhone. The next few lines explain what DOM items should be visible and what types of DOM elements should not visible. 

There are many third-party plugins that can be integrated with Cypress to perform some of these mobile actions. Please note that these are not developed by Cypress directly rather it is developed by open-source contributors to make it better.

The Ionic Framework is one such framework that can be used or integrated with Cypress. The ionic framework helps to simulate mobile behavior like swipe left, swipe right, etc. With Ionic Framework we can also access App storage and perform operations with it.

As seen above, while running Cypress tests on mobile browsers may require a little work, it yields effective results. Utilize the techniques and the code laid out in this article, and you will be able to verify the efficacy of a website on mobile browsers by leveraging Cypress’ many useful qualities and features.