The aim here is to identify when it is suitable to use class attributes or element IDs in the creation of CSS selectors. The following DOM models a simple registration form:
<html>
<head>
<title>Register</title>
</head>
<body>
<form id="register" class="form-register">
<h1 class="h3 mb-3 font-weight-normal">Please Register</h1>
<label for="inputName" class="sr-only">Name</label>
<input type="text" id="inputName" class="form-control"
placeholder="Name">
<label for="inputAddress" class="sr-only">Password</label>
<input type="text" id="inputAddress" class="form-control"
placeholder="Address">
<div class="row">
<div class="col-md-6 mb-3">
<button class="btn btn-lg btn-danger btn-block"
id="cancelButton" type="submit">
Cancel
</button>
</div>
<div class="col-md-6 mb-3">
<button class="btn btn-lg btn-primary btn-block"
id="register" type="submit">
Register
</button>
</div>
</div>
</form>
</body>
</html>
Create CSS selectors for the input elements by using class attributes, and create the register button by using the element ID. Implement locators in Java by using the CSS selectors that are generated. The steps for completion are as follows:
- Open https://trainingbypackt.github.io/Beginning-Selenium/lesson_4/exercise_4_3.html in Chrome.
- Open the Chrome DevTools.
- To select the input for the name section, identify the element type (input) and its class attribute (enter-name) its parent.
- Combine the element type and the class attribute to form the CSS selector; it should look as follow: input.enter-name. This is how your screen should look like:
- Follow steps 2 and 3 to create a CSS selector for the address section.
- Note that the element button has the ID register, but, due to a mistake, the element form also has the ID register. In this case, combine the element tag with its ID. The CSS selector will look as follows: button#register.
- After all of the selectors have been found, use them to create the locators with Java.