New Playwright Project Setup | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Interacting with APIs
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will explore the capabilities of the Playwright API using a test application. We will also set up a new Playwright framework for this application. Application Overview Navigate to the test application at conduit.bonderacademy.com . This application allows users to: View articles Publish articles Delete articles It features a backend API that we will utilize throughout this lesson. Using Chrome DevTools Open the Networking tab in Chrome DevTools and filter responses by XHR and Fetch to see API calls. Refresh the page to observe the API requests being made. For example, clicking on the tags endpoint ( conduit-api.bonderacademy.com/api/tags ) shows a GET request with a status of 200 . The response contains a list of tags in JSON format. Creating and Managing Articles To create an account, click on Sign Up and fill in the required details. After signing up, you can create articles by providing a title, description, and body. When you publish an article, a POST request is sent to the articles endpoint, and the response confirms the article creation. To delete an article, a DELETE request is made to the respective API endpoint. Setting Up the Playwright Framework Create a new folder named pw-api-test-app and initialize the Playwright framework using the command: npm init playwright@latest Select TypeScript as the language and proceed with the default options. Clean up unnecessary files and create a test file named working with api.spec.ts . Running Tests Set up a beforeEach hook to navigate to the application URL before each test. Create a test to validate that the text "conduit" is displayed on the homepage. Run the test to ensure it passes successfully. Additional Tools Download the Postman application from postman.com to interact with the API easily. This tool allows you to send requests and view responses conveniently. For this class, use the following URLs: Application: conduit.bonderacademy.com API: conduit-api.bonderacademy.com If you have any questions, feel free to ask for assistance.
Video Transcript
In this section, we will use a new test application in order to demonstrate all the Playwright API capabilities. And also, we will set up a new Playwright framework for this test new application. So let's get started. So open your browser and navigate to the URL conduit.bonderacademy.com. This is the test application that we're going to use. It's a pretty simple one. You can view the articles, you can publish the articles, delete the articles. But what is important for us is that this application has a backend API and backend server. And we will use those APIs. So let me show you a little bit around. So click on the Networking tab in the Chrome DevTools. Here, filter your responses by XHR and Fetch to see only API calls in the Networking tab. And then click Refresh. When I click on Refresh, you can see that browser makes the API calls. So for example, let's click on the tags endpoint. So browser performs a call to this API endpoint, which is conduit-api.bonderacademy.com.api.tags. It was a GET request. The status was 200. And if we click on the Response tab right here, we can see the response object coming back as the list of the tags right here. And if you look at the right on the application, you can see that exactly the same tags displayed in this section on the right. So this is how client-server application works. Browser makes a request to the backend server. API provides the response in the form of the JSON object. And then browser transforms this information into the view in the browser. And in this section, we will actively work on this Networking tab, intercepting API calls, mimicking API calls, and so on. And the same for articles. If I click on the articles endpoint, this is the endpoint that browser is performed, this one. And this is the response object with the list of all the articles that you can also see on this page. They are absolutely the same. What you also need to do is also need to create a new account. So click here on Sign Up and create your own random account that you will use for this class. For example, I use pwtest99, something like this. pwtest99 at test.com and some password. Welcome 1, 2, 3 and sign up. A new account is created. And right now you can create a new articles. For example, create the articles. This is a title. This is a description. This is a test body. Something like this. Right click, inspect. Let me show you what happens next. So when I click publish the article, our application again makes API call. In this example, it's post request to this articles endpoint. The payload is this object that was sent to the backend server. And the response is that article is created right here. We can see in the browser that article is created as well. Browser also make a call to get this particular article details. And also a call to comments endpoint to get the list of the comments. But since this is a new article, no comments is posted yet. Response also empty. This is just an empty object. Then you can navigate back to the homepage and you can see this article is created on the homepage. Now we can also delete this article. For example, click delete. And we can see in the networking tab that application perform a delete call to this API endpoint. So all those operations we will practice in this section working with the APIs. And let's set up a new test framework to work with this particular application. So I have created a new folder on my computer and I called it pw-api-test-app. And let's create a playwright framework inside of this folder. So I click on the terminal, open new terminal and execute command npm init playwright at latest. And hit enter. So I select the TypeScript as my language and the rest is select just by default. Here we go. Installation successfully completed. Let's look over here and let's make a quick cleanup. So we don't need this test examples folder. So I can simply delete this. Move to trash. So examples.spec.ts. Let's clean this up as well. We don't need this test. Let's rename this spec file in something more meaningful. And let's say I will call it working with api.spec.ts. And since we open a test application homepage for every test, let me create it before each hook right away. So I type test before each. Async. And await page go to. And provide the application URL. Which is ConduitBoundaryAcademy.com. Here we go. And let's create a first test. So for example, we will navigate to the homepage of the application. And let's say we want to validate that this conduit is written over here. So right click, inspect. And we want to validate the text conduit is displayed. So I can take this navbar brand class, use it as my locator to validate this text. Let's do this. So I will use this assertion. Page.locator. We'll use my class navband to have not title, to have text. And the text I'm expecting over here is conduit. All right, that's it. Let's quickly run this test. So refresh runner. Okay, now run button is available. Quickly run this test. Browser is opened and we can see the green check mark, test pass successfully. So the new test framework is successfully set up to move into this section. And one more thing, I would like to ask you to download also this Postman application. So go to postman.com and download this application. There are different download options for Windows, for Mac. You can download the binary for Intel chip or Apple chip. So this application is very convenient to interact with the API. So you can just put your API endpoint in this field, click send and see response body over here. We will use this application several times just to verify our API calls. And also one more thing later in the class, you may see a different API URLs and application URLs that I use during the class. So that initially when I was recording the lectures, I was using publicly hosted application, which is ungeral realworld.io. And it has two different APIs, either conduit production ready or API realworld.io. Unfortunately, sometimes these applications are not stable. API doesn't work or UI doesn't work correctly. So I decided to host this application by myself to better control test environment and make sure that you are not interrupted in your learning process 24 seven. So the new URLs that you need to use for this class, use this one. For the application is conduit.bonderacademy.com. And for the API is conduit-api.bonderacademy.com. If you have any confusions or any questions, please let me know. Ask me questions. I'm always ready to help. All right. That's it, guys. And see you in the next lesson.