New Project Setup | Bondar Academy
Course: Cypress UI Testing with JavaScript
Module: Working with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we set up a new test project for the application Conduit , accessible at conduit.bonderacademy.com . Here are the key steps and concepts covered: Creating a Test Account Click the Sign Up button to create an account. Use any random username , email , and password . The email does not need to be real. Sign in using your credentials after account creation. Application Functionality Once signed in, you can perform various operations like: Creating articles Publishing articles Deleting articles Understanding the API The application has an underlying API that handles data requests. To inspect API requests: Open the browser's Inspect tool. Navigate to the Network tab and filter by Fetch and XHR . Observe API requests and responses, such as GET requests for articles and tags. Setting Up Cypress Framework For testing, we configured the Cypress framework: Added a Cypress dependency in package.json . Set viewport resolution and base URL in the cypress-config folder. Created a new spec file for tests. Logging In with Cypress The first test involves logging into the application: cy.visit('application_url') Use cy.contains to find and click on the Sign In button, then fill in the email and password fields using cy.get . Custom Commands To streamline the login process, a custom command was created: cy.loginToApplication() This encapsulates the login steps for reuse in future tests. By the end of the lesson, the application and testing framework were successfully configured, setting the stage for future lessons.
Video Transcript
Hey guys, welcome back. And in this lesson, we will set up a new test project for the new test application that we're gonna use in this module. So let's get into it. So this is our test application, Conduit. And it's located at conduit.bonderacademy.com. I already showed you this application before at the beginning of the class. And in this module, we're gonna use this one. So first of all, you need to create your own test account that you're gonna use for this course. So you will need to click on the Sign Up button and type any random username, any random email, and password. So email, not necessary, have to be your real email. It can be any absolutely fake email. You just need to create your account so your test data will be isolated from anyone else who using this application. I already have the account, so I just make a sign in. So my account will be syuseratqqq.com, and password will be welcome12345. But you have to use your account, okay? So sign in, come on, welcome12345. Yeah, and it was working successfully. And after you created the account, you can perform operations such as create the article, publish the article, delete the article, and so on. And what is important in this application for us that this application has an underlying API. And when we do anything in this app, the browser sends requests to the API to receive some data or update some data and so on, and how you can see this information. So you can click anywhere on Inspect, and then navigate to the Network tab over here. Then in this Network tab, you need to filter all your requests by Fetch and XHR. So in this way, over here will be displayed only API requests, and everything else will be just ignored. And then, let's say, if I click on the different tabs, for example, you see there is an API request feed limit status 200, and articles limit 10 offset. And if I, for example, make a refresh, we have tags endpoint. If I click on this, you can explore it. So this is a tags endpoint, you see. conduit-api-bonderacademy.com, this is the domain for the API, API slash tags. This is a GET request, and if we click on the Response tab, we can see what is response came back for the tags endpoint. This is the JSON object. And if we click on the articles over here and headers, this is the API request to the articles endpoint to get the articles. And this is a query parameters that we request in just 10 articles to be returned from the API. This is also GET request. And the response is the giant JSON object with the list of articles. So all the articles that you see over here on the page, this is article number one, number two, number three, and so on. All of them are coming from the API, and this is the article number one. This is object, this is the article number two, object number two. This is article number three, object number three, and so on. So browser requesting data from the API, API returning the response, and this information displayed on the web page. And this is what we automate over here. So let's set up a new Cypress framework for that. I already configured initial setup, and if you don't know how to do this, you can scroll all the way up to the initial lectures of the course where I show how to set up Cypress framework. I didn't do it from scratch. So in the package.json, I have just a Cypress dependency. That's it. Then in cypress-config folder, I have only, in cypress-configuration file, I have only resolution for the viewport. This is HD resolution, and I also configured base URL for the application. And also, I set up a new CY file, new spec file for the test. So for the initial run, let's first of all, log in to our application, because all scenarios that we're gonna execute down the road will be as a logged in user. There is nothing much you can do in this app if you are not logged in. So let's do this. So first step will be CyVisit, and I need to visit the application. Then go back, let me log out real quick. So click Logout. Then I need to click on this Sign In. Since this is a single sign in, I can use just CyContains. So just CyContains by text, sign in, and then click on that. So after that, it's gonna be email and passport fields. Most likely, it is a placeholder, placeholder email. So going back, CyGet, this is a placeholder email. And I want to type my email in here, which is cyuser at qqq.com. And then password will be also by a placeholder. So placeholder password, and the password is welcome12345. Yeah, this is a difficult password though. And then we need to click on Sign In button after that. So Sign In, right-click Inspect. So we can use as well text and just the tag Submit, something like this. So it's gonna be CyContains. It will be a button with a text, Sign In that we need to click on. Yeah, sounds about right. So let's try to run this, and first of all, make sure that it is working. So clicking on the first test, and everything works successfully. We successfully logged in as our CyUser test. Also, look on the left. In the Cypress runner, when application has the API calls, we also see this interaction in the runner on the left. So look, when we open the application, we click on Sign In right away. Then we typed our username and password stuff. And then after the click, application made the POST request to login and point to make the authorization. After the authorization was complete, we were redirected back to the homepage. And when we redirected back to the homepage, look, you see the status is still loading articles. So articles are not loaded yet. Then we made a GET request to receive the list of the articles. And look, request and response. And it seems like tags already loaded, but articles not yet. And then was the endpoint with the tags and request and response. Yeah, it's still not showing that it is loaded. Anyway, let me remove it. And the final step after all this process was completed, we see the list of articles and the list of tags loaded on the page. So let me run this test one more time. By the way, and now I caught also interesting moment. You see, right now I have two spinners next to the API request. So what happened here? So when I click on the site visit, application was able to send the initial request to articles. And tags endpoint. But then we clicked so fast on the sign-in that we were redirected to the sign-in page, but these two requests did not complete it in time. That's why they are still showing over here in the runner, like they are not completed. And then after we completed the flow, those two requests were executed one more time, and we were able to load all the data. So everything is working, and let me make a quick refactoring. So instead of keeping all these steps as multiple steps operation, I will create a custom command right here to log into application and put it everything over there. So we already talked about custom commands. You know how to do this. So it's gonna be login to application like this. We will not have any parameters right here. And I take all this code, command X, and paste it over here, command V. And then inside of my test, I will call cy login to application like this. And going back, so this is the app, this is Cypress. Let's try to run it, and yeah, we logged in successfully. All right, everything is set up. We configured a new application, a new framework for the new application. And I'll see you in the next lesson.