UI Automation using Python and Selenium: Tutorial

The user interface is the point at which a user can interface, or communicate, with the computer. That’s why UI testing is one of the most fundamental tests to be carried out prior to deploying an application. 

Previously, manual testing was predominantly used to carry out UI testing. However human error, the time taken, and the investment required has led to more businesses moving towards automation. Automation of test cases ensures high-quality outcomes since every task is carried out rapidly, consistently, and efficiently, eliminating the risk of error. 

This article explores UI automation using the popular automation framework Selenium with Python.

What is UI Testing?

Few developers understand the gravity of designing a user interface; one glance at the application’s user interface can make or break its success. After all, you never get a second chance at making a great first impression.

A clean design, ease of use, visual aesthetics, and effective functionality are all hallmarks of a well-designed UI. A messy UI that is not aesthetically pleasing, or intuitive to use will quickly turn away customers and lead to a massive loss of revenue.  

To ensure that the user has a good first impression of the software it’s important to anticipate their needs. UI testing for visual and functional flaws plays an important part in preemptively finding the most optimal UI design to provide the customer with a flawless experience.

Components of a UI

The user interface is the focal point of interaction between the user and the application, and as such it’s very important that the UI be easy to use while still effectively and aesthetically presenting the purpose of the application.

Depending on the purpose of the application several different types of UI can be utilized. 

For example, form-based user interfaces are normally presented as forms with limited options and are mainly used for data entry applications. 

Depending on the use there are a few major components that exist in every UI:

• Input controls, these controls encapsulate all aspects of a UI involved with user input.

As seen above components such as the button “Add to cart”, dropdown lists, checkboxes, toggles, or text fields all fall under input controls.

• Navigation Components, are navigational controls used by the user to navigate the application.

Menus, buttons to navigate to different pages, search bars, and breadcrumbs are all classic navigational components. 

• Containers, this component holds content together. 

For example, pictured above is a popular container called an Accordion container.

• Informational Components, these components provide the user with information regarding the application, details about products, or advertisements.

For Example: Message boxes, notifications, icons, and tooltips.

Features that set Selenium apart from the Crowd

Selenium is a powerful automation framework that is highly recognized and established in its use for testing web applications. 

Distinguishing Features of Selenium:

1. It supports multiple programming languages such as Python, Java, JavaScript, Ruby, C#, Perl, and PHP.
2. Selenium also supports a large variety of popular browsers like Google Chrome, Mozilla Firefox, Internet Explorer, Safari, and many others; In addition to this Selenium supports various well-established OS’ such as Linux, Mac, Windows, Android, and iOS.
3. Selenium WebDriver is a very popular feature of Selenium, allowing the user to perform cross-platform testing and giving them the ability to configure and control the browsers on the OS level. The WebDriver is capable of communicating directly with the browser without the need for any intermediate server, thus allowing it to execute test cases faster than most other test automation frameworks.
4. Fewer resources are required to work with Selenium in contrast with other automation frameworks.
5. Selenium is open-source.
6. Selenium makes it easy to automate web applications by employing Locators. Locators allow the developer to identify elements on a web page by certain attributes like ID, XPath, CSS, name, class name, tag name, link text, and partial link text.

UI Testing with Selenium and Python: Example

UI automation using Python and Selenium is performed in this example. This UI automation test explores the user interface of the website “https://www.bstackdemo.com/” and carries out an end-to-end user process. This process involves actions a typical user might do on the web application such as:

Logging in > Navigating to a certain phone brand > Liking products > Adding a product to the cart >  Checking out > Entering customer details and delivery address > Concluding the purchase > Downloading the receipt.

Pre-Requisites:

• Set up a Python environment.
• Install Selenium. If you have conda or anaconda set up then using the pip package installer would be the easiest method to do so. Simply run this command (on anaconda prompt, or directly on the Linux terminal):

pip install selenium

• Download the latest WebDriver for the browser you wish to use; Chrome Webdriver was used for this example, or install the webdriver_manager package by running the command:

pip install webdriver_manager

Run Selenium Tests on Real Devices

Step 1: Import the required packages.

from selenium import webdriver

from selenium.webdriver.chrome.service import Service
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC
from selenium.webdriver.common.by import By
from webdriver_manager.chrome import ChromeDriverManager
from selenium.webdriver.common.keys import Keys

Step 2: Navigate to the example web application.

driver = webdriver.Chrome(service=Service(ChromeDriverManager().install()))

driver.maximize_window()

wait = WebDriverWait(driver, 60)

driver.get('https://www.bstackdemo.com/')

wait.until(EC.url_to_be('https://www.bstackdemo.com/'))

First, the driver for google chrome is installed or updated as needed. Following this, the chrome browser window is maximized to fill the screen. Finally, we navigate to “https://www.bstackdemo.com/”, the website whose UI will be tested in this example. 

To ensure that the website loads properly explicit wait is employed, this makes the program wait until the url is “https://www.bstackdemo.com/”.

Step 3: Automate User Login.

sign_in=driver.find_element(By.ID, "signin")
sign_in.click()


WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div[2]/div/form/div[2]/div[1]/div/div[1]/div[1]"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div[2]/div/form/div[2]/div[1]/div/div[1]/div[1]/div[1]"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("demouser")
active_ele.send_keys(Keys.ENTER)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div[2]/div/form/div[2]/div[2]/div/div[1]"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div[2]/div/form/div[2]/div[2]/div/div[1]/div[1]"))).click()


active_ele = driver.switch_to.active_element
active_ele.send_keys("testingisfun99")
active_ele.send_keys(Keys.ENTER)

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

The ID locator is used to find and click on the sign-in button element. The XPath locator is then used to find the textbox for inputting the username. The driver is switched to the active element(the textbox for username), and the keys “demouser” are entered into this textbox. 

The XPath locator is used once again to find the textbox for entering the password. The driver is switched to the active element (the textbox for the password), and the keys “testingisfun99” are entered into this textbox.

Once again explicit wait is employed with an expected condition to make the program wait until the text fields of the username and password are clickable. 

Lastly, the ID locator is used to find and click the login button element.

Step 4: Add a Google phone to the cart and like another phone.

#Select a Google phone and add it to the cart
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div/div/main/div[1]/div[3]/label/span"))).click()
#Like a phone
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH, "/html/body/div/div/div/main/div[2]/div[2]/div[1]/button"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.XPATH,"/html/body/div/div/div/main/div[2]/div[3]/div[4]"))).click()
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.CLASS_NAME,"buy-btn"))).click()

The XPath element is used to find and click on the “Google ” vendor element in order to filter for google phones. The Pixel 4’s like button is found using the XPath locator and clicked; To simulate how a user may like certain products and buy others. Lastly, the XPath locator is used to add the Pixel 3 phone to the cart, and click the checkout button.

Once again explicit wait is employed with an expected condition to make the program wait until the Google vendor element, like button, add to cart button, and checkout button is clickable.

Step 5: Fill in the necessary details and Checkout.

#Checkout
WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "firstNameInput"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("Alice")
active_ele.send_keys(Keys.ENTER)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "lastNameInput"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("Cooper")
active_ele.send_keys(Keys.ENTER)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "addressLine1Input"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("Apt.5, Downton Building, Cherryblossom Road")
active_ele.send_keys(Keys.ENTER)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "provinceInput"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("Canterbury")
active_ele.send_keys(Keys.ENTER)

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID, "postCodeInput"))).click()
active_ele = driver.switch_to.active_element
active_ele.send_keys("CT3")
active_ele.send_keys(Keys.ENTER)

At checkout a form is provided to the user, requesting information such as their name and address. This program uses the ID locator to find and click the textbox elements for this information; Explicit wait is used to wait until the text boxes are clickable. Once the requisite element has been found the driver switches to this active element and sends the keys pertinent to it. For example, upon finding the textbox with the ID “lastNameInput” the keys “Cooper” are sent to it as input.

Step 6: Lastly Download the Receipt.

WebDriverWait(driver, 20).until(EC.element_to_be_clickable((By.ID,"downloadpdf"))).click()
driver.quit()

Upon entering all the required information into the form to checkout, the user is led to a page with their receipt for the product. Once again explicit wait is employed with an expected condition to make the program wait until the link for the receipt is clickable. 

The ID locator is used to find the link to download the receipt and click on it, thus concluding one potential interaction a user may have with the web application.

Output:

Confirmation:

The Significance of Automation in UI Testing

As mentioned earlier, the goal of UI design is to create an interface that is visually pleasing and intuitive to use. At its core, UI testing validates user navigation, tests the functionality of the application, and ensures that all parts of the UI are functional and straightforward to use.

When manual testing is done, it involves testers exploring the UI as a user would and validating all aspects such as image representations, forms, menus, and all other UI components to evaluate whether all functionalities are behaving as they should according to their specifications. Additionally, it’s pertinent to ensure the application is functional across various platforms and services in order to guarantee that the application caters to all possible users. This makes for a very tedious task with manual testing.

Automating UI testing significantly reduces the risk for human error, minimizes time, and decreases effort on the testers’ part. By streamlining tedious manual tests with the help of automation frameworks such as Selenium the slightest defects, normally missed by manual testers, can be accurately identified. Validating user navigation, testing functionality, and validating input fields; All of these tasks can easily be carried out by applying UI automation with Python and Selenium.

Additionally, cross-platform testing can be performed with these test scripts. Selenium WebDriver provides the tester with the ability to run test scripts on multiple popular browsers and OS configurations. Additionally, the WebDriver is capable of communicating directly with the browser making Selenium faster than most other automation frameworks. UI automation testing using Selenium also allows the testers to reuse the test scripts upon implementing changes to ensure that the web application still works as it should. 

Percy, a specialized visual testing software, can also be integrated with Selenium for more thorough testing. Percy detects visual changes with great precision by obtaining snapshots of the UI as changes are pushed in the application. It compares these snapshots against a baseline snapshot at the pixel level and flags any visual regressions it finds. Percy meticulously checks the UI in several popular browsers such as Google Chrome, Safari, Firefox, and Microsoft Edge at several responsive widths. 

Moreover,  small defects of only a few pixels aren’t erroneously flagged, since Percy ignores if there is a one-pixel defect in a circle of 7 surrounding pixels. The user is also able to specify elements that they wish the software would ignore, these elements will not be flagged by Percy. On the other hand, they can also specify elements that will be shifted so that the Visual AI can detect those specific elements across the application.

By integrating Percy into the existing CI/CD pipeline automated visual testing can be carried out alongside any existing functional tests to accurately detect any functional problems or visual regressions in the UI. 

Try Percy for Free

Overall, UI automation testing using Selenium greatly supplements web application testing and makes the process more efficient compared to carrying out test cases manually.

Concluding Notes: How to Automate Efficiently

When writing automation tests to test a user interface oftentimes, there will be a rather large number of test cases. Selenium Grid is necessary for such instances to allow scaling up for the numerous tests. Similarly, when tests need to be run in multiple environments, Selenium Grid can help the QA to use resources more efficiently with parallel tests. 

Selenium Grid minimizes runtime and improves efficiency while running test cases, allowing the users to run multiple tests parallely on any number of remote device/OS combinations.

BrowserStack Automate offers a high-performance Cloud Selenium Grid which can accelerate testing with 10x parallel execution of test cases. Additionally, parallel testing can be carried out on the 3000+ real mobile devices and desktop browsers available with Automate. 

Automation is cardinal to creating efficient tests, and BrowserStack Automate greatly enhances the capabilities of automated tests allowing the user to create cost-effective and streamlined test cases to test any web application thoroughly.

Run Tests on Cloud Selenium Grid