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.
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!
Tired of managing a fleet of fickle browsers? Sick of skipping e2e tests and paying the piper later?
Sign up now for free access to our headless browser fleet…