The Secret Ingredient: Playwright for Better Web Testing

By Tijana Nikolić Žugić

February 13th, 2025 | 8 min read

In real life, the process of making software is like dough; it is a living thing, and it needs to adjust to the circumstances to modify its needs, and its procedure is not as ideal as it seems in the beginning.

Left Out of the Recipe

We have all been there, working on a project from scratch, having great goals, endless project planning sessions, and a huge pyramid on the big screen showing the main goal, which is our beautiful project. Happy customers, happy clients, and happy team members, right? Sounds like a plan.

In real life, the process of making software is like dough; it is a living thing, and it needs to adjust to the circumstances to modify its needs, and its procedure is not as ideal as it seems in the beginning. We tend to lose track along the way because of different circumstances, and automated testing is primarily out of our beautiful pyramid of the product. We start, and most of the time, we have a nice login page in some popular framework. Along the way, we realize it is too time-consuming to complete regression or end-to-end testing due to a lack of resources, people, or knowledge. How can it be otherwise? How can we still “have it all”?

Your New Best Friend in Automated Testing

It can be possible when you have an easy-to-implement and open-source testing framework. Playwright is a new web testing framework, and it can help testers make the complete circle around the product quality firmer and more possible.
Let’s make it like this: you, as a project manager, don’t have much time or money to hire new employees just for automation, your project is too complex, and it would be too expensive and time-consuming to automate the whole manual regression test. But what about smoke testing that would cover the basic flow and save you some time and nerves with all those last-minute bugs on production that no one saw?

Key Advantages for Testers and Teams

If we think about modern testing goals, building fast feedback loops, making test development fast and less flaky, and choosing testing tools that will complement the dev workflows. In that case, we need to tell you about Playwright!

It is an open-source project created by Microsoft; it manipulates browsers via debug protocols. Works with Chromium/Chrome/Edge, Firefox, and WebKit. In Playwright, we have a test generator, UI mode, automatic waiting, and a lot more cool features that will make your life as a tester easier. Also, one fancy and new feature when we compare it to, for example, Cypress, is that in Playwright, we can test UI and API together. Playwright provides bindings for JavaScript/TypeScript, Python, Java, and C#.

One Framework to Rule Them All

One of the most exciting things about using Playwright as your chosen test tool is that it uses browser projects and not entire browser apps, meaning that you will test in Chromium instead of Google Chrome. Those projects are smaller and do not use the same number of resources as full browsers. The most convenient part is that it manages those browsers by itself, so you don’t need to install any extra stuff. Simply type npm init playwright@latest in your terminal, and you are ready.

How Playwright Handles Browsers

Also, Playwright launches only one browser instance for the whole suite of tests. It also creates a unique browser context, which is something like an incognito session: it has its storage, and that context is straightforward to create and handle. All those browser contexts can have one or more pages. You can go through those pages and do your tests without ever needing to open a new browser for the second one.

Auto Waiting – The End of Endless Sleep Commands

Sometimes, the most annoying thing about writing automated tests is countless sleep statements all over the place you need to put so your test will be stable, but to avoid unnecessary waiting in Playwright you have auto waiting already in there. So, instead of thinking whether and when the button is clickable or not Playwright makes it easy just by adding await.click("") command to your method. In this case, Playwright waits for the element to be visible, stable (not moving), and able to receive events (not hidden) and, in the end, fully enabled for you to make your move. This makes testers’ lives so much easier.
Auto waiting is built into all the Playwright methods, so that does slow down your tests at all. It will be easier to write and faster to run.

Debugging Made Easy

One of the coolest things you can find interesting when using this framework is its tools for creating debug and analysis tests. For example, you can record your scripts using Codegen. It is easy to install, and you can check all of those tricky locators with a straightforward installation npx playwright codegen playwright.dev. Also, you can add your credentials and start it with just a click when you need more of this useful testing helper.

Trace Mode – Investigating Failed Tests

One more thing you need when you encounter issues with the tests is the debug tool. You can have an inspector simultaneously while debugging and be quick and effective with all those tests that just won’t pass. You can enable debug mode by calling test-debug or defining the environment variable PWDEBUG=1.

npx playwright test --debug
PWDEBUG=1 npm run test

Doing so gives you an opened browser and inspector that walks you through your test script. It highlights the elements, making seeing where you are getting with each step more convenient.
In Playwright, we also have trace mode that is very useful for all those failed tests you can’t figure out. You can use trace mode to access all the screenshots made in real-time of the steps that made a problem, and you can keep the website state at active mode.

Why Playwright Deserves Your Attention?

In conclusion, we can say that Playwright is an excellent modern tool that needs more of your attention if you are into automated testing and looking for a great all-purpose tool that can make your tests easy to make and, much more importantly, maintain.
So, if you want to make your test more complex than the login form and then leave it in some forgotten database, do your npm init playwright@latest and try it out; you can thank me later! 🙂

Sources:

Tijana Nikolić Žugić

When not discovering bugs, she is discovering vintage goods at the flea markets. Music is her life, but when everything is rainy and dark, then she's most inspired to be - colorful and bright!