Prepare for Your First Assignment | Bondar Academy
Course: Playwright API Practice Assignments
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
Welcome to the Playwright API Testing Practice Exercises . This video outlines how to set up your environment for the practice assignments using a test application. Setting Up the Test Application Navigate to petclinic.bonderacademy.com in your browser. Reset the password by clicking on the Forgot Password link and entering your Bonder Academy email. Follow the email instructions to set a new password and log in. Exploring the Application The application includes various tabs such as Specialties , Pet Types , and Veterinarians . You can: Edit and assign specialties to veterinarians. Create and manage pet visits. API requests are sent to the backend server, which can be monitored in the Networking tab of your browser. Using the Swagger Page Access the Swagger page at petclinic-api.bonderacademy.com/petclinic/swagger-ui/index.html to view all available endpoints. Remember to authorize by: Copying the Authorization Token from the application. Pasting it into the Swagger authorization field. Cloning the Project Template Clone the project template for practice assignments from the provided repository URL. Ensure you: Create a new repository on GitHub. Add Bonder Academy Instructor as a collaborator. Configuring Your Environment After cloning, install dependencies with: npm install Create a .env file for your credentials, ensuring it is secure and not committed to GitHub. Submitting Assignments For each assignment: Create a new branch and a spec file. Automate the required test cases. Create a pull request and add the instructor as a reviewer. Submit the pull request URL in the assignment portal for review. If you encounter issues, reach out via Slack for assistance. Good luck with your practice assignments!
Video Transcript
Hello, guys. Welcome to Playwright API testing practice exercises. In this video, I will show you how to set everything up on your site to be able to work with a new test application and submit your practice exercises for the code reviews. Let's jump into it. First of all, let me introduce you to the test application that you will use. Open your browser and navigate to petclinic.bonderacademy.com and hit Enter. When you open for the first time, it is a password protected application and you will need to reset the password for this app. Click on Forgot Password link and enter the e-mail address that is associated with your account at Bonder Academy. For this demo, I will use this account, getuseratbonderacademy.com, just for the demonstration. For you, you use your Bonder Academy e-mail and click Continue. After that, you will receive a reset e-mail instructions to your e-mail, so check that link. I opened the link from e-mail and need to set the new password. Password and then repeat and reset password. Password was reset and then back to petclinic, and now I need just to log in with this new account. Click Continue. Run. How about now? Yeah, now it is correct. Sometimes you may see this spinner loading a little bit longer than usual. So when application is not used by anyone, it takes a little bit more time to spin up the container for the API and then application able to serve the traffic. So it's up to 10, maybe 15 seconds. So application is ready and this is our pet clinic. Let me walk you through the applications real quick. So we have different tabs over here, for example, specialties or pet types, and we have also veterinarians. You can edit veterinarian, you can assign different specialties. So you can also create specialty, you can delete the specialty. For example, if I create some random specialty over here, then I can go to veterinarian and assign this newly created specialty right here and save it. Also, we have owners and we have the owners list. Every owner have pets and for the pets, you can create, for example, new visits like this and you can create visits, delete visits, and so on. When you do all this, application sends the API request. So if I navigate to the networking tab right here. So look, when I click refresh, the application is sending APIs to the backend server. For example, this is owner's endpoint. Or if I go to the specialties, it opens the specialties endpoint right here. This is what you're going to do in this practice exercises. So you will interact with this application through the API. You will test all different APIs for this PetClinic app and also simulate the API end-to-end workflows as well. So that's why you will need this UI just for the reference to understand the functional dependency between different functionalities. So what's next? This application also have a Swagger page. So right here, it's located on petclinic-api.bonderacademy.com slash petclinic slash swagger-ui slash index.html. Yeah, I know, a little bit long URL, but you just look at the screen and copy this URL. And this Swagger page has all endpoints available for this application. They are grouped into different groups, for example, pet types, vets, owners, pets, and so on. And you can use this Swagger page the same way how would you use Postman to send the API request and see what is in the response. But before using this, you need to authorize it. Because look, for example, if I try to get the pet types, I click on pet types and click try it out, and then send execute. I have the error unauthorized. Full authentication is required to access this resource. Because we need to provide authorization where to get it. So go back to the application, and here open any API call. And then scroll a little bit down and find the authorization header. So this is the guy, authorization header. And take the token value, the only token, Ctrl-C. Go back to the Swagger, Authorize, click Ctrl-V, and click Authorize. And click Close, that's it. Now Swagger page has saved authorization token, and now you can send the API request directly from the Swagger page. So if I send execute one more time, look, 200 response, and we have all pet types available over here. So everything is working. And now you need to clone the project template for the practice assignments. And the URL to the repository, you can find in the resources section just below this video. And you need to copy this template under your GitHub account. So you should already have GitHub account so far. If you don't have it, so create a GitHub account. And if you don't know how to use GitHub or use Git overall, there is a mini course, Git and GitHub Fundamentals. So complete this course before going to the practice assignments, because you need to know how to use Git. And so go here to use this template and click on Create New Repository. So when you do this, GitHub will offer you to copy this repository under your account, so this is what we need to do. So I will copy it under Git User Bundler Academy, and just provide any friendly name. For example, Playwrights API Practice. Something like this. So the name is available. You can also keep this repository public. It will be part of your public portfolio, and click on Create Repository. So after that, you need to wait a little bit until this repository will be copied for your account. That's it. You see that Playwright API Practice generated from this template. And one more thing you need to add here is to add Bundler Academy Instructor as a collaborator. So click on the Settings cog over here. Click on Collaborators, then scroll a little bit down and click on Add People. Here, search for BA-Instructor. Here we go, so Bundler Academy Instructor. That's the account you are looking for. So click on Add BA Instructor, and Add BA Instructor. After you do this, I will receive the invitation. And when I approve this invitation, you will be able to add me as a reviewer to this repository to the pull request that you will create. So let me quickly approve this. All right, I approved invitation, hit Refresh, and now you don't see this, that invite is pending. So it is done, so going back. All right, the repository is all set. Now we need just to clone this repository to the computer. I hit the Clone, copy this URL, copy this URL, and then open terminal in the folder where I want to clone it. So for this demo, I created a folder git repo, and I opened a new terminal session in the root of this folder. So if you're on Windows, you can open a command prompt in this folder or maybe git bash as well. On Mac, just open terminal in this folder and type git clone. Then enter the URL for the repository and clone this project. That's it, project was cloned. Now we can open this project in Visual Studio Code. Okay, the project template is open, and this is well familiar for you API testing framework that we built in this course. So this is a request handler, schema validation, logger, fixtures, and so on. Under the helpers, we have a createToken.ts that will automatically will create access token every time you run the test. So we need to configure it real quick. First of all, let's install dependencies. I'll open new terminal session and run npm install to install the dependencies. And that's it, first step is done. The second step, you need to configure environment variables with your credentials. So here in the root, you have a file .env sample like this. You need to create a new file with just .env. So create a new file and name it just .env, like this. And copy this sample into the .env file. And then, instead of these just placeholders, replace with your real credentials from Bonder Academy for the PetClinic application. So remember, at the very beginning, we reset the password to the PetClinic. So this is where you have put it, the email and password. So I put the getUserAtBonderAcademy.com, and I put my password. All right, so closing this, closing this as well. And just quick note that saving the credentials into this .env is safe and secure, because this file is added to gitignore over here. So this file will not be committed to the GitHub repository. So your credentials will not be exposed. This file's saved only locally on your computer. And the last thing, we need just to validate if it's actually working. So go into the tests, and I have created just a demo test, just to try if it is working. Just run it, and if you did everything right, this test should pass. So I'm running the test, and test passed successfully. So what it's doing, we are calling the owner's endpoint, just request 200, and we will validate first name is George, last name is Franklin. So everything is set. So now let's talk about the actual assignment. Here in the practice assignments module, you have several assignments that you need to automate. So let's check at the first one, getEndpoints. The short description, you need to clone this practice project. Then you need to create the first spec file with this name. Then you need to group all your tests based on the describe. So you need to create two test suites with the describe block. For the test case one and test case two, you need to create two describe blocks. And after that, you will need to create a pull request on the GitHub and submit for the code review. All right, so let me show you how to do this in Visual Studio Code. You need to create a new branch. So click on Master, and let's call it getRequests, something like this. Okay, new branch is created. Now let's create a new spec file, getRequests.spec.ts, that's it. And now let's assume I will just Ctrl C, Ctrl V this. And now let's say I will create this test describe block. So it will be a test suite one. And then inside of this test suite, I will put a couple of tests. Test number one, and then let's say test number two. Test one, test two. Something like this, okay? So let's assume that this is the practice assignment that you have to be done, according to the requirements. Then you need to send this code for their review. How would you do this? So you create a commit, for example, first commit for getRequests, something like this. You make a commit, and then you make a push to your GitHub repository. All right, then you're going back to GitHub right here. And look, now you have a new pull request suggestion with a new branch. You click on Compare and Pull Request right here. And then you create a new pull request. So the title already from your commit, and then you can provide some description over there about what work did you do. And maybe if you have any question to the instructor. So for example, description completed first practice assignment. Something like this, and then what is important? You need to add here reviewer as a Bonder Academy instructor. Right here, select a reviewer, and then click button Create Pull Request. And after that, you need to take the URL for the pull request from the browser and submit it right here in the assignment. So paste it over here and click Submit. All right, that's it. So after the pull request will be reviewed, I will provide the detailed feedback over here on the conversation tab on the GitHub. So I will provide my suggestions about the implementation, best practices, what can be done better, and stuff like this. And after I approve your PR, you just merge this PR into the master branch and then go to the next practice assignment, creating new branch, creating a new spec file, and so on. The cycle repeats again and again. For every practice assignment, you will need to create a new branch. You will need to create a new spec files. You need to automate the test cases and scenarios mentioned in the assignment. Then you need to create a pull request, add instructor as a reviewer to this pull request. Submit the pull request for the review, and also submit the URL in the player additionally. So I will be notified that you submitted the review. And we will repeat this cycle again and again for every practice assignment. So if something's still not clear, maybe if you're stuck with something, something doesn't work, send me a message in the Slack. I will be able to help you figure this out, any technical issues. All right, guys, I hope you are excited. And let's go to the first practice assignments. Good luck.