DEV Community

Mangai Ram
Mangai Ram

Posted on • Originally published at testleaf.com

A Simple Trick to Fix Broken Selenium Tests: "data-testids"

This article talks about how software testers find and click buttons, links, or text on a website automatically using a tool called Selenium.

But there’s a problem — sometimes those automatic tests break when the website’s design changes even slightly.

The blog teaches how to avoid that by using something called data-testid — a small label that developers can add to buttons or fields to make them easy for the test scripts to find every time.

Simple Example

Let’s say you have a website with a “Login” button.
Normally, a tester would write something like:

“Click the 3rd button inside that box.”

But if the page layout changes, that 3rd button might move — and the test breaks.

Instead, developers can add a label:

Login

Now the test can just say:

“Click the button with label login-button.”

No matter how the design changes, the test still works.

What You Learn

Old-style testing used complicated “paths” (called XPaths) to find elements.

These paths often break when the website changes.

Using data-testids makes your tests much more stable and future-proof.

It also helps testers and developers work together better, since both agree on the labels to use.

Real-World Example

Imagine an e-commerce site with 100 buttons and forms.
Earlier, every small UI change broke many test scripts.
After switching to data-testids, testers didn’t have to fix broken tests every day — saving hours of time.

In Short

Old method = fragile, keeps breaking

New method (data-testid) = strong, stable, easy to manage

Helps testers find website elements easily, even after design changes

Makes the testing process faster and more reliable

Top comments (0)