What is data-testid?

During automated testing, it’s critical your tests have reliable access to key HTML elements such as submit buttons, form inputs, and interactive widgets. However, because HTML is so flexible, relying on standard CSS selectors and content text can often lead to very brittle tests.

The data-testid HTML attribute solves this problem my providing a cross-framework convention for consistently targeting important DOM nodes. Rather than targeting form input:nth-child(3), you target [data-testid="contact-form-message"]. Then, during normal development, you simply never ever ever change or remove any of your data-testid attributes without also updating your tests.

While this may seem equally brittle to CSS selectors, once you share this convention with your dev team, you can be relatively confident in your test IDs remaining static. In comparison, you can bet big bucks that no one will remember any such conventions about CSS selectors spanning an entire codebase. Lastly, the data-testid convention reinforces itself across test suites. You can reuse the same IDs in unit tests, e2e tests, performance tests, and more.

How can BrowserCat help with automated testing?

At BrowserCat, we staunchly support automated testing. Tap into our headless browser fleet effortlessly, and execute your tests concurrently at minimal cost, bypassing the hassle of deploying headless browsers. Shrink your CI/CD process from lengthy hours to mere minutes.

No matter the scope of your project, BrowserCat ensures a smooth testing experience. The sooner a bug is detected, the quicker it’s resolved!

Give us a try today!