LoginPage is where it starts to get interesting. If you open up the login page for any Slack workspace and log in manually you’ll notice that there’s three steps to it:

Enter email address Enter password Click on the login button

Since there’s a total of three elements that we need to interact with, we’ll create three variables in the LoginPage : emailInput , passwordInput and loginButton . All of these elements have been found by their ID, which is great because sometimes websites don’t make it this easy for you which then means you have to use CSS selectors which aren’t as straightforward and are more prone to change.

Did you notice how the constructor contains a couple of lines that waits for elements? Why do you think this is needed?

The reason why these waits are needed is because we need to be 100% sure that the elements that we’re interacting with are fully loaded before we do anything with them. In this case, we’re calling the elementToBeClickable() method since we want to click on all three of the elements, but there are plenty of other useful methods that can be used for other scenarios such as visibilityOf() , textToBe() and invisibilityOfElementLocated() .