Test Data Setup Using APIs | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we explore how to use Cypress for setting up test data through APIs . The goal is to create an article, modify it, add comments, and then delete it, specifically focusing on the deletion process. Key Steps in the Process Creating an Article via API: Instead of using the UI to create an article, we utilize the API for a faster setup. Using cy.request : This method is essential for making API calls in Cypress. We prefer using an object to provide arguments for better readability. Authentication: The first step is to authenticate and obtain a token from the login endpoint. This involves: Making a POST request to the login URL. Validating the response status code (should be 200). Extracting the token from the response for future requests. Creating the Article: After obtaining the token, we make another POST request to create the article with the necessary headers. Deleting the Article: We then perform UI actions to delete the article and validate that it no longer exists. Important Considerations Always validate the status code after each API request to ensure success. Use cy.intercept and cy.wait to handle asynchronous operations and ensure proper validation after deletion. For practice, create a UI scenario to add a new article, followed by an API call to delete it, reinforcing the concepts learned in this lesson.
Video Transcript
All right, guys, we're coming back to Cypress. And in this lesson, we will use APIs to set up the test data for our test scenario. For example, in our application, we can create article, modify this article, add some comments to the article, and then delete the article. And let's say we want to test the scenario that we can delete the article in the application. But for that, first, we need to create the article. One way of doing this is, of course, through the UI. I click on the New Article button, fill out all the details, and then create the article, and then after that, delete the article. But instead, we can use API, because creating the article through the API is a lot faster way to set up needed test data for us. And this is what we're gonna do. Using API, we will create a new article, and then through the UI, we will delete this article later on. So let's jump into it. So I have created a new test in our spec file. And we, first step, we need to create a new article. How would you do this in Cypress using API? I will call method Cy.request. So this is the method used in Cypress to create API calls. And normally, let me open the documentation. Cypress provide these kind of options. So you can provide either URL, URLBody, URLMethod, and Body. But I don't really like providing arguments that way. I more prefer using the object. So providing object with all the arguments that we need for the request, because it makes it much easier to read the code after that. So I would do the approach like this, providing all the arguments that we need. So let's go back, and I provide the object. And now, we simply need to copy everything from the postman that we did before, all the components, to create the request. First of all, we need to create the token. So let's start with this. So URL and URL for our request will be going back to the postman. This is the URL for login endpoint, and this is the URL. Then put comma, the method type will be a post. Then the body will be, and going back to the postman, I'm copy their request body. Request body is a JSON object with username and password. And I'm literally pasting it right here. So sometimes VS Code make this messed up. So I use Command Option Shift F on the Mac. And on the Windows, it would be Alt Shift F, as far as I remember, to automatically reformat the code in VS Code. That's it. So URL, method, body, and request is ready to produce. Then we need to process the response. So after the braces, I call method then, and then I process my response object. The very first thing that I need to do is to validate the status code to make sure that the request was successful. So I expect that response.status. It has a status property to equal, and it should be, let's check postman. So send request, and the postman says 200. All right, so the status should be 200. Then after that, I need to extract the token value from the response. So let's look one more time into the response object. It's located under the users and under the token. I need to grab this token. I create a new constant and call it, for example, accessToken equals to then call response. Then inside of the response, I'm looking for this body property to get the JSON body from the response. I call body, and then I'm calling the properties of this object. So it will be user and then token. All right, and I call user.token. This will give me the pure value of the token like this. But remember that our every API request for the headers, they need the token in the format. Where is that? Headers, like token, space, and then the value. So let's make this concatenation right away inside of the code. I will create a string like this, token, space, and plus response body user token. So this access token, later we can use for the next API request as the header to create the article. All right, and now I can create a next API request using this token to create the article. Look, I'm continuing writing my script, the next site request inside of them because this access token will not be visible outside of then function. So I call the next site request like this, and it will be the object one more time, and I repeat the process again. So the URL will be going back to create the article. It's this one. So this is the URL. All right, comma, then method will be post, and the body will be going back to postman body. This is the request body to create a new article. Going back, pasting it here, and quickly reformat. The fourth property that we need to use is the headers. Headers like this, and headers will be the object where we provide all headers that we need. In our example, we need just authorization header, and value for this header will be access token that we created earlier like this. You repeat the same step then to get the response equals two. Validation of the status code one more time. So I can copy this line for the convenience. When we create a new article, let's send this request. It should be status 201. So going back, the status should be 201. Additionally, we can make validation that this article was created successfully. For example, we can create expect, then I call response.body, dot, and then let's look in our structure. So it should be article and then title. So it should be dot body, dot article, dot title to equal, and value should be exactly as this in the request object. Yeah, I guess that's it. So this is request number 1, request number 2, and after that, article have to be created. So let's double-check this. I'm going back to our application. I refresh and I delete the current article that we created through the Postman, and let's run this code to make sure that we can create article using Cypress. So going back to the Cypress, and I just run this test, and here we go. Two requests were made. So look, this is login and this is the articles. We don't see anything in the browser because nothing actually happened. But based on the assertions, we can tell everything work correctly. So going back to the application, refresh. Yeah, and this is our test article. So that's it. After that, we can run a regular scenario from the UI to make our UI validation. So let's do this. So now I go back here and just create my regular scenario. So first of all, I need to login like this. Then I want CyContains. I want to click on the test title Cypress to open this article. Then after article is open, I want to click on the button to delete this article. So let's double check. So I'm clicking on this, and we have delete article button. Let's type delete article button. We have two buttons like this, over here and over here. So let's click on the first button. So I type .first and .click like this. And after this process is completed, delete the button, we should be redirected back to the homepage. And we need to add validation that this page does not exist, the article that we just created. So I can type CyContains. And I think I can grab some code that we had before. So this article list. Okay, so CyGetArticleList should not contain text. And the text that it should not contain is test title Cypress, like this. So I think it's ready. Let's try to run this test. Going back to the Cypress. Okay, something didn't work, so title must be unique. Let's try to refresh. Title must be unique because article is created. Deleting the article, going back to the test, and run test one more time. All right, test passed successfully. And let's double check what we have here, deleting the article. And the only one concern I have over here. So look, when I am doing a validation, the validation happened against loading articles. It's not happening against the actual list of the article. So this technically is a false negative assertion. We need to fix it by waiting on the API call to be completed. Remember, we talked about it in the previous lesson. And this is exactly a great case when you can use this dynamic wait for the API call to be completed. So I am going back and let me find this CyIntercept for the article. So I'm calling this CyIntercept. And I wanted to define this CyIntercept directly before making the step of deleting the article. And then I add this CyWait. Where is this CyWait for article API call? And I add in this step over here. So now I define the interception, then I click Delete Article. We're properly waiting for this call to be completed, and then waiting for validation. So going back and running test one more time. And okay, and now let's double check. So checking this assertion, and now this assertion work correctly. So look, we click Delete Article. We're waiting for the API call to be completed. And in the runner, you already see that there is a list of the articles displayed. So this assertion is valid. This article does not contain. So guys, that's it. This is how you do it. This is how you use APIs in creating the test data for your scenarios. And to clean up the test data would be exactly the same thing. So you can take it as your home practice assignment. You can create the UI scenario to creating a new article. So you would go right here. So click on New Article in the browser, fill out the form, create a new article. And then after that, you will need to make an API call after that to delete the article. So you can take all Postman information right here. What you will need to do is API call to get the token. Then you need to make a GET request to, this is a POST request, this is a GET request, to get the list of the articles in order to get the slug ID for the article that you want to delete. And then after that, you will use a DELETE request. It will be a third request using the slug ID from the response from the GET request to delete the article to clean up the test data after the execution. All right, so let's quickly summarize what we did in this lesson. So when you want to make API call, API request in Cypress, you will use method CyRequest. For the convenience, I prefer to use the object where you can provide all the arguments of your request, so it is easier to read in the code. URL, method, body, and when needed, headers with authorization token to make a secure API connection. As a very first thing after the response, you have to validate status code as a very first thing, just to make sure that your execution was successful. And then to read the properties of API response, you call in response and then call in the body property to get the response body. And then by dot notation, you can access other properties of the response object. You can save those properties in the constant to use for the next API request. When you save constants or variables out of your response, it is important to continue writing the next API request within the previous then function so you will have access to the data that you extracted from the response. All right, that's it guys, and I'll see you in the next lesson.