Overcoming SameSite cookie issue in Cypress when running on Chrome or Edge

New year 🎉, new me 🤪... or maybe not, coz my ❤️ for Cypress has not died off... Well, almost.

You see, I just changed company last December (yey!) and my first few days were spent on building a basic automation framework. Understandably, first thing I tried out is the UI login 🔑 (Sorry, API does not have the wow factor when you're doing a demo)

So, I told myself, "I got this and let me work my magic!" but boy, was I so wrong! Manually doing it, obviously, it works fine. Using Cypress' default browser, Electron, it works great. Having fun yet so far! Here we go... using Chrome, NA-DA ❌! I got an 401 Unauthorised access error!

I could have been very lazy and just told everyone that if it works with Electron, then it should be fine but no, I was determined to make it work with Chrome. It took me maybe a couple of days, munching snacks while my belly blew up, and a thousand times clicking Stackoverflow and Github Cypress issues looking for an answer but there was none 🙅! I had to look outside Cypress and more on generic Javascript and after multiple hair-twisting re-tries scraping the XHR requests, I found the holy grail 🙏🏻

With me hoping that customer churn rate with Cypress does not further increase, here's how you should do it:
Under cypress/plugins/index.js, include the following condition:

module.exports = (on, config) => {
    on('before:browser:launch', (browser = {}, launchOptions) => {
        if (browser.name === 'chrome' || browser.name === 'edge') {
            launchOptions.args.push('--disable-features=SameSiteByDefaultCookies') // bypass 401 unauthorised access on chromium-based browsers
            return launchOptions
        }
    })
}

With the above code, SameSite default cookie issues are by-passed when using Chromium-based browsers. This includes Edge so don't forget to include that browser in the condition.

Again, happy Cypress testing! 🤗