One of the most popular things done by developers is to debug the code using . console.log But today I want to show you how to debug your Playwright tests. Let's start with the Playwright Inspector. Using the option when you run the tests, Playwright opens two new windows in your display, a browser and the Playwright Inspector. --debug To try this, you can type in your terminal this command , the result seems like this npx playwright test --debug You can use the commands in the inspector to move forward in the test and check the stuff. Cool, but I prefer debugging the tests directly from my editor (VsCode). To do that, you have to install the official extension called . The extension permits you to install Playwright in your projects or add new browsers configuration, but today the goal is the debug feature. Playwright Test for VSCode Now, in VsCode if you open the Test Explorer, you can see all your tests in the projects and run them or debug them directly from your editor. Here is an example. Ok, now it's time to see how you can run or debug your test directly from VsCode. First of all, using the command in the top right of the Test Explorer panel, you can decide between running or debugging all the tests in your suite. Clicking on the arrow on the left of these buttons, you can also decide in which browser you want to run your tests. Here is a short demo! In this example, you can see how the runner works, but now it's time to see how it's possible to debug tests. Let's start adding a break-point in the code base. If you are not familiar with this in VsCode, it's elementary, click with the mouse on the left of the line where you want the debugger stops its execution. https://youtu.be/QIryVOtMXvM?embedable=true Now, it's time to debug the test. We will see two methods to debug the tests; the first runs all the tests, and the second runs only the necessary test. Debug all the tests Using the icon in the top-right of the test explorer, you can run all your tests in debug mode, and for each test with a break-point, VsCode can stop the execution and permits you to check the test's status. Here is a video example of that. https://youtu.be/F5L-qpg3UBA?embedable=true That is a good example, but typically, you want to debug one test per time. Debug only needed test To do that, the flow is very similar, you have to choose which test you want to debug and insert a break-point where you want the execution will stop. Then in Test Explorer, you have to search for your test; you can type the name of your test in the search bar, or you can scroll through the three and find it using the mouse. To run your test now, you must press the icon relative to the debug execution on the right of the test name. Doing that, VsCode will run your test and will stop the execution when the code arrives at the break-point. Here, you can check your application's status and the problems in your test. Using the command in the top-right of the VsCode's window, you can move on in the execution. https://youtu.be/68mH0VsjV4M?embedable=true As you can see, if you are playing with the Test Explorer, you can run or debug all the tests or a specific one. The same approach exists for groups of tests too, so you can run or debug a bunch of tests in the same . describe Ok, I spent an entire article showing you how you can run or debug tests using VsCode because many times I see people that don't know how to debug, and they spend a lot of time finding the problem and fixing the test. Now you have all the tools to debug your tests with Playwright, so you can check and fix tests quickly. That's it for today; you have learnt how to run and debug tests with Playwright; before using the Playwright inspector and then directly from VsCode.I hope you enjoy this content, and if you have any questions, don't hesitate to reach out to me. See you soon, folk Bye bye Also published . here

The code in this story is for educational purposes. The readers are solely responsible for whatever they build with it.

Using Playwright Test for VSCode to Debug Your Code

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

An Essential Guide to Fixtures in Playwright

The Noonification: Neuralink: Elon Pledges to Get a Brain Implant (12/14/2022)

A Deep Insight on Memory Debugging

A Look into Remote Debugging and Developer Observability

An Introduction to 140 Second Ducklings: What is Debugging?

Breakpoints: What They Are and Why They're So Powerful

An Essential Guide to Fixtures in Playwright

The Noonification: Neuralink: Elon Pledges to Get a Brain Implant (12/14/2022)

A Deep Insight on Memory Debugging

A Look into Remote Debugging and Developer Observability

An Introduction to 140 Second Ducklings: What is Debugging?

Breakpoints: What They Are and Why They're So Powerful

Light-Mode

Classic

Newspaper

Minty

Dark-Mode

Neon Noir

Minty

HN StartUps