We have a contact form with Name, Email and Comment fields, and if invalid data is entered to the fields, the validation system will highlight that field and it will be focused, so the user can change it quickly. In our tests we want to check if the proper field gets the focus.
<div class="contact-form"> <label> Name </label> <input id="contact-name" type="text" /> <label> Email </label> <input id="contact-email" type="text" /> <label> Comment </label> <input id="contact-comment" type="text" /> </div>
(this is just an example code, and not a functional one)
Selenium suggest to use css selectors, so we will start with that. To see if the element has the focus we will use css pseudo-class “:focus” and check if an element is present like this: