End-to-End Testing with Docker and Selenium

Table of contents

Why

In a recent Django project, I needed to implement end-to-end testing using Selenium. While the setup worked smoothly locally, I wanted to containerize the development environment, including the test suites. However, I encountered a challenge when running the tests in Docker: Selenium requires a browser to be installed in the system, and not all Docker images come with a browser pre-installed.

Problem

1
version: '3'
2
services:
3
  # django
4
  app:
5
    build: .
6
    command: python manage.py runserver 0.0.0.0:8080
7
    volumes:
8
      # ...
9
    ports:
10
      - '8080:8080'
11

12
  # database
13
  db:
14
    # ...

Writing a docker compose file for these services was quite straightforward, everything runs smoothly until I run the test suites. Selenium requires the chosen browser to be pre-installed in your system in order to perform the tests, however, not every docker image comes with a browser.

Solution

So there are two options:

1. Modify the Dockerfile of app to include the target browser
2. Use the Selenium official docker image

Whilst the first option can work, it might not be the most reusable and maintainable solution.

So here is the addition to the docker-compose.yaml file:

1
services:
2
  # ...
3
  # other services
4
  # ...
5

6
  # selenium firefox driver
7
  selenium-firefox:
8
    image: selenium/standalone-firefox
9
    shm_size: 2gb
10
    ports:
11
      - '4444:4444'
12
      - '7900:7900'
13
    restart: 'no'

The project is using LiveServerTestCase from the django.test package that automatically sets up a live development server on a random port, and the tests can make real HTTP requests to this server. Therefore, an important step for the end-to-end testing to work is to modify the host variable for any class using the LiveServerTestCase.

1
from django.test import LiveServerTestCase
2

3
class SeleniumAppTest(LiveServerTestCase):
4
  """
5
  Test my app!
6
  """
7

8
  host = 'app'

Since we are running tests inside the app container, we would like the Selenium to connect to the live development server on http://app:{random_port}.