Prepare for Your First Assignment | Bondar Academy
Course: Cypress Practice Assignments
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this lesson, you will start working on practice assignments using the Pet Clinic test application. Follow these steps to set up the application: Accessing Pet Clinic Navigate to petclinic.bonderacademy.com and log in. If it's your first time, reset your password by clicking on the Forgot Password button. Enter your email (e.g., getuseratbonderacademy.com ) and follow the reset instructions sent to your email. Set a new password and log in to the Pet Clinic application. Application Overview The Pet Clinic application includes: Owners, Veterinarians, Pet Types, and Specialties. Ability to add, edit, and delete specialties and owners. An API for interaction, accessible through the Swagger page at petclinic-api.bonderacademy.com/petclinic/SwaggerUI/index.html . Setting Up Your Project To automate the application: Clone the project template from GitHub (link provided below the video). Create a new repository and clone it to your local machine. Install dependencies using npm install . Configure environment variables in a .env file. Practice Assignments For your assignments: Create a new spec file for the test cases. Automate the test cases as specified in the assignment. Submit your code for review via a pull request on GitHub. Ensure to add the BA instructor as a collaborator for code review. After submitting your pull request, you will receive feedback for improvements. Repeat this process for subsequent assignments. If you have questions, reach out via the Slack channel. Good luck!
Video Transcript
All right, so starting from this lesson, you will begin working on practice assignments. And for the practice assignments, we will use a separate test application which is called Pet Clinic. And let me show you how to set everything up. And navigate to petclinic.bonderacademy.com and hit Enter. So when you log in for the first time, so this application has a username and password. And first, you need to reset the password to get access to this application. So click on Forgot Password button right here and enter the email that you used to log in to Bonder Academy. So for my example, I will use this user for the demonstration, getuseratbonderacademy.com and click Continue. After that, you will get an email with a reset instruction. There will be a URL to reset the password or just a button, click Continue. So let me open my email real quick. I'm copying this link and pasting it right here in the browser, hit Enter. And then you need to set a new password. So you can choose any password or you can choose the same password that you use for the Bonder Academy, it doesn't matter. So and then you set the password and repeat it one more time. And then hit Reset Password and password was changed. Then click on Back to PetClinic Test, enter your email and password, click Continue. And here we go. You navigated to PetClinic application. So it may take a little time when the first load to load the application because it's hosted on the cloud. And when no one use this application, the API just go to the sleep mode and it takes about maybe 20 seconds or so for a container to speed up and then serve the traffic. Okay, now it's everything working. Let me show you around real quick what this application is about. So you have owners, veterinarians, pet types and specialties. And for example, you can go to specialties, you have several specialties. You can edit, delete those specialties. Let's say we add a new specialty like this. So we save the specialty, the specialty was added to the list. And then we go to the veterinarians, for example, over here, and then edit veterinarian. And we can, for example, assign this new specialty for this veterinarian like this. And then we go to the owners. You have the list of different owners. You can search the owners. You can add new owners. You can select this owner and it has a pet. You can add pets. You can add visits to the pets, edit visits to the pets. Here's the calendar. Here's the dropdowns and so on. And also what is nice about it, that this application has an API. So if I click, right click, inspect here in the networking tab, navigate to the networking tab, you can see the network calls that are happening when you do something on the application. For example, click on the owners tab, search. You can see the owner's call was made to this API endpoint, get status, and so on. So you can interact with the API of this application directly. And also, this application has a Swagger page right here. So if you navigate to petclinic-api.bondaracademy.com slash petclinic slash SwaggerUI and index.html, you can open the Swagger page with the list of all API endpoints available for this application. How to use the Swagger page? So let me show you some simple example. Let's say you want to get the list of all pet types. So if you click on get and try it out and try to execute, it will not work because you also need to provide the authorization. So I click execute, you see it doesn't work. So I have the error, unauthorized request. So how to authorize Swagger page to work it right here? So go back over here to the any example of the API endpoints, scroll a little bit down right here to the section over here, authorization, and that's the token bearer. And this is the long, weird value of the token. Let me make it a little bit bigger. So that's the value of the token. You copy the entire value, Ctrl C, going back to the Swagger, click authorized, then paste the value right here and click button authorize and close. That's it. Right now, the Swagger page saved the token and now using this token, you can interact with the API. And now if I click the execute, and here we go, right now we have 200 status code with the response body over there. What is it? It's pet types, right? Cat, dog, lizard, and so on. And also the test data is isolated for users. So for example, this list of owners, you can do with these owners whatever you want. This is your test data for your test cases. You can modify it, add this data, do something with this. So since it's under your account, it's just isolated for your usage only. And later in this class, you will have a section about the APIs. So the interaction with the APIs and using the Swagger page will be useful to work with the API. All right, so move on. You will automate this test application. You will need a project template to work with it, where to get this project. So below this video, you will find resources section with the URL to the project template on the GitHub, and you will need to open. So this is the practice assignment project template at Bondar Academy, Cypress UI testing practice. First of all, you have to be logged in under your GitHub account. If you did not create GitHub account, you need to do so. Then you need to clone this template under your account on the GitHub. Click on this button, Use This Template, and then click on Create New Repository. After that, you need to provide the name for the repository. For example, Cypress Practice, something like this, but you can give it any name. Description, then you can choose either public or private, but I recommend keeping it public so it will be part of your public repository of showing your experience with the Cypress. So in Create a New Repository. After that, this template will be copied under your account, so you will have full control over this repository. Alright, it was created. Now you need to clone this project with repository on your computer. So go over here to the code and click on the Copy This URL. Then on your computer, you need to open terminal in any folder where you would like to keep your code. In my example, it will be a git repo folder and type git clone and put the URL to clone the application. That's it, repository was cloned. Now we need to open it in the Visual Studio Code. And here is the Visual Studio Code. I opened this project in the root folder, Cypress Practice, the folder that I created and cloned this project. Now we need to install the dependencies. Open the terminal session, new terminal and type npm install to install all Cypress dependencies. Our package.json currently have just two dependencies for the Cypress and for .env to manage environment variables. Alright, this step is done. The next step, we need to configure the environment variables with your credentials. Here is .env.sample showing how you should do this. So in the root of the project, create new file and call it .env. Then copy these details into .env file. And then you need to replace this username and password with the credentials that you created earlier when you was resetting the password for the pet clinic application and provide it over here. So I put my test credentials, git user at ponderacademy.com and the password. And also I want to note that saving credentials right here in .env is a secure place because this file is added into the git ignore. So .env file will never be committed to the GitHub repository and this file saved only locally on your computer. So after that, we need to test if we did everything correctly. So here under e2e, I set up the homework cy.js spec file with a sample test. The sample test has just two steps. Before each step to log into application, this is a function that will handle authorization flow to the pet clinic application with your username and password. And just a simple test that validate that header has a text, welcome to the pet clinic. Where this guy is located. So under support in the commands.js, this is this function that handles the authorization. Don't modify anything. It's already configured correctly to handle the authorization. So it's using CySession. So if you have a several tests in your spec file or you run entire test suite, it will log into the application just once on the first test and then reuse the authorized session for the rest of the test. So this is the optimization that is done. So now let's check that if everything is working. I need to run cypress new terminal npx cypress open. So it should open the runner, right? This is the runner and start this spec file. So it should log into the pet clinic application. Here we go. And open the homepage and validates that the title has a text, welcome to the pet clinic. So everything is configured correctly. Now when you've done all this, how would you perform the practice assignments? So for that, let's go back to Blender Academy. So going back over here in the first practice assignments input field in the module practice assignments. Here you have a short description of what you have to do. You need to clone this application. You need to create this spec file. Then you need to automate each test case in the spec file and the name of the test should match the name of the test case. Then submit your code for the code review. And here are the test cases for this assignment. Test case number one, number two, and number three. So you need to automate three test cases in the same spec file. So let's create this. So we need to create the new spec file. Going here under E2E, new file and creating a new file. And by the way, you need to create a new branch. So every time you start a new practice assignment, it's always should start with a new branch. So create new branch with the name input fields like this. So then for their convenience, I'll take this from the homework.cy.js, paste it here. And let's assume that this is the test number one, this is the test number two, and this is the test number three. So you follow them, test cases that are provided, and automate all the steps that are mentioned in these three test cases, one, two, and three on the PetClinic application, okay? So after you've done this, you need to commit your changes and push to the remote repository. Going over here, and for example, typing my commit message, completed input fields, something like this, click commit, and click on the push branch, okay? The branch is synchronized, going back to GitHub over here. And you can see this branch is available for the pull request creation. But before creating pull request, you need to add one more little modification to the project. So go to the settings, and you need to add a collaborators to this project. So add people and search for BA instructor. So this way, I will be able to provide the comments and actively collaborate on your pull request. Otherwise, this pull request will be only available to you, and I will not be to add anything. So add BA instructor, and then this is a pending invite, I need to accept it on my end. All right, invite was accepted, refresh, all right, so pending is gone, so going back to the code. Now you need to create a new pull request, click on the compare and pull request. And this is the message that was pulled from the latest commit, you can modify it. And here in the description, you can provide any useful information related to this commit. Maybe you have any questions to the instructor or anything else. For example, completed all three test cases, so something like this. You can put any useful information over here. And when you're ready, you click Create Pull Request, and that's it. So after you create this pull request, take this URL, Ctrl C, go back to the Bonder Academy, scroll all the way down and submit this URL over here, and click on the Submit button. That's it, so after you've done this, I will be notified that you completed your pull request, and I will review this pull request. When I review it, you will get a notification over email that your request is ready for the review. You can check the feedback over here, but the main feedback will be provided right here inside of the pull request. So line by line, I will review your code, provide my comments, suggestions, what should be done better, what can be improved, why, and so on. And in this pull request branch, we will actively collaborate with you on your code. So after your initial pull request, usually I request to make some modifications. So you make modifications in your code and push the changes of your code to the same pull request, and I review it one more time. And we repeat this cycle again and again until your pull request is ready to be merged. So then I click the Approve button, and when I click the Approve button and you see that your pull request is approved, then you click on this Merge pull request, and your pull request merged into the master branch. And then you start this cycle again and again. And then you go to the next practice assignment, create a new branch, create a new spec file, automate your test cases, submit for the pull request, and so on. And this is how we will iterate working on the GitHub, working on all the practice assignment in this practice assignment course. All right, guys, so if you have any questions, ask me in the Slack channel. Other than that, good luck with your first practice assignment.