mobile simulation in Cypress

In Cypress, simulating mobile devices can be achieved by emulating device characteristics such as screen size, user agent, and viewport size. While Cypress does not directly support emulating specific mobile devices like some browser developer tools do, you can configure your tests to approximate mobile behavior using custom viewport sizes and modifying the user agent string.

Here's how you can simulate mobile devices in Cypress:

1. Setting Viewport Size

You can set a custom viewport size in Cypress to simulate different screen resolutions commonly found on mobile devices.

describe('Mobile Simulation', () => {
  beforeEach(() => {
    // Set the viewport size to simulate a mobile device
    cy.viewport(375, 667); // iPhone 6/7/8 dimensions (portrait mode)
  });

  it('should display mobile version', () => {
    cy.visit('https://your-site.com');

    // Add assertions or interactions relevant to mobile view
    cy.get('.menu-icon').should('be.visible');
    cy.get('button').click();
  });
});

2. Modifying User Agent

You can modify the user agent string to mimic a specific mobile device or browser.

describe('Mobile Simulation', () => {
  beforeEach(() => {
    // Set the user agent to simulate a mobile device
    cy.visit('https://your-site.com', {
      headers: {
        'User-Agent': 'Mozilla/5.0 (iPhone; CPU iPhone OS 14_5 like Mac OS X) AppleWebKit/605.1.15 (KHTML, like Gecko) Mobile/15E148',
      },
    });
  });

  it('should display mobile version', () => {
    // Add assertions or interactions relevant to mobile view
    cy.get('.menu-icon').should('be.visible');
    cy.get('button').click();
  });
});