Reusing Logged In State | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Advanced Features
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore a powerful feature of Cypress that allows for the reuse of authenticated user state, significantly speeding up test execution. Key Concepts Custom Command for Login: A command named login was created to authenticate users via an API request, saving time by avoiding repeated username and password entries. UI Authorization: In cases where API authentication is complex, Cypress provides the CySession method to store and reuse authenticated user states. Using CySession To implement CySession , a custom command called UI login is created, which includes the following steps: Navigate to the homepage. Sign in by entering email and password. Click the sign-in button. To store the session, wrap these steps in CySession with a session name (e.g., user ) and a callback function. Important Considerations Ensure authentication is fully completed before CySession finishes. Use assertions (e.g., site location ) to confirm successful login. After using CySession , reopen the homepage to maintain the authenticated state. Session Management To reuse sessions across multiple tests, set the cache across specs option to true . This avoids repeated logins for each spec file. Additionally, switching between different user sessions within the same test is possible by creating a method that accepts a username parameter. This method of using CySession enhances testing efficiency by eliminating the need for repeated logins, allowing for faster test execution.
Video Transcript
Hey guys, welcome back and in this lesson, I will show you a very cool feature of Cypress, how you can reuse authenticated user state and that way save a lot of time on test execution. So let's jump into it. So previously in our app, we created a custom command login to application that was using API request to get the token and save this token into storage state. So in that way, we saved a lot of time on authentication flow for every API. So instead of using username, password and click sign-in button every time, we make a quick API call and that saved us a lot of time. But for your app, it's not necessary that authentication will be that easy with just simple API call. Sometimes it's even hard to figure out how to make authentication using API. In cases like this, you can use a different approach. You still can use UI authorization, but you can use a feature of Cypress called CySession, it's method in CySession to store the user state, the authenticated state and then reuse it across the test. So let me demo how to do that. For that, I created a second custom command which I called UI login, and it has a basic flow with authorization to app. So go to homepage, sign-in, type email, type password and click sign-in button. And if we want to store the session of this user and reuse it for every test, we can use a special method called CySession like this. Then we provide a session name, for example, user like this, and then a callback function. And then all we have to do is just to wrap these steps into the CySession. So we need to put it inside. And this almost it, it's that easy. Two things important at the end. The thing number one, you have to make sure that authentication is completed fully before the CySession method completed. So after sign-in, browser is still in the process of the authentication of the user, and we need to add some kind of assertion to make sure that this process is completed before that method is completed. So I can add something like site location and make validation that the path name should equal to the home page. So after the authentication is completed, we redirect it back to the home page and path should be this one. And if we redirect it back to the home page, it means that we authenticated successfully. And also, this method will not handle the opening of the page and keeping us on the home page. So right after the CySession, we need to open our home page one more time. So CySession will log into application and remember the authorized storage state. And then we need to open home page one more time and it will be already authorized. Let's see how does it work. So I just take this custom command and I replace it everywhere where we used previously inside of our test. Instead of previous command, I will use this one. So this is a delete and this one is just completely API testing flow. Yeah, we can remove it. So yeah, let's try npx cypress open. Let's try to run this test. Cypress runner. Okay, and I'm running working with API's test, running the test. So let's see, so we're logged in first time and look, every time we do execution after that, the login did not happen. And this delete article failed because it was waiting for sci-get alias access token that was used in the previous custom command. So let me just make a sci-skip, where is that? Delete the article, I make it skip, just like this. Going back, and if you see right now, so I rerun the test and we logged in every time as authorized user. And here we go, you see session user restored. And also I open here session user restored. But if I close cypress runner and open it again and run it one more time. Again, first time it's authorized with username and password, but each next test just reusing this authenticated state. So first test I open, and look, session user created. First test created the session, and each next test just restore this session. So super cool and super, super fast. If you want to reuse this session across multiple tests, across multiple spec files, so you can add additional argument over here. So after size session, you can provide additional options and call cache across specs, set it to true. By default, it's set to false. So if you run multiple spec files, it will log into application again and again for every spec file. But if you cache across specs, then log in once and then all spec files will use the same session. And also if you need, you can switch the sessions during the test between different users if you need this kind of scenario within the same test. And for that, let me quickly open Cypress documentation switching sessions. So like this, so for example, you create a method and provide the parameter with a username that you want to use. And then when you call the method inside of the test, so for example, first you want to log in as a user, perform certain operation, and then flip the session in the same test, in the same scenario. And then continue the flow as a completely different user. This is also possible and also easy. All right guys, that's it. That's how easy you can use method CySession to reuse authenticated state of your user to run the test significantly faster instead of logging into your application every time. So I'll see you in the next lesson.