Preventing cookie banners with Cypress

If your company has one of these cookie banners and you use Cypress for testing, you might have had issues with your tests failing because the banner covers the page. Here is a super small article to explain how to work around that problem.
In most cas…


This content originally appeared on Hugo “Kitty” Giraudel and was authored by Hugo “Kitty” Giraudel

If your company has one of these cookie banners and you use Cypress for testing, you might have had issues with your tests failing because the banner covers the page. Here is a super small article to explain how to work around that problem.

In most cases, the way a cookie banner works is that it renders the banner, and when the user interacts with it, it sets a value in a cookie so next page loads do not render the banner again.

We can set that cookie before loading any page thanks to a Cypress event.

In the code below, replace the value of the two main constants with the way it works for your website, and add this code snippet in Cypress “support file” (defaults to cypress/support/index.js).

// The name of the cookie holding whether the user has accepted
// the cookie policy
const COOKIE_NAME = "cookie_notice";
// The value meaning that user has accepted the cookie policy
const COOKIE_VALUE = "ACCEPTED";

Cypress.on("window:before:load", window => {
window.document.cookie = `${COOKIE_NAME}=${COOKIE_VALUE}`;
});

If your code relies on Local Storage instead of cookies to store consent, the concept is exactly the same.


This content originally appeared on Hugo “Kitty” Giraudel and was authored by Hugo “Kitty” Giraudel


Print Share Comment Cite Upload Translate
APA
Hugo “Kitty” Giraudel | Sciencx (2022-09-29T21:10:40+00:00) » Preventing cookie banners with Cypress. Retrieved from https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/.
MLA
" » Preventing cookie banners with Cypress." Hugo “Kitty” Giraudel | Sciencx - Sunday March 15, 2020, https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/
HARVARD
Hugo “Kitty” Giraudel | Sciencx Sunday March 15, 2020 » Preventing cookie banners with Cypress., viewed 2022-09-29T21:10:40+00:00,<https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/>
VANCOUVER
Hugo “Kitty” Giraudel | Sciencx - » Preventing cookie banners with Cypress. [Internet]. [Accessed 2022-09-29T21:10:40+00:00]. Available from: https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/
CHICAGO
" » Preventing cookie banners with Cypress." Hugo “Kitty” Giraudel | Sciencx - Accessed 2022-09-29T21:10:40+00:00. https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/
IEEE
" » Preventing cookie banners with Cypress." Hugo “Kitty” Giraudel | Sciencx [Online]. Available: https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/. [Accessed: 2022-09-29T21:10:40+00:00]
rf:citation
» Preventing cookie banners with Cypress | Hugo “Kitty” Giraudel | Sciencx | https://www.scien.cx/2020/03/15/preventing-cookie-banners-with-cypress/ | 2022-09-29T21:10:40+00:00
https://github.com/addpipe/simple-recorderjs-demo