API Headless Authorization | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to implement headless authorization using APIs to streamline the login process in our test application. Key Concepts Headless Authorization : Replaces repetitive username and password entry with a faster API call. JWT Token : The token used for authorization is stored in the browser's local storage. Steps to Implement Headless Authorization Run the existing tests to observe the time taken for login (approximately 8 seconds). Access the Networking tab in the browser to find the JWT token in local storage. Make an API call to retrieve the token and save it in local storage before running tests. Modify the commands.js file to replace the login operation with the API call. Use the onBeforeLoad event to set the JWT token in local storage. Test execution time is reduced to 5 seconds by bypassing manual login. Further Improvements Save the access token as an alias for reuse in API calls throughout the tests. Utilize cy.get to retrieve the token alias for authorization headers in subsequent requests. Conclusion This technique simplifies the authorization process, making it faster and more efficient. For more complex scenarios, refer to the Cypress documentation for examples of headless authorization with various identity management tools.
Video Transcript
Hey guys, in this lesson, I will show you how to make a headless authorization using APIs. So, for your test, every time we need to enter username and password and click send-in button, username, password, click send-in button, and so on. And it takes time, right? But if we can replace this repetitive step with a faster API call, it would be much better. So let me show you how to do this. So this is our test project. We're going back. First of all, let me try to run the existing test with as they are right now. So I am removing it only. And we'll try to run all the tests that we have so far in our framework. And look, currently, we have to type username and password every time we log into the application. The total execution took like 8 seconds. How can we replace this with just a headless authorization? So for our test application, browser somehow knows where the token is stored. So we right-click in spec, networking tab, make a refresh. So the token is somewhere stored in the browser because it's passed automatically as the authorization credentials to all of our API calls. Where does it keep this information? And if we can save this information into the browser somehow before opening our application, we can make our browser automatically be authorized. So with this particular case, in this particular application, if we go to the application tab and open the local storage over here, we can find the JWT token saved over here. So key is JWT token and value is the token value. This is where the token is saved inside of the browser. And what we can do is we can make an API call to get our token and then save the token directly into the local storage, making the browser automatically authorized before we running any of our scenario. So let's do it. So going back to the test application, and I'm looking into this commands.js. So this is where we repeat this operation of logging in. So let's replace it with API call. I'll take the code for the API request from here and we'll start modifying my custom command. So I paste it over here. All right. So after I make a request, then what I need to do, I get the response. First of all, I need the validation of the status code for sure. And also I need to get the access token. Copy this and copy this. But I will not need this appendix of the token because the token saved in the browser is just a pure token without this token word. We need to add it later on. So I'll remove this. How to add this access token into the browser local storage? So I call in my site visit method to open the application. And as the second argument, I provide the object. Inside of this object, I can call onBeforeLoadEvent. And I can call my window object. And inside of this window object, I can call local storage. And I can set the new item with the key. And I need to pass exactly the key how it is in the browser JWT token. And I pass it right here. And the value will be access token right here. And yeah, I guess that's it. And now I can remove this code. And every time now we run the test, method loginToApplication will make an API call, set the JWT token, and everything will work. We simply bypassing the step of entering username and password every time. So let's go back to the test. And let's try to run it one more time. And look, right now we don't have a screen where we have to enter our user credentials. And you see the test execution shaved three seconds out of our entire test run. Previously, it was eight seconds. Now it is five seconds. And also, we can make one more improvement. So since we have this access token, and we also use this token inside of the spec file for API calls, instead of duplication of these calls, we can save this token as alias. So I call sywrap, and I wrap my access token and save it as access token as well. Then inside of the test where we use loginToApplication method, it is right here where we were using the delete the article. So we can call the loginToApplication as a first step of the test case. And then replace this token call, this guy, with just calling the alias. So I call syget and call the alias accessToken. Then this response will be not response, it will be a token value. We don't need this guy anymore. We don't need this access token as well. But let's just rename the token to accessToken, and we will remove it. And I just need to get this, paste it right here, and add the plus sign. And I can remove this line completely, that's it. So now I am moving this step at the beginning of the test right here. Because this line, when I call it, it will create this alias for me in the commands.js. So then I can call the alias, get the access token, and then use this token as authorization credentials, as authorization header to make the post request after that. So yeah, I think that's it. Let's try to run this test. And running this test, and it's working successfully as well. Five seconds to execute. All right guys, so let's quickly summarize what we did in this lesson. So you can and should bypass the authorization process to your application using API. This is a very cool technique. In our particular application, the process of authorization is quite simple. So we need just to save our access token as JWT token. And for that, we were using onBeforeLoad event to save the value into the browser local storage. We also saved our token as alias. So this value of the access token is accessible anywhere else in the test where we need to call the API. So right here, we call the sciGetAccessToken, and then we can use the value inside of the test. So keep in mind that this process shown in this lesson is quite simple. And in other applications, they may use more sophisticated ways of the headless authorization to the application. For those examples, you can find in Cypress documentation. So let me show you this, Cypress, for example, Okta Authentication. And here in Cypress documentation, you can find, for example, authentication with Okta, authentication with Google, social authentication, Azure, Auth0 authentication, Amazon authentication. You can find a guide with the example how you can use API to log in for Okta or with other identity management tools for your app. All right, that's it, guys, and I'll see you in the next lesson.