Reporting Improvement | Bondar Academy
Course: Playwright API Testing with TypeScript
Module: Building a Framework
Instructor: Artem Bondar
Lesson Summary
This lesson focuses on enhancing the HTML reporter by reducing redundant steps displayed in the report. The goal is to streamline the output for better readability. Key Improvements Identified unnecessary repetition of API response details in the report. Modified the request handler to improve reporting. Steps to Enhance the Reporter Run the test to observe the current report structure. Import the test function from the Playwright library: import { test } from 'playwright-test'; Add a test step for each request type (GET, POST, PUT, DELETE). Define the step name and URL to be displayed in the reporter: test.step('GET request to ', async () => { ... }); Create a variable for response JSON to manage response data effectively. Repeat the process for all request methods to ensure consistency. Results After implementing these changes, the report becomes cleaner, displaying only the essential information: Clear indication of request types (e.g., POST, GET, PUT). Visible URLs associated with each request. Streamlined assertions for easier reading. This enhancement leads to a more efficient and user-friendly reporting experience. See you in the next lesson!
Video Transcript
All right, guys, quick lesson, final tweaks at the end of this module. We will improve the HTML reporter a little bit to reduce the number of steps that are printed over there. So let me run the test and let me show what I mean. So I run the test, and test executed, open HTML reporter, open report details, and look at the report. So here is the every API request. This is a POST request, GET request, DELETE request. And every single time we have this redundant step of the API response, API response JSON, API response JSON. So this is a step inside of the request handler that's pulling the response details from the JSON object. We don't need this, right? So it's just created unneeded noise. All we need to know is the steps and assertions, steps and assertions. And we can improve this reporting pretty easily by modifying the code a little bit. So let's jump into this. So going back to the request handler over here, and the GET request, we need to add a step over here called test step. And for this to work, I need to import test from the Playwright library. Import test from Playwright test. Like this. So going down, and now test step becomes available. And then I provide the name of the step. So this is a GET request. And I type GET request to, and for example, we'll provide a URL that will be displayed in the reporter. This URL, like this. And then just create the function like that. So and inside of the step, I can put all these details over here. So this should be a wait, and the function should be a sync, like this. Then I just copy the whole thing, Command X, and paste it over here. So we have a little thing that we need to fix. You see response JSON becomes invisible right now outside of the test step. So we can quickly fix this by just creating a new variable that I call response JSON of type any, we don't care about the type. And this, I will assign the result of response JSON to this variable. And then we will return this variable from the method. So that's it, and let's modify it the same way. Add in test steps to the remaining of the methods. Over here, like this. I'm copying it and paste it over here. Then the response JSON, let response JSON any. And response JSON assigning to this variable, and this is a POST request. The next one is PUT request, the same way. So copying this line, pasting it here. Command X, Command V. Let response JSON any. This one, this is a PUT request. And the last thing is a DELETE. DELETE, like this. And DELETE does not have a response object, so we just copy and paste. And that's pretty much it, guys. So now let's double check the changes that we made in the reporter. So I run the same test one more time. Okay, test passed, open the report, open in default browser. And here we go, the test cleaned up. So now it's more visually easy to read. So POST request two, GET request two, PUT request two. And so we see the URL, we see the method types pretty clearly in the reporter. And we also have just request assertions, request assertions, and so on. So that way, we made the reporter looks cleaner and easier to read. All right, that's it, guys, and see you in the next lesson.