data-testid: Bridging the Gap between QA Engineering and Front End Dev

original article medium.com/@JohnnyV_5G

In the ever-evolving world of software testing, we often find ourselves embarking on new adventures - like trying out the latest frameworks. Recently, we were tasked with implementing a new testing framework and decided to roll with Playwright, because, why not aim for the stars? 🚀

However, as we dove into this exciting new realm, we quickly realized that having a robust testing strategy isn't just about the latest tools. It's also about having a reliable way to identify elements on the page. Enter data-testid - our unsung hero.

In this piece, we'll explore why data-testid attributes are like the secret sauce that can turn a good test into a great one. We'll show you how this little attribute can make your Playwright tests as smooth as a victory in the Squid Game - minus the drama, of course. So, buckle up and let's dive into how data-testid can make your testing journey more manageable and less like a game of chance!

Why Using data-testid is Important

1. Separation of Concerns: The data-testid attribute helps keep test selectors separate from other attributes that are meant for UI or functionality, like id or class. These attributes might change as part of UI updates, but the data-testid is meant to be stable, ensuring your tests don't break with UI changes.

2. Avoids Targeting Visual Elements: Often, developers are tempted to use classes or styles for testing, but these are subject to frequent changes when CSS is modified. Using data-testid ensures that the tests remain stable regardless of visual or structural changes.

3. Readability in Tests: When using data-testid, the test code becomes more readable. Testers and developers can immediately understand what element is being tested without guessing based on ambiguous or changing attributes like id or class.

4. Performance Optimization: Selecting elements using data-testid can be faster and more reliable in tests compared to selecting elements by class names, which are generally used for styling and might not be unique or optimized for querying.

Best Practices for Adding data-testid

• For Key Interactive Elements: Use data-testid on elements that your tests frequently interact with, such as buttons, input fields, and links. This ensures that the most critical user actions can be reliably tested.  

<button data-testid="submit-button">Submit</button>

• Stable, Descriptive Naming: The data-testid values should be stable and descriptive of the element's role or action, e.g., submit-button, login-form, or profile-picture. Avoid using temporary or context-specific names that could change frequently.

• For Dynamic Content: Use data-testid on elements where content changes dynamically, like modals, dropdowns, or dynamically loaded lists. This allows your tests to reliably locate and verify dynamic content.

• Avoid Overuse: Not every element needs a data-testid. Apply it only to elements you interact with in tests, to avoid cluttering the HTML.

• Multiple Child Elements: If a parent container has multiple child elements, assign data-testid to specific children rather than the container. This allows precise interaction with the correct elements in tests.

• Unique Identifiers: Ensure each data-testid value is unique within the scope of your page, so there is no ambiguity when selecting elements in tests.

How to Explain to your Front-end Developers the Importance of Using data-testid Attributes

Hey there, front-end wizards! Let's chat about data-testid attributes - those little heroes of testing that don't get nearly enough credit.

Why Use data-testid?

Because I told you so! …. no no jk jk…. we are alllll in the "same team" 🙄

1. A Secret Code for Testers: Think of data-testid as your personal secret code that only testers and automated scripts know. It's like a VIP pass for your elements. When your testers want to find that elusive button or input field in your complex layout, data-testid is their golden ticket.

2. The Non-Disruptive Sidekick: Unlike those flamboyant class names or IDs, data-testid quietly sits in the background, never stealing the spotlight from your shiny new CSS or causing layout dramas. It's there to help, not to show off.

3. A Refuge from Randomness: If you've ever tried to test something using a dynamically generated class name or ID, you know the struggle is real. data-testid is a steadfast anchor in the turbulent sea of changing styles and structure. It's like having a GPS in a maze.

4. The Invisible Friend: It's like having a friend who's always there to lend a hand but never makes a fuss. data-testid doesn't mess with your design or functionality; it just does its job silently, helping your tests find what they need without a fuss.

5. A Clean Slate for Future Upgrades: Imagine your app gets a makeover. If you've used data-testid, your tests will still be able to find what they're looking for, even if the UI gets a whole new look. No more worrying about breaking tests when you jazz up the design.

So, in Summary…
Use data-testid attributes as your secret agent for testing. They keep things clean, simple, and less prone to the dreaded "why is this test failing now?" headaches. They're the unsung heroes of the testing world, helping us all live happily ever after in code harmony.
Now, go forth and data-testid your way to automation success!

await page.evaluate(() => 
{ try { SquidGame.run(); } 
catch { 
console.log('Looks like we're all playing Red Light, Green Light here!'!'); 
} 
});

https://www.reddit.com/r/ProgrammerHumor/comments/qjpy74/squidgamerun/