Adding IDs to elements

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. ...

Get Building Enterprise JavaScript Applications now with the O’Reilly learning platform.

O’Reilly members experience books, live events, courses curated by job role, and more from O’Reilly and nearly 200 top publishers.