Cosmic Thoughts

Running Selenium Tests in CircleCI

 428  3 mins

Hello again!

It’s been a while… I hope you and your loved ones are in good health 💖

Today, I come with a topic related to Testing! Specifically, running Selenium Tests in CircleCI.

Background

I have been working on the mignonnesaurus-blog for more than a year. It’s a blog based on the Django Girls tutorial.

After, following the tutorial, I continued the fun by:

  • Adding Tests
  • Setting up Continuous Integration with CircleCI
  • Setting up Code Climate
  • Setting up a delivery pipeline to deploy and run the blog in Heroku.

What happened?

This PR opened by dependabot happened:

bump_to_django3_pr

Notice that compatibility of 41% 😱 … so I said to myself: I want to verify in an automated way that this change does not break the blog. Yes! This is a good opportunity to add functional tests that validate that the main functionality of the blog works, after the upgrade. And, it would also be great if these tests ran as part of the CI pipeline.

What did I do?

First, I wrote some functional tests with Selenium. I decided to run them using Firefox in headless mode.

After writing the tests, came the challenge of running them as part of Continuous Integration.

A requirement to run Selenium tests is a browser and its compatible WebDriver. In the case of tests for this project, we are using Firefox and we also need geckodriver.

So the question came up: How do we setup Firefox and geckodriver in CircleCI?.

After looking and looking using the ✨ magic ✨ of the Internet, I found the circleci/browser-tools orb, and I managed to add it to the .circleci/config.yml of the project.

How to setup Firefox and geckodriver in CircleCI?

ℹ️ Source: https://circleci.com/orbs/registry/orb/circleci/browser-tools

  1. Use CircleCI version 2.1 at the top of your .circleci/config.yml file:
1

version: 2.1
  1. Add the orbs stanza below your version, invoking the orb:
1
2

orbs:
  browser-tools: circleci/browser-tools@1.0.1
  1. Use browser-tools elements in your existing workflows and jobs. For Firefox and geckodriver:
1
2
3
4

jobs:
  steps:
    - browser-tools/install-firefox
    - browser-tools/install-geckodriver
  1. Run the tests! In the case of mignonnesaurus-blog, we are using:
1

  coverage run manage.py test tests -v 2

For reference, see the .circleci/config.yml file for the project.

Result

The tests started to run as part of the CI pipeline and after seeing that all the tests passed for the Bump django from 2.2.13 to 3.1 PR, we merged it:

bump_to_django3_pr

Success! ✅

🎉 We are ready for another upgrade 🎉

Oh, if you want to see everything I tried before getting to this solution, checkout PR #256 😅

Hope this is helpful to you!

Happy Testing! 🤖