Writing Test Cases using Python with Selenium

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.

If you like this article do sign up for my Adventurer's Newsletter for my Adventurer's newsletter which contains interesting content I stumble across over the week in the area of Python, Web Development, Startup .

You can also follow me to get the latest update of my article on Dev
The original post was on Writing Test Cases using Python with Selenium - Reading Time: 4 Mins and cover image by Daniel Korpai on Unsplash

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

Comments

[João Pedro]

Could you elaborate a little more why do you prefer using the Xpath and not CSS to select elements? Because CSS selectors are far better and faster to use than the Xpath ones, and Xpath engines are different in each browser, hence make them inconsistent. But as always, great article! Thanks for sharing

[Max Ong Zong Bao]

Hmmm... for me I choose XPath because it's much easier to read and modify which using CSS fails me in extracting data.

As there were times I need to extract data and makes changes to each value in the rows of a table then save it as an element in either a dictionary or list data type variable.

Especially you are extracting listings data. Which you can program your Data Scrapper to stop at specific rows using just for loop.

After getting the total number of rows from somewhere within the page or derived from checking the usual max number of rows in the table html element.

[endtest]

XPaths do have an advantage, you can use them to locate an element based on the text inside.

//*[contains(text(),'Hello')]

It's great to use both CSS Selectors and XPaths.

And it's also very helpful to learn how to write your own XPaths and CSS Selectors by using attributes which make an element unique.

The XPaths and CSS Selectors that you get from the Chrome Developer Console.

Let's take a look at this example:

<html>
   <body>
      <div class="login-form">
         <input id="mat-input-6" type="text" placeholder="Email">
         <input id="mat-input-9" type="password" placeholder="Password">
      </div>
   </body>
</html>

We can easily spot that the IDs are dynamic, so we have to avoid them.

The basic CSS Selector for the Email input would look like this:

body > div > input[type=text]:nth-child(1)

But we can easily construct something more reliable:

input[placeholder="Email"]

And using Cypress or any other JavaScript-based UI testing library is a very bad idea.

Since those libraries have severe limitations and do not mimic real user behavior.

For example, a JavaScript-based library for testing the UI can easily click on an element which is completely covered by another element.

A real user and a Selenium test cannot do that.

A JavaScript library for testing the UI cannot perform file uploads, cannot manage iframes and cannot manage multiple browser tabs.

Use Selenium or some other Selenium-based solution. That's the way to go.

[Max Ong Zong Bao]

Interesting perspective as I had used protractor and did find that it was quite limited in features to test UI which I usually fall back to using selenium due to me playing around with it in the past by doing data scrapping projects.