We will use Selenium to automate the interaction with the UI elements of our application. However, we must provide some sort of selector for Selenium to select the element we want to interact with. The most precise selector we can have is an id attribute.
So, before we use Selenium, let's add some ids to our elements. Open src/components/registration-form/index.jsx and add an id prop to each element:
<Input label="Email" type="email" name="email" id="email" ... /><Input label="Password" type="password" name="password" id="password" ... /><Button title="Register" id="register-button" ... />
Then, in src/components/input/index.jsx and src/components/button/index.jsx, pass the id prop into the element as an attribute. ...