Django and Selenium unit tests

4 min readOct 28, 2018

Selenium is a project which aim is to test site with webdriver. All most popular browser has to develop webdriver which allowed to write a script which will automate interaction between browser and script. Selenium environment contains 2 project selenium WebDriver and Selenium IDE.

For the beginner with the unit test it good to start from Selenium IDE it plugin to Chrome or Firefox which allowed us to record what is done on site. Let’s suppose we want to test the login page to our project all that we need to do is to add a plugin to Chrome. Click on plugin icon in right top corner of the browser and in IDE click on create a test. Then all you need to do is to choose url where the test will be done and from this moment all that you will do on site is recorded. When you finish recording you can play the test and see all interaction which you do with a browser. It’s good when you develop the site and recording all test . When the site is finished you have many tests for interaction with the browser and can focus on writing code.

When we understand the power of creating testing. Next step is to create a test in our project. Let’s start Django project and add to test.py new test synchronizes with selenium.

In project, we will use pipenv when you don’t have it pip install pipenv.

Command in a prompt to create the project:

mkdir selenium
cd selenium
pipenv shell
pipenv install django==2.1
pipenv install selenium
django-admin startproject seleniumProject .
python manage.py startapp authApp
python manage.py migrate
python manage.py createsuperuser

This will create a basic structure for our project.

In file seleniumProject/settings.py add:

seleniumProject/settings.pyINSTALLED_APPS = [
'authApp',                       #<--- add app to project
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
]LOGIN_REDIRECT_URL = 'home'      #<--- add login redirect
LOGOUT_REDIRECT_URL = 'home'     #<--- add logout redirect

In file seleniumProject/urls.py add:

seleniumProject/urls.pyfrom django.contrib import admin
from django.urls import path, includeurlpatterns = [
path('admin/', admin.site.urls),
path('accounts/', include('django.contrib.auth.urls')),
path('', include('authApp.urls')),
]

In authApp create file urls.py and add:

authApp/urls.pyfrom django.urls import path
from .views import HomePageViewurlpatterns = [
path('', HomePageView.as_view(), name='home'),
]

In file authApp/views.py add:

authApp/views.pyfrom django.views.generic import TemplateViewclass HomePageView(TemplateView):
  template_name = 'home.html'

In file tests.py add:

authApp/tests.pyimport os
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
os.environ["PATH"] += os.pathsep + os.path.join(BASE_DIR,'/gecko')
from django.test import LiveServerTestCase
from selenium import webdriver
from selenium.webdriver.common.keys import Keys
class AccountTestCase(LiveServerTestCase):
  def test_login(self):    driver = webdriver.Firefox()
    driver.get('http://127.0.0.1:8000/accounts/login/')    username = driver.find_element_by_id('id_username')
    password = driver.find_element_by_id('id_password')
    submit = driver.find_element_by_tag_name('button')
    username.send_keys('superusername')
    password.send_keys('superuserpassword')
    submit.send_keys(Keys.RETURN)

In folder authApp create templates folder in it file home.html than in templates folder add registration folder and in it add login.html.

In file home.html add:

authApp/templates/home.html<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>Selenium</title>
</head>
<body>
<h1>Selenium</h1>
{% if user.is_authenticated %}
{{ user.username }}
<a href="{% url 'logout' %}">logout</a>
{% else %}
<a href="{% url 'login' %}">login</a>
{% endif %}
</body>
</html>

In file login.html add:

authApp/templates/registration/login.html<h2>Log in</h2>
<form method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit">Log in</button>
</form>

In this point, we have the basic structure with build in authentication login view.

Next step is to install webdriver from Mozilla source:

In selenium folder create folder gecko and put in a file from the last release:

https://github.com/mozilla/geckodriver/releases

The last thing is to start 2 commands prompt one with localserver and the second one with our tests :

python manage.py runserver
python manage.py test

When all goes well the browser should open automatically and login superuser.

When you are not interested in creating a project be your own. Here is a link to the repository but must add migration and create superuser on your own. Than change username and password in authApp/tests.py on your superuser credentials. And download gecko webdriver link is in the last section of tutorial and add it to gecko folder in the main directory.

git clone https://github.com/Tetsumote/selenium.git

I hope you will like unit tests and here are a few useful links:

Written by Pawel Grajewski