Web UI Testing Made Easy with Zalenium

Friday, July 21, 2017

I so far was always afraid to mess with UI tests and SeleniumHQ. Thanks to Zalenium, a dockerized "it just works" Selenium Grid from Zalando, I finally managed to start writing UI tests.

Zalenium takes away all the pain of setting up Selenium with suitable browsers and keeps all of that nicely contained within Docker containers (docker-selenium). Zalenium also handles spawning more browser containers on demand and even integrates with cloud-based selenium providers (Sauce Labs, BrowserStack, TestingBot).

To demonstrate how easy it is to get started I setup a little demo project (written in Python with Flask) that you can use for inspiration. The target application is developed and tested on the local machine (or a build agent) while the test browsers run in Docker and are completely independent from my desktop browser:

A major challenge for this setup is accessing the application that runs on the host from within the Docker containers. Dockers network isolation normally prevents this kind of access. The solution lies in running the Docker containers without network isolation (docker --net=host) so that the browsers running in Docker can access the application running on the host.

Prerequisites

First install the prerequisites. For all programming languages you will need Docker to run the Zalenium and Leo Gallucci's SeleniumHQ Docker containers.
For my demo project, written in Python, you will also need Python 3 and virtualenv. In Ubuntu you would

apt install python3-dev virtualenv.

Next you need to install the necessary libraries for your programming language, for my demo project there is a requirements.txt.

Example Application and Tests

A simple web application. It shows two pages with a link from the first to the second:

	""" A simple Flask app """
	from flask import Flask
	app = Flask(__name__)


	@app.route('/')
	def hello_world():
	return """<!doctype html>
	Hello, World!<br>
	<a href="/demo">Demo</a>
	"""


	@app.route('/demo')
	def demo():
	return 'Demo works'

view raw app.py hosted with ❤ by GitHub

The integration tests check if the page loads and if the link from the main page to the second page is present. For this check the test loads the main page, locates the link and clicks on it - just like a user accessing the website would do.

	from selenium import webdriver
	from selenium.webdriver.common.desired_capabilities import DesiredCapabilities
	from flask import Flask
	from flask_testing import LiveServerTestCase
	from urllib.error import URLError

	class IntegrationTest(LiveServerTestCase):

	@classmethod
	def setUpClass(cls):
	try:
	cls.driver = webdriver.Remote(
	command_executor='http://127.0.0.1:4444/wd/hub',
	desired_capabilities=DesiredCapabilities.CHROME)
	except URLError:
	print("ERROR: Need selenium grid at %s, please start Zalanium like this:\n" % huburl +
	"curl -sSL https://raw.githubusercontent.com/dosel/t/i/p \| env USE_NET_HOST=true bash -s start")
	exit(99)

	@classmethod
	def tearDownClass(cls):
	cls.driver.quit()

	def create_app(self):
	from app import app
	app.testing = True
	app.config['LIVESERVER_PORT'] = 0
	app.config['LIVESERVER_TIMEOUT'] = 10
	return app

	def test_main_view(self):
	driver = self.driver
	driver.get(self.get_server_url())
	driver.get_screenshot_as_file("out1.png")
	self.assertIn("Hello", driver.page_source)

	def test_follow_link(self):
	driver = self.driver
	driver.get(self.get_server_url())
	driver.get_screenshot_as_file("out2.png")
	try:
	driver.find_element_by_link_text("Demo").click()
	except BaseException:
	self.fail("Could not find link 'Demo'")
	driver.get_screenshot_as_file("out3.png")
	self.assertIn("works", driver.page_source)

view raw test_app.py hosted with ❤ by GitHub

Automate

To automate this kind of test we can simply start the Zalenium Docker containers before the actual test runner:

	#!/bin/bash
	set -e
	rm -Rf venv
	virtualenv -p python3 --no-site-packages venv
	source venv/bin/activate
	pip install -r requirements.txt
	zalenium=$(curl -sSL https://raw.githubusercontent.com/dosel/t/i/p)
	export USE_NET_HOST=true
	bash -s stop <<<"$zalenium"
	bash -s start <<<"$zalenium"
	nose2
	bash -s stop <<<"$zalenium"

view raw run-tests.sh hosted with ❤ by GitHub

This little script creates a new virtualenv, installs all the dependencies, starts Zalenium, runs the tests and stops Zalenium again. On my Laptop this entire process takes only 40 seconds (without downloading any Docker images) so that I can run UI tests locally without much delay.

I hope that these few lines of code and Zalenium will also help you to start writing UI tests for your own projects.

Search This Blog

Schlomo Schapiro