Trace and Debugging Tests | Bondar Academy
Course: Playwright UI Testing with TypeScript
Module: Getting Started with Playwright
Instructor: Artem Bondar
Lesson Summary
In this lesson, we will learn how to analyze and debug code in Playwright . When tests fail, it’s essential to understand the underlying issues, and Playwright offers three effective debugging options: Debugging Options Trace Playwright Debugger (Inspector) Visual Studio Code Debugger 1. Using Trace To run tests with tracing, use the command: npx playwright test --trace on This generates a report with a Traces section, allowing you to view the steps performed during the test. By default, tracing is configured to be on for the first retry of a failed test. To enable tracing for all tests, modify the configuration: trace: 'on' 2. Using Playwright Inspector Run the test with the following command to open the inspector: npx playwright test --debug This opens two windows: the Playwright Inspector and the browser. You can run tests step by step, allowing you to observe the actions taken by Playwright in real-time. 3. Using Visual Studio Code Debugger Set a breakpoint in your code and run the test in debug mode. This can be done by clicking the debug button in the test explorer. The debugger will pause at the breakpoint, enabling you to inspect variable values and step through the code execution: debug test This method is particularly useful for complex logic, as it provides insights into variable states during execution. In summary, these three techniques—using Trace, the Playwright Inspector, and the Visual Studio Code Debugger—are essential for effectively debugging your Playwright tests.
Video Transcript
In this lesson, we will learn how to analyze and debug code in the Playwright. So, sometimes your test may failing and in order to understand what exactly going on, you need to debug your code. So, the Playwright has three different options how you can do it. Using Trace, you can use a built-in debugger into Visual Studio Code or you can use a Playwright Inspector. Whatever works best for you, you can use any of those tools. So, in this lesson, I will show you how to do that. In previous lesson, we already talked about UI view that provides you a very nice view of all the steps and you can look at the actions that performed by the Playwright to understand what the framework is doing. And in this lesson, I will show you a few more examples how you can analyze the code execution. So, if you use a command line, one of the way also to analyze your code and debug your test is to use a Trace mode. So, to run your test using the Trace, through the command line, you can use npx playwright test, then let's run this project Chromium. And to enable the Trace, we need to type Trace on and click Run. So, two tests are executed and let's open the report. So, this looks like a normal report that we saw before. But if we open the report, you can see there is a new Traces section. If we click on the Traces, this looks like very much like we saw in the Playwright UI runner. So, we have all the steps that were performed. If we click on the step, you can see the stage of each of the step before and after an action step. So, if you run your test in the command line or if you run it in continuous integration server, having this Trace on is very useful to analyze the test. If some of them failed, you can look into the test result. And by default in Playwright configuration, Trace is configured to on first retry. So, what it means that if the test failed for the first time, on the first retry, when Playwright tried to rerun failed test, it will automatically generate a Trace and attach to your report. If you want to change it to always on, it means to always create a Trace for each every test, even those that are successful execution, you can replace in the configuration Trace to on and it will generate Trace for you every time. Okay, moving on. The second way how you can debug your test is to use actual Playwright debugger or Playwright inspector. How to do that? So, we run our command npx playwright test, but instead of Trace on, we use a flag dash dash debug and open. So, Playwright will open for you two windows. One is Playwright inspector and second is browser, which is right now is empty. And then you can run the test that you want to debug. If you click on this little icon, it will just simply run the test as is. If you click on this step over button, it will run your test step by step. So, let's say we know that first step works just fine. So, we just want to run it and execute successfully. I click on this button and test and execute it. Now, it's running debugger for the second test. Sorry, it's open on my second monitor. That's why I have to move it to the first screen. So, now let's say we want to debug step by step and now we are moving forward with step over button. I click on this button and now we add line number 14 and we see that we attempt to click on the get started page. And here in the debugger console, we can see what the Playwright is doing. It's giving us all the details of what exactly is going on. Waiting for the get by role locator, locator result for this element, attempting click action, waiting for element to be visible, element is visible, enable and stable, scrolling into view, done scrolling. And it is ready to make a click. We make another step and it's performed the click, navigated to the next step to make the assertion. And if we look into the previous one, we expand. We can see that it's continued actually to logging all what it did, performing click action. Click action is done, waiting for schedule navigation to finish. Navigation have been finished. And by doing this step by step execution of your test, you can see live in the browser what exactly your script is doing. And it's very helpful to understand what is missing and why sometimes it does not work. All right. And the last approach, which I think I prefer the most, is to use built in debugger that we have in the test explorer. So if we open the test and let's say we want to run, let's say test number two, and we want to debug test number two. So you put a breakpoint at the line of code where we want to stop. And let's say we want to stop at line number 14. I click the breakpoint. We see the dot shows up next to the line number 14. And then in the test explorer, I run this second button, debug test and click on it. So Playwright will run browser in the debug mode. You see Visual Studio Code change the look and feel. It's highlighted number of line of code where the code is stopped. We have a stock call with many different details about what is going on. And the browser is also opened as independent screen. Unfortunately, I cannot show you two screens at the same time, but it is happening in the background. And the approach is pretty much the same. So you have buttons to continue the test or to step over or to stop the test or restart and do it again if something didn't work. So the approach is the same. You click on step over. It's moving to the next step and test is done. So debugging is completed. And while you are debugging through the Visual Studio Code, very often by hovering over the certain variables, you can see what values are those variables are holding. So if you have more complex code than this one to debug with more complex logic than some data handling, it can be very useful to use this particular method as it is showing you live in the code, step by step, what data you are using, which values your variables are holding and helps you to understand better your code. So that's it. There are three techniques. Keep them in mind and see you in the next lesson.