New Playwright Project Setup | Bondar Academy

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.