Queries

One of the primary ways to achieve user-driven tests is to access and interact with the UI elements in the same way the user would. Your users don't know HTML or CSS so they don't locate elements on the page by their class names or test-id attributes. Instead, they find the things they need by their roles and names (this is true for visually-impared users as well).
The way you access different elements in tests matters a lot. It can vary from giving you a ton of value and implicit accessibility assurance to forcing you to change your tests all the time because they are riddled with implementation details.
When testing, do what your users would do.
πŸ‘¨β€πŸ’Ό In this exercise, your task is to write a simple integration test for a new React component called . And what do you knowβ€”this component is a form! This means plenty of elements for you to locate. Use locators like .getByRole() and .getByLabelText(), and write assertions that make sure all the necessary form elements are present on the page.
Note that I've made the browser tests run in a headless mode by setting test.browser.headless to true in .