Cypress tests failing in CI due to unexpected mobile UI rendering

Other Questions Headless Browser
1

I’m having a weird problem with my Cypress tests for a React app using MUI components. The tests work fine locally, both headless and headed. But in our GitLab CI pipeline, some form-related tests are failing.

When I look at the failure screenshots, I notice the form components are showing up as mobile versions. This isn’t what the tests expect, so they fail. It’s strange because I’ve set the viewport to 1280x720, which should be desktop-sized.

I’ve tried a few things to force desktop mode:

  • Setting a desktop user agent in the Cypress config
  • Trying to turn off touch behavior with browser launch flags

But nothing’s worked so far. The CI uses a Cypress Docker image with Node 20 and recent versions of Chrome, Firefox, and Edge.

Has anyone run into something like this before? I’m stumped and can’t find much help online. Any ideas on why Cypress might be rendering mobile UI in CI but not locally?

2

I’ve faced this exact problem in my CI pipeline before. It’s frustrating, isn’t it? What finally solved it for me was adding a custom polyfill for window.matchMedia in my Cypress support file. CI environments often lack this function, which MUI uses for responsive design decisions.

Here’s what I added to my support/e2e.js file:

window.matchMedia = window.matchMedia || function() {
  return {
    matches: false,
    addListener: function() {},
    removeListener: function() {}
  };
};

This trick forces MUI to think it’s always in desktop mode. After implementing this, my tests started passing consistently in CI. Just remember to only include this in your test environment, not production code.

Also, double-check your Cypress viewport settings in the CI config. Sometimes these can be overridden unexpectedly. Hope this helps you resolve the issue!

3

yo i had this issue too! drove me nuts. turned out our CI was using a diff chrome version than local. try pinning the exact chrome version in ur CI config to match local. also, check if ur CI has any weird env vars set that might mess with rendering. good luck dude!

4

I’ve encountered a similar issue before, and it turned out to be related to how MUI handles responsive breakpoints. Even with a desktop viewport size, sometimes MUI can misinterpret the environment in CI.

One solution that worked for me was explicitly setting the MUI theme’s breakpoints in my test setup. You can do this by wrapping your app in a custom ThemeProvider during tests. Something like:

const theme = createTheme({
  breakpoints: {
    values: {
      xs: 0,
      sm: 600,
      md: 960,
      lg: 1280,
      xl: 1920
    }
  }
});

// Wrap your app component
<ThemeProvider theme={theme}>
  <YourApp />
</ThemeProvider>

This ensures MUI uses the correct breakpoints regardless of the environment. Also, double-check that your CI configuration isn’t setting any unexpected environment variables that might affect rendering. Good luck troubleshooting!