Fix sameSite cookie issue in Cypress by installing an older version of Chromium

Cypress out of the box doesn't allow you to visit different urls or domain from the base one in a given test. You can read more about that in the Cypress documentation on web security.

To get around that the following option can be for Chromium based browsers in the cypress.json file:

{
  "chromeWebSecurity": false
}

This works great for most scenarios, but if like me, you're running a test suite that relies on putting cookies from one domain onto another, then you might face a problem.

Why would a site need to share cookies between domains?

This is quite common for passing information from one site to another or session information. If the cookie has expired it means the session has ended and the user cannot do much on the new site they've visited unless the get a new cookie from the previous site.

This doesn't work in newer version of Cypress although it did work in older version. Since Chrome 80 the SameSite attribute needs to be specified in cookies to declare how restrictive they should be. Before Chrome 80 SameSite=None was on all cookies by default but now it needs to be explicitly added in the API request or it's defaulted to SameSite=Lax.

This means running this test suites that require cookies to be shared between domains won't work:

Unfortunately newer version of Chrome (94+) have also removed the flags to disable this. The only way around this issue is to install an older version of Chromium where disabling SameSiteByDefaultCookies is possible with a flag.

Here's how that can be done.

1 - Visit the Cypress chromium downloads site

2 - Find the latest stable version for 90 and download it for your relevant Operating System

NOTE: In theory any version below Chromium 94 should work but I only tested with 90 so that's why I'm recommending it.

3 - Unzip the file and place the contents in an easily accessible location

NOTE: I'd recommend contents of this folder not be pushed to somewhere like GitHub

4 - Open the browser you just downloaded and make sure you adhere to all the security requirements of your relevant operating system.

5 - We'll now need to add some code to the cypress/plugins/index.js. The code is an addition to this excellent solution from poponuts:

const path = require('path');

//...

function addChromiumBrowser(config) {

    const fullChromiumPath = path.resolve('cypress/browsers/chrome-90-mac');
    const chromiumOptions = {
        name: 'chromium',
        channel: 'stable',
        family: 'chromium',
        displayName: 'Chromium',
        version: '90.0.4430.93',
        path: `${fullChromiumPath}/chrome-90-mac/Chromium.app/Contents/MacOS/Chromium`,
        majorVersion: 90,
    };

    config.browsers.push(chromiumOptions);
}

module.exports = (on, config) => {
    on('before:browser:launch', (browser, launchOptions) => {
        if (browser.name === 'chromium') {
            launchOptions.args.push(
                '--disable-features=SameSiteByDefaultCookies,CookiesWithoutSameSiteMustBeSecure'
            );
            return launchOptions;
        }
    });

    addChromiumBrowser(config);

    return config;
};

NOTE: If you are using a version of Chromium other than 90, please change the version and majorVersion fields as well

6 - If all went well, running npx cypress open Should reveal a new browser in your list.

Running in Chromium should fix whatever issue with SameSite cookies you have in Cypress.

Sources

https://dev.to/poponuts/overcoming-samesite-cookie-issue-in-cypress-when-running-on-chrome-or-edge-274m
https://digitaldrummerj.me/cypress-custom-browser/