DEV Community

poponuts
poponuts

Posted on

6 1

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
        }
    })
}
Enter fullscreen mode Exit fullscreen mode

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! πŸ€—

Billboard image

The Next Generation Developer Platform

Coherence is the first Platform-as-a-Service you can control. Unlike "black-box" platforms that are opinionated about the infra you can deploy, Coherence is powered by CNC, the open-source IaC framework, which offers limitless customization.

Learn more

Top comments (3)

Collapse
 
richardbray profile image
Richard Oliver Bray β€’

For those who still have this issue with the never version of Cypress I have a solution that might be helpful
dev.to/richardbray/fix-samesite-co...

Collapse
 
amgadhassannabil profile image
AmgadHassanNabil β€’

Thank you very much this worked like magic :D been stuck in this for sometime

Collapse
 
zachwildd profile image
Zach Wild β€’ β€’ Edited

Apparently as of Chrome 94 this flag has been removed and is enabled by default chromium.org/updates/same-site/

Image of Timescale

πŸš€ pgai Vectorizer: SQLAlchemy and LiteLLM Make Vector Search Simple

We built pgai Vectorizer to simplify embedding management for AI applicationsβ€”without needing a separate database or complex infrastructure. Since launch, developers have created over 3,000 vectorizers on Timescale Cloud, with many more self-hosted.

Read more β†’

πŸ‘‹ Kindness is contagious

Please leave a ❀️ or a friendly comment on this post if you found it helpful!

Okay