using Selenium to login to a website

So far all the posts have been introducing Selenium and Python. Today we are going to write a Selenium test that will login to a website.

The first example I will use is my own site. The first step is to figure out what the URL is for your login form: https://app.crossbrowsertesting.com/login

The next step will be to find the username and password fields.

We will start with the username field. I will inspect that field with Chrome devtools and I see some HTML that looks like this:

<input name="username" type="text" id="inputEmail" data-se-id="inputEmail" placeholder="[e-mail]" ng-model="login.username" focus-on-show="" class="ng-pristine ng-valid ng-touched" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">

It is a lot of text but I left it in there to see the type of things you will need to mentally parse. Most of the text above is an image that is used in the form field the important things to note are the attributes that we could use to locate this field.

The name field looks good "username." That is clear and would be a good choice. But there is an id field, "inputEmail." And that looks even better. So the locator will look something like this.

driver.find_element(By.ID, "inputEmail")

Next we want to find a locator for the password field. I will use Chrome devtools again. I will click in the password field and right click and choose inspect. Below I pasted the HTML.

<input name="password" type="password" id="inputPassword" data-se-id="inputPassword" placeholder="Enter password or authkey" ng-model="login.password" ui-keypress="{enter: 'checkLogin()'}" class="ng-pristine ng-valid ng-touched" style="background-image: url(&quot;data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAASCAYAAABSO15qAAAAAXNSR0IArs4c6QAAAPhJREFUOBHlU70KgzAQPlMhEvoQTg6OPoOjT+JWOnRqkUKHgqWP4OQbOPokTk6OTkVULNSLVc62oJmbIdzd95NcuGjX2/3YVI/Ts+t0WLE2ut5xsQ0O+90F6UxFjAI8qNcEGONia08e6MNONYwCS7EQAizLmtGUDEzTBNd1fxsYhjEBnHPQNG3KKTYV34F8ec/zwHEciOMYyrIE3/ehKAqIoggo9inGXKmFXwbyBkmSQJqmUNe15IRhCG3byphitm1/eUzDM4qR0TTNjEixGdAnSi3keS5vSk2UDKqqgizLqB4YzvassiKhGtZ/jDMtLOnHz7TE+yf8BaDZXA509yeBAAAAAElFTkSuQmCC&quot;); background-repeat: no-repeat; background-attachment: scroll; background-size: 16px 18px; background-position: 98% 50%; cursor: auto;">

Note the choices we have name is good but id is better. Below is our locator we will use.

driver.find_element(By.ID, "inputPassword")

The final element we will need to use the login form is the button that we will need to click. Again use Chrome devtools and right click on the button and inspect.

<div class="user-form-button-wrap">
<button id="login-btn" type="button" data-se-id="login-btn" ng-click="checkLogin()">Log In</button>
</div>

Again we will pick the id and make a locator.

driver.find_element(By.ID, "login-btn")

At this point we have all of the information needed to test our Selenium script.

One thing I like to do to convince myself that I do have the locators correct is test each one of them individually. This is not strictly needed but I know the test will work if I test those elements alone first.

I will write tiny small tests that run Chrome and verify that the WebElement prints when I locate it. For fields I will usually put dummy data in the field to verify it is working.

from selenium import webdriver
from selenium.webdriver.common.by import By

import time
driver = None
try:
    cpath = "e:\\projects\\headless\\chromedriver.exe"
    driver = webdriver.Chrome(cpath)
    driver.get("https://app.crossbrowsertesting.com/login")
    e = driver.find_element(By.ID, "inputEmail")
    print(e)
    e.send_keys("selenium")
    driver.save_screenshot("test1.png")
finally:
    if driver is not None:
        driver.close()

At this point you can look at the saved test1.png and verify that you have typed a username into the correct field.

The final script has just a few more lines in it.

from selenium import webdriver
from selenium.webdriver.common.by import By

import time
driver = None
try:
    cpath = "e:\\projects\\headless\\chromedriver.exe"
    driver = webdriver.Chrome(cpath)
    driver.get("https://app.crossbrowsertesting.com/login")
    e = driver.find_element(By.ID, "inputEmail")
    print(e)
    e.send_keys("selenium")
    e = driver.find_element(By.ID, "inputPassword")
    e.send_keys("supersecretpasswordhere")
    e = driver.find_element(By.ID, "login-btn")
    e.click()
finally:
    if driver is not None:
        driver.close()

The next task for this script would be to detect that the login was successful or failed. I will leave that for another post.

Hopefully we picked IDs for our locators so our script once done should remain stable. If our front end developers ever change the ID text on the login form this script will break.