Test Application Overview | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Introduction
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will create a test application overview to be used throughout the course for testing the API. Follow these steps: Accessing the Test Application Open your browser and navigate to conduit.bonderacademy.com . We will focus on the API rather than the UI of the application. Inspecting API Calls Right-click and select Inspect in your browser. Navigate to the Networking tab and apply the Fetch/XHR filter to view only API calls. Refresh the page to see the API calls made by the application. Click on the tags endpoint to view details of the API call. Check the Response tab to see the response object, which should match the displayed tags. Understanding API Functionality The application makes API calls, receives data, and displays it in a user-friendly format. Throughout the course, we will use the UI to understand the functional flow and the sequence of API calls, but the tests will focus on API requests. Creating a Test Account To fully engage with the application, create your own test account: Click on the Sign Up button. Use a random username (e.g., pwapi-user ) and email (e.g., [email protected] ). Choose a random password (e.g., welcome ). After signing up, you will have additional functionalities, such as creating articles, editing them, and performing various operations that will trigger API calls. Next Steps Prepare your test user for later use in the course. We will simulate different test scenarios by calling the API directly. See you in the next lesson!
Video Transcript
All right, guys, let's begin. And in this lesson, we will make a test application overview that we're gonna use throughout this course to test the API. So open your browser and navigate to conduit.bonderacademy.com. So this is the test application that we're gonna use. But we will not use the UI side of this part. We will use the API for this application because it has the backend API. So if you make a right click and click on the Inspect in the browser, then navigate here in the Networking tab, you will see the API calls that will be called when you do any operations on the website. And also click here on Fetch an XHR filter, so only API calls will be displayed over here in this panel. And then if we click a refresh right here, you can see that two calls were made by our application to the API. And to review those calls, for example, let's click on the tags right here. This is the details about the API call. So this is the tags endpoint, the get request, and the response was 200 status code. And if you want to see what was the response object came from this API, click on the Response tab, and this is the response object that is coming back right here. And also if you compare the tags right here with the tags in this object, those values are absolutely the same. So this is how the APIs work with the web application. So application make a call to the API, API returns the data, and then this data displayed on the website in more nice formatted way. So here we have a test, GitHub coding, and so on. You see exactly the same test, test, GitHub coding, and so on. So during the course, we will use this UI just to understand the functional flow from the user perspective, how the API should be called, in which sequence, and what functionality is actually happening in the application when you do certain API calls, and we use UI only for the reference. But the actual test will involve only API requests. So now, what you will need to do. If you don't have account for this application, there is nothing much you can do. You can only just review the articles on the homepage and review the articles individually, that's it, there is nothing you can do. So before beginning this course, you need to create your own test account that you will use throughout this course. Click on the Sign Up button and create any random user with any random email. For example, I will call mine pwapi-user and the email will be pwapi-user at test.com, okay? And any random password, for example, welcome, something like this. But make sure you create your own test user, because you want your test data to be separated from any other users that gonna use this test application. And create sign up, okay, new user created. And you can see this pwapi-user right here is displayed. Now, after you create an account, you have more functionality available for this application. For example, you can create a new article, test title, some text. And this is some description and some test tags. Test one, for example, and publish the article. Article is created, now we navigate to the homepage. And as you can see, this article is created right here. You can review this article, you can edit this article. You can, for example, put the likes for this article. You can add comments to this article, and so on. And when you perform all those operations, our application make API calls to the backend server with all those operations. For example, here, inspect network and look at this. We're pulling the article details. When I edit the article, we have other API calls. When I go back, we have another API call, and so on. So during this course, we will simulate different test scenarios for this test application, calling the API directly without using user interface for this application. All right, so that's pretty much all about this application. Go ahead and create your own test user and prepare this test user for later use in this course. All right, see you in the next lesson.