I Found an Easy Way to Spot UI Bugs That Appear After Bug Fixes—Here’s How

How a Minor Fix Led to Major Unseen Bug

Sometimes, what seems like a tiny fix can lead to a cascade of unexpected issues.

You make one small adjustment, thinking it’s straightforward, only to discover it’s caused problems in other areas.
I recently faced this while working on a dropdown—it seemed simple at first, but it ended up causing issues with the selector color not being visible and problems with key navigation.
This was not the first time, but I decided this should be the last time and started thinking about a solution.

The Power of Automated Testing

The only solution for this problem is testing. We all know testing can be done manually or automated.
Manual testing often makes things harder in such cases. The main thing is you cannot keep doing the same manual testing over again and again, you cannot test all the features manually every time a deployment is made.

It’s easy to miss small issues or fail to notice how one change in code affects another.
As projects grow, manual testing becomes even more difficult and slow.

This is what happened in our case. The issue occurred because testing wasn’t done after a fix was pushed. With a small team and limited resources, manual testing just wasn’t practical. That’s when we turned to automated testing

It saves time by running tests quickly and consistently across different browsers and devices.

Unlike manual testing, it doesn’t miss small issues and can handle repetitive tasks without getting tiring or inconsistent.
With automated testing, you can focus on fixing problems instead of spending hours trying to find them, making the whole process faster and more reliable.
One tool that can help make automated testing easier is Playwright—let’s dive in and see how it can simplify your testing workflow.

Let's Get Playwright Up

Playwright is a powerful tool for automating web browsers. It allows you to run tests in browsers like Chrome, Firefox, and Safari.

You can use it to test websites, scrape data, or automate repetitive tasks.
It's compatible with Windows, macOS, and Linux, and Playwright supports multiple languages, including JavaScript, TypeScript, C#, and Java.
Mainly, it provides us with a smooth test generator, saving a lot of time in writing tests.

Playwright comes with beginner-friendly documentation to help you get started quickly.

The official "Getting Started" guide provides step-by-step instructions for installation and basic setup, You can find it here Playwright Documentation - Intro.

It also keeps tests isolated, so each one runs on its own without messing with the others, making everything more reliable and easier to maintain.

Interaction

We don't have to worry about adding delays or waiting for elements, Playwright does it all. It automatically waits until elements are ready to interact, like clicking or typing, and keeps checking until they appear or time out.

Tests usually begin with navigation, using page.goto to load a URL, and then you're all set to interact with the page.

Playwright’s Locator API helps you find elements easily. Even if the page structure changes, you can find the element using this feature.
You can use handy methods like page.getByRole(), page.getByText(), or page.getByTestId() to locate elements based on roles, text, or attributes. It’s all about making testing more reliable.

Assertions

Assertions in Playwright are a key part of making sure your app works as expected. Using the expect() function, you can check if an element exists, has the right text, or contains specific data.

It's a simple but powerful way to confirm that your app behaves as expected. Think of it as double-checking your app’s work to keep things running smoothly.

Test Isolation

In Playwright each test runs in its own clean and independent environment. Even if you’re running multiple tests in the same browser, Playwright gives each one a fresh browser profile.
This means every test is isolated from the others, preventing any interference and ensuring that your tests are always reliable and consistent.
It’s like having a new, fresh browser for every test, so you can be sure your results are accurate every time.

Test Creation with Codegen

Codegen simplifies the whole test creation process and saves time and effort by generating test scripts based on interactions with the web page.

With Playwright Codegen, you can interact with a website by clicking buttons, filling out forms, navigating pages and it records these actions in real-time and generates code snippets that replicate your actions.

It can produce test code in multiple programming languages like JavaScript, TypeScript, Python, and Java. It allows us to customize the generated code by adding assertions, loops, and other logic.

Running codegen

By running the command:

npx playwright codegen <URL>

will open a browser window where you can start interacting with the page.
As you perform actions like clicking, typing, or navigating, Playwright will automatically generate the corresponding code.
The generated code will appear in a separate window, so you can easily view it.

Once you're done interacting with the page, click the 'Record' button to stop the recording.

You can then copy the generated code and add it to your project, making the process of test creation quick and efficient.

Emulation for Cross-Device Testing

Emulation lets you simulate how your app will behave on different devices and browsers without needing the actual devices.
Whether you want to test how your app looks on a mobile phone, tablet, or a specific browser version, Playwright makes it super easy.
This feature ensures that your app works seamlessly across different environments.

Running and debugging the test

Playwright makes running tests super flexible and efficient.You can run a single test, a specific set of tests, or all your tests at once.
It’s designed for faster test execution and works seamlessly across different browsers, whether you want to run tests on a single browser or multiple ones.

Playwright also gives you the option to run tests in headless mode for speed or headed mode if you want to see the browser in action and there’s even a UI mode, making it easier to manage and debug your tests visually.

Running the test

We can run our test by npx playwright test command, and it will execute your tests across all the browsers configured in the playwright.config file.

This makes it easy to test your app’s behavior on multiple browsers without any extra effort.

Running test in UI mode

You can run run test in UI mode by using following commad:
npx playwright test --ui
In UI mode, you can run all your tests or pick specific ones to execute.
You can dive into each step of a test and see exactly what’s happening, along with the corresponding lines of code being triggered in the source window.

UI mode offers test filters to easily narrow down tests and a watch feature to automatically re-run tests whenever your code changes.

This is especially handy for large test suites, letting you quickly test changes without the hassle of running everything manually.

Debugging test in UI mode

Debugging in Playwright’s UI mode makes testing so much easier by letting you go through each step and see what happens before and after it’s executed.
The UI mode also comes packed with helpful tools like the locator picker and watch mode.
With the locator picker, you can select an element on the page to see the locator Playwright uses, and you can even edit the locator directly in the locator window.
You can debug tests using the Playwright Inspector by running npx playwright test --debug.
This opens a browser and inspector window, where you can step through your tests using the step-over button or run the test entirely with the play button.

Additionally, if we find a bug or issue in our code, we can write a test case for it, debug the issue, and ensure it’s resolved.
This test acts as a safety net, so if we work on other elements later, we don’t have to worry about the fixed element breaking unnoticed.Playwright helps maintain stability and reliability in the workflow.

Conclusion: How Playwright Fixes Testing Problems

Transitioning from manual testing to Playwright wasn’t just a productivity boost—it completely changed how we approach testing in development.

With its smart features like auto-generated tests, cross-browser support, and robust debugging tools, Playwright has revolutionized our workflow, offering efficiency, reliability, and simplicity in the fast-paced world of software development.

Whether you're a beginner or an experienced developer, adopting a powerful tool like Playwright can transform your testing process and ensure your applications meet the highest standards.

So, if you’re still stuck with outdated testing methods, maybe it’s time to embrace the future.