Prepare for Your First Assignment | Bondar Academy
Course: Playwright UI 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. Here’s how to set it up: Accessing Pet Clinic 1. Navigate to petclinic.bonderacademy.com and log in. 2. If it's your first time, reset your password by clicking on the Forgot Password button and entering your email. 3. Follow the email instructions to set a new password. 4. Log in with your new credentials. Application Overview The Pet Clinic application includes: Owners Veterinarians Pet Types Specialties You can add, edit, and delete specialties and manage owners and their pets. The application also features an API and a Swagger page for testing endpoints. Setting Up Your Project To automate the application: Access the project template from the resources section below the video. Create a new GitHub repository using the template. Clone the repository to your local machine using: git clone <repository-url> Install dependencies with npm install . Create a .env file for your credentials. Practice Assignments For your first assignment, create a new branch and a spec file for input fields. Automate the test cases and push your changes. Then, create a pull request: Add the Bondar Academy Instructor as a collaborator. Submit the pull request URL on Bondar Academy. After submission, the instructor will review your work, providing feedback and suggestions. If you have questions, reach out via the Slack channel. Good luck with your first practice assignment!
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 it. So click on this repository, and this is a public template with a framework that is your starting point to work with this PetClinic application. So click on this, use this template. And by the way, you have to be logged in as a user in GitHub. If you don't have a GitHub account yet, you will need to create a GitHub account. So use this template and create a new repository. Click on this button. Then this repository, this template, will be copied under your account on the GitHub. And provide here a repository name, how do you want to name it. For example, Playwright Homework, like this, checking if this name is available. Keep this repository public. For example, later you can use this repository as part of your portfolio. For example, when you look for a job and recruiter will ask you, hey, do you have any references what you did with test automation? You can provide him this example that you did a Playwright automation. This is what your experience looks like. So keep this repository nice and clean. In future, it can be very helpful for searching the job on the job market. All right, so keep it public and create repository. And we need to wait a little bit while this repository will be cloned from the Bonder Academy under your account. All right, it's done. Now, under the GitUserBonderAcademy, we have this repository template copied to this user. Then you need to clone this project somewhere on your computer. Click on Code and copy this guy and we need to clone it somewhere. And then I open a new terminal session in the Git repo folder on my computer and type git clone and paste this URL and make a clone. And that's it, the application was cloned successfully. Now we can open it in Visual Studio Code. And this is the project open in VS Code. And the first thing that you need to do is to set up your account. So this application already configured to work with the PetClinic test. So you can see here in the PlayWriteConfig.ts, it's already configured as a base URL and some other properties right here. So first, let's install the dependencies terminal, new terminal. And then run npm install to install the dependencies for the project. Okay, everything is done. And now we need to configure credentials to run for the PetClinic. So this is the sample file .env.sample that you can use as a template. So under the root, create a new file that is called .env like this. Then you copy this sample inside of the env file. And then replace this username and password with your credentials from PetClinic. So that username and password that you reset at the beginning of this video. And I type git user at bonderacademy.com. This is my test user. And then use password. That's pretty much it. And the account that is saved over here, it's secure because .env file is added to gitignore right here. So when you modify your project and do something with your project and commit the changes to the repository, this .env file will not be pushed to the repository. So this file with your credentials will be saved only on your computer locally. So it's pretty safe. And what's next? So after you've done this, let's run the test and see if it is working. So right here, click on this sample test and see if it is working. Running the test. All right, it's running the browser. And everything looks working fine. You can see a green checkbox. The authentication process happening here in this .auth folder. So this user.json is the file that keeps the session for your current user. If sometimes when you run the test application, something doesn't work, for example, you cannot log in or something like this, you can safely remove this user.json file, delete it like this, move it to trash. And when you run the test one more time, it will be automatically generated again. So look at this. And this file was successfully generated again. So everything is working. Okay, so project is configured. Now let's talk about how would you perform the practice assignments. So inside of the course, you're looking into the first practice assignment, which is input field. And here's the list of the rest of the practice assignments. So here's a short description of what you need to do. Clone test project, create new spec file with this name. Then each test case should be within the single spec file. And then create GitHub pull request. The reference to the lesson, if you want to repeat the details about the input fields, and here are three test cases. Test case number one, number two, and number three. So you go to the test application. And first of all, you need to create a new branch. So master branch, create new branch, and name it input fields. Okay, after that, we need to create a new spec file. InputFields.spec.ts. And then you automate the test cases over here in this input field. So just for the convenience, let me just copy this test right here. And let's say that you have created three test cases. Test case number one, number two, and number three. Just assuming, right? So these are the test cases mentioned over here, one, two, three. You automated all three test cases, and they are part of the single spec file. So number two, and I call it number three. They are part of the same spec file. Then you need to create commit and push those changes to the remote repository. So I go right here, create a new commit, completed, practice, assignment. Something like this, commit and push. All right, changes were synchronized. Now we're going back to the GitHub, and we have the input fields branch is ready. So I'm going to click on compare and pull request. And this is the pull request. And by the way, I forgot to mention one important thing. So before you create the pull request on the repository setup, you need to go to settings. And as collaborators, add the Bondar Academy Instructor. You type BA Instructor, and here we go, Bondar Academy Instructor. So I will be able to make the review of your PR. Also, I will get notifications when you create a new PR on the GitHub. And I will be able to make the review. Then I accept this invitation, so refresh. Okay, the invitation is accepted. Now we're going back to the code, and we create a new pull request. So compare and pull request. This is the description, the title and description of the pull request. So you can provide any title. For example, assignment for the input fields, something like this. And here you can provide any description, details about your assignment. Maybe you have any questions, maybe you wanted to ask something, or some information that would be useful for me, for the instructor about your PR. And you create pull request, create the pull request like this. And that's it, your first PR is created. After that, you take this URL, Ctrl-C, going back to Bondar Academy, and you need to submit this URL over here. Submit your solution, paste your URL, and click Submit button. That's it. So after you've done this, I will receive notification about your URL submission. And I will review your PR. When your PR will be reviewed, you will be notified on the GitHub and over email that your PR is reviewed. And then you can go to the GitHub and review line by line over here in the PR, where we continue conversation about your PR. So I will provide comments on your implementation, the best practices, the suggestions, how it should be done differently, why it should be done differently, and so on. And from this interactive collaboration, you will learn a lot of new useful things. And after I approve your PR, you merge this PR into the master branch, and the cycle repeats again and again. And then you go to the next assignment, the next assignment, and so on. So you complete them one by one, creating pull requests for each individual submission. All right, so if you have any other questions, you can ask me in the Slack channel. Other than that, good luck with your first practice assignment.