Sharing Authentication State | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Interacting with APIs
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on sharing authenticated state in testing applications, which can significantly speed up test execution by avoiding repeated logins before each test. Key Concepts Authenticated State: Instead of logging in for each test, we log in once and share the authentication state across multiple tests. Setup File: Create a new file named alph.setup.ts to handle authentication setup. Storage State: Save the authenticated state in a file named user.json within a folder called .alph . Implementation Steps Create a folder .alph and add it to gitignore . Create alph.setup.ts in the test folder for authentication logic. Define a variable for the storage state file path: const alphFile = '.alph/user.json' . Ensure the application is fully logged in before saving the state by adding appropriate waits. Update playwright.config.ts to include a new project for the setup file. Configure other projects (Chromium, Firefox, WebKit) to use the shared authenticated state. Conclusion By implementing this setup, we ensure that the application logs in only once, allowing subsequent tests to share the authenticated state. This approach enhances efficiency and reduces redundancy in test execution.
Video Transcript
In this lesson, we will talk about how to share authenticated state. This technique can be very useful when, for your test, you need to log into your application every time before every single test. And if we authenticate just once, then the rest of the test will be used as shared authenticated state. So it will speed up the test execution significantly. And in this lesson, we will do this. Let's get into it. So, so far, we created three tests for this application. To display the mock article, to delete the article, and to create the article. And every time we have these steps have to be executed inside of the before each hook. When we need to click on sign in, enter our username and password, click submit, and only then test will be executed. This is not really a good thing to repeat this step again and again for every test. It would be much nicer if we would just share the state of log in application. That we would save this information somewhere and then just reuse the authenticated state for other tests. And this is what we're gonna do in this lesson. So to begin with, let's begin with creating a new folder that we will call .alph. And we will add this folder into gitignore.alph. So this folder will be used to save the information about authenticated state of our application just as a placeholder where the playwright save the file. The next step, we will need to create the new file that will be responsible for authentication setup. I will create a new file under test folder and call it alph.setup.ts. And I will need an import. Copying from this spec file right here. And instead of just test, I want to import it as setup. So I technically make a renaming of how I want this to be imported inside of the TypeScript file. And then I am creating a setup block that will be responsible for authentication. All right, then the next thing, I simply taking these steps that are responsible for entering username and password into this test. Okay, what's gonna be next? Next, we need to create a file where we will save authenticated state. And we provide the path to this file inside of this .alph folder. So const alph file, just a variable that equals to .alph. And let's say I want to call it as user.json. The name of the file can be absolutely different. So I want this file to be saved as a user.json. And the last thing, and after application is logged in right here, I want to save this state as a wait page.context.storageState. And provide the path to the file. So before this line will be executed, we have to be absolutely make sure that our application is fully logged in. So just as a percussion would be good to add some additional weight to make sure that we check on the application loaded state. For example, we can add a weight of page, weight for the response and weight for some API response that we would see when application is loaded. What this can be? So here is our app, inspect, networking tab, I make a refresh. And let's say we can take this tags endpoint as the endpoint that we want to wait to complete the load of application. Since we know that when we open the homepage, tags endpoint is called automatically. So if this endpoint completed the call, then most likely our application already authenticated. So I put this right here. All right, this part is done. And the last thing we need to configure playwright.config.ts in order to handle this setup method. Inside of the configuration file, we're scrolling down to the projects section and we need to create a new project that will be responsible for set up. So I create a new object, put the comma at the end since this is array of the objects and create a new project. So with a name, I want to give it, let's say name setup. And the second property that I want to add is test match. And we want to match the name of our setup file, which is alph.setup.ts. So this project will be responsible for running only this alph.setup.ts. The next step inside of the other projects, which is Chromium, Firefox, and WebKit. So this is a configuration for each of the browser. We want to add inside of the use block, the second property, which called storage state. And the storage state will use the state, authenticated state of the application that will be created by this step. So alph.setup.ts will create authentication file that will be saved right here. This file will have information about authenticated state of our application. And we want to use this state by each of the projects. So storage state, and we provide the path to the file, which is alph.user.json. And I copy this to each of the project, to Firefox and to Safari. That's it. And the last step, we need to put the dependency. Dependencies. And dependency on the project. And the project name is setup. And I'm copying the same setting configuration to each of the project. So this dependencies block means that before running the Chromium project, we need first to run this project as our precondition step. And after this precondition step is done, this part can be executed. And since this precondition step will generate for us authenticated user state, this project, when it will start, it will read this authenticated state from this file and our application will be authenticated. So let's go back. This file is ready. Configuration is ready. And here we can just remove these steps. We don't need them anymore since we move them over here. And I think we are all set. Let's try to run this test again. Okay, we see the login screen. And now we see the first test and test is passed. Now I close this window and let me run all three tests. And now you see a different behavior. That application should log in just once and the rest of the two tests should be just executed sharing the previously logged in state. So we see the login once and the rest of the test, they are just sharing the logged in state. Perfect. All three tests work successfully and we use just once a logging state. All right, that's it, guys. So let me quickly summarize what we did in this lesson. We created a new file, alph.setup.ts, where we moved the step related to authentication. Authentication now is saved into the alph.user.json and then the state is shared across other tests using this file. We set this configuration inside of the playwright.config.ts and the dependency on the setup project that will run the alph.setup.ts. And now every time we run the framework, authentication will happen just once and all other tests will share this authentication state for the other tests. All right, thank you guys and see you in the next lesson.