Cypress Tests: Preserve Cookies and Keep Login Session Active

By default, Cypress resets the sessions before each test. If you are logged in scenario first test (ex: it() block), then in the second test (second it block), and you are performing some other task, you are automatically taken back to the login page. This happens because Cypress doesn’t keep the session; it creates a new session. In end-to-end testing, mostly, users will be logged first and then all the workflow will be checked. This article explains the simplest way to overcome this problem using just a few lines of code.

Let me explain this scenario:

Testcase 1: You have logged into the application.

Testcase 2: You will click on the menu to verify some feature.

If you are using Selenium, the above option looks very simple.  However, in Cypress, after the execution of the first test case(Testcase 1), it will reset the session it’s like a fresh restart of the browser.  Therefore, when you arrive at Test case 2, you will be again asked to log in and perform all the actions in Testcase 1. If you want to fix that problem in Cypress, let us discuss the steps in an example to follow.

If you are not bothered about specific cookies and all you want is to preserve the login session active across the tests, you can follow the steps below. Also, note that in the steps below, the shared code preserves all the cookies in the Cypress test once you are logged in, and shares the cookies in each test so you no need to log in repeatedly.

There are many questions on the internet such as:

• How to not flush cookies between tests
• How to use Cypress to preserve cookies
• How to preserve the Session in Cypress.io
• How to restore cookies in Cypress
• How to stop re-logins after each test in Cypress.io
• How to preserve and not clear the cookie when the next test starts
• How to create and preserve Cookies with Cypress.io
• How to preserve cookies between tests in Cypress
•  How to preserve cookies through multiple tests

Below is the simplest, easiest, and most generic approach, taking into consideration those who are just beginning with Cypress.  I hope this is of help to someone.

Step1: Navigate To index.js Located in the Cypress/Support Folder

Step 2: Copy and Paste the Code Below

afterEach(() => {
			//Code to Handle the Sesssions in cypress.
			//Keep the Session alive when you jump to another test
			let str = [];
			cy.getCookies().then((cook) => {
				cy.log(cook);
				for (let l = 0; l < cook.length; l++) {
					if (cook.length > 0 && l == 0) {
						str[l] = cook[l].name;
						Cypress.Cookies.preserveOnce(str[l]);
					} else if (cook.length > 1 && l > 1) {
						str[l] = cook[l].name;
						Cypress.Cookies.preserveOnce(str[l]);
					}
				}
			})

Note:   If you are seeing a timeout error after the above code, follow these steps:  

• Navigate to cypress.json file located in the root folder.
• Add line:  "defaultCommandTimeout":30000

Refer to the example project here.   

That's all! Happy Testing!!!

Encourage me to write more articles by buying a coffee for me.

If you are looking for any help, support, guidance contact me on LinkedIn|https://www.linkedin.com/in/ganeshsirsi