Introduction

How would you test a UI that mimics an actual user? Well, there are tons of front-end testing framework like Cypress, TestCafe, Protractor.

What I am going to introduce to you is something is considered the industry standard for front-end testing and is quite popular among testers for websites. Which mimics an actual user to interact with your UI without the need to learn another programming language to just get started.

Do note that there are subtle differences between each programming languages when you are using Selenium. Because the library is created and maintained by multiple open-source contributors. Which may not be affiliated to the main Selenium contributor besides using Selenium and building wrappers for their specific programming language.

Why Selenium?

Selenium is the tool of choice for not just website UI testing. Instead, it is used for data scrapping & automation because it mimics an actual user.

As the difficulty arise when you try to scrape data from a website which uses javascript to display data. You need to configure a browser to execute the javascript code. Which could be circumvented by using Splash but this comes with additional configuration to extract data.

Writing Test Case

To write test cases, my choice of testing framework is Pytest as it makes it easy for anyone to get started to create test cases and the fixtures. Which allow quick loading of states or environment before executing a test case for a website.

This allows you to create a user journey. Which automatically tests how a user navigates or interacts with the website. This can be integrated into your CI/CD process to catch user interaction or UI errors. Before an actual deployment to the production server and making it live for anyone to use it.

CSS vs Xpath

To write test cases for a website using Selenium. The first thing that you need to do. Besides starting a browser instance and redirecting the browser instance to the website link. It is finding a specific html element on the website.

So that Selenium could do something with it. Which could be used by either initiating a click, waiting for the element to load or extract data of that html element to check if you had the correct value.

There are multiple ways for you to do it. The most common way for you to do it is using a selector using either CSS or Xpath paths.

My personal preference is using the Xpath of the html element you would like to select. Because seldom do the html element contain a class id or name attribute to represent that element in the webpage.

Which you can get it easily if you are using either Firefox or Chrome by right-clicking your mouse to display builtin developer tool. Once you select "inspect", now right-click again to copy the XPath of the element that you would like to select to locate the element when you are running the test case.

Writing Test cases for Front-end Web Framework

Before you write your test cases, ensure that you had installed following python packages and chromium using a Linux machine.:

pip install pytest selenium
sudo apt update
sudo apt install chromium-chromedriver

To write the test case first create a file called test_user_flow.py then use the code below:

from selenium import webdriver  # imports the selenium webdriver


def test_get_title():
    path = "http://www.python.org"  # the starting url
    driver = webdriver.Chrome()  # initialise a driver that is using the chrome driver for selenium
    driver.get(path)  # redirects the driver to that url path

    assert "Python" in driver.title  # a test case which checks if the title contains the "Python"

    driver.close()  # closes the browser once it has completed


test_get_title()

Now let us run the test case, it should pop up a chrome browser and run twice for your code shows a pass for your test case:

pytest -v

Conclusion

I hope the article is useful for you and introduces you to selenium. Which is used not mainly for UI testing? But in data scrapping and automation because of convenience to display data for javascript heavy websites with wide support of multiple programming languages.

I had also listed down the reason why you should choose to use Xpath for selecting an html element. You use it when it does not contain any class attributes or id to identify the element within the webpage.

Reference

• Cypress
• TestCafe
• Protractor
• Selenium Python
• Splash
• Web Automation With Selenium
• Advanced Python Programming: Browser Automation with Selenium
• PyTest
• Fixtures
• User Journey
• Selector
• CSS
• Xpath
• Obey the Testing Goat
• Python Testing with Pytest
• The power of Headless Chrome and Browser Automation
• Getting Started with Selenium - Using Selenium to write tests
• Undraw