Run your first Automated Test for Hugo with Selenium, Python and Chrome

I’ve been reviewing automated testing tools I previously used, to discover what I can use for Hugo. Automated testing fits in well with Hugo along with automation of the build and site deployment. Using Selenium IDE (a browser extension / screen recorder) you can first record the test case and then when development is finished, you just run the automated test. If the test automation completes without errors - then you can say thanks for a job well done.

One of the great things with Hugo is the Auto Reload function when the server is running locally - if anything is broken, the server generates an error for you to fix. But what about checks before the site is published? What do you click around and check? Wouldn’t it be great if you could automate that and reduce your manual efforts

Say hello to Selenium.

In this guide you will …

• Install Selenium, web drivers and relevant Python test packages
• Write your first Selenium Python test case
• Run pytest and with confidence complete an automated tests

Just also recognise - if Python isn’t your thing Selenium also does Java, Ruby and other languages. I chose Python because I found it easy to read.

Getting Started - Tools and Packages

If you have missed my articles to get started on testing … that’s ok - But make sure you have Homebrew on your machine.

From the terminal …

brew install Python

If you have a Mac you may now have Python 2 and Python 3 on your machine, that’s ok. From now on we will always use Python3

Then … let’s add the web drivers - these control the browsers:

1
2

brew cask install chromedriver
brew cask install geckodriver

You need both browsers on your machine

Install Selenium and Python Packages

1
2
3

pip3 install -U selenium
pip3 install -U pytest
pip3 install -U pytest-html 

Note

• Pip3 is the Python3 Package Manager
• Pytest is a test framework for Python
• Pytest-html is plugin that generates an HTML report for the test results

Basic Python Selenium Test with Pytest

This is a very basic test that

1. opens Chrome
2. saves the Title of the Page
3. takes a screenshot
4. does the same in Firefox

So…

1. Open your Code / Development Environment
2. Copy/paste the code below
3. Change the highlighted lines to your website and then
4. Save the file .. ideally to /tests/test_selenium_basic_.py

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44

# Import the 'modules' that are required for execution
import pytest
import pytest_html
from selenium import webdriver
from selenium.webdriver.chrome.options import Options
from selenium.webdriver.common.keys import Keys
from time import sleep

	#Fixture for Firefox
	@pytest.fixture(scope="class")
	def driver_init(request):
    	ff_driver = webdriver.Firefox()
	    request.cls.driver = ff_driver
	    yield
	    ff_driver.close()

	#Fixture for Chrome
	@pytest.fixture(scope="class")
	def chrome_driver_init(request):
	    chrome_driver = webdriver.Chrome()
	    request.cls.driver = chrome_driver
	    yield
	    chrome_driver.close()

	@pytest.mark.usefixtures("driver_init")
	class BasicTest:
	    pass
	class Test_URL(BasicTest):
	        def test_open_url(self):
	            self.driver.get("https://damien.co/blog")
	            print(self.driver.title)
	            self.driver.save_screenshot("/tests/ff_screenshot.png")
	            sleep(5)


	@pytest.mark.usefixtures("chrome_driver_init")
	class Basic_Chrome_Test:
	    pass
	class Test_URL_Chrome(Basic_Chrome_Test):
	        def test_open_url(self):
	            self.driver.get("https://damien.co/blog")
	            print(self.driver.title)
	            self.driver.save_screenshot("/tests/chrome_screenshot.png")
	            sleep(5)

Note

• you need both browsers installed or this will fail

Run your First Pytest Selenium Test

Go to terminal

1
2

cd <Hugo>/tests
pytest --html=report.html

Pytest runs all .py files in the directory … or you can be specific

pytest test_selenium_basic.py --html=report.html

All going well you’ll first see Firefox open and then Chrome. After which, your terminal will show:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10

======================================================== test session starts =========================================================
platform darwin -- Python 3.8.3, pytest-5.4.3, py-1.8.2, pluggy-0.13.1
rootdir: /Users/damien/dev/www-damien/tests
plugins: metadata-1.9.0, html-2.1.1
collected 2 items                                                                                                                    

test_ff_ch.py ..                                                                                                               [100%]

----------------------------- generated html file: file:///Users/yourname/dev/hugo/tests/report.html --------------------------------
========================================================= 2 passed in 22.24s =========================================================

And if you view the test report …

Use Selenium IDE to record tests then export to Python

If you’re not much of a coder … and want to explore more options of testing - you can record your tests in Selenium and then save them as Python tests scripts … which is awesome

Test and Go

So now …

1. Save the file - for consistency, test cases are always saved under /tests/
2. Commit your files to Git
3. Run the test
4. Relax knowing you’re site is in good hands

Linkage

• Readthedocs - Pytest Selenium
• Lambdatest

Meet the author

Damien Saunders
An experienced management consultant and business leader interested in digital transformation, product centred design and scaled agile. If I'm not writing about living with UCTD (an autoimmune disease), I'm probably listening to music, reading a book or learning more about wine.
Find our more about me.