Selenium Example

This Python project is a project using Selenium to test an example webpage.

I wanted to test that a hand-rolled roll-over image map worked and then found I kept talking to people going through coding boot camps about testing websites. I would recommend that this is likely an out-moded process being I do not write in modern JavaScript frameworks like React, Bootstrap, HTMX, etc.

Webpage under test

The sample webpage is a bespoke, hand-written HTML page. Some axioms of the webpage's design can be found as a comment in it. See a running version of the webpage to play with it; see the silly JavaScript roll-over image map there to understand what kicked this Selenium project off.

Python test code

The project here is mainly a Python script which kicks off PyTest and uses Selenium to run some test cases on the webpage.

Slow Web Server

To provide a means for testing AJAX (in the end not used here), I use an artifically Slow Web Server. The Slow Web Server provides the following features:

• Can be throttled to emulate a slow link while testing locally
• See the BPS variable for the bytes per-second (note BPS in the era of modems were bits per-second -- a factor of eight slower)
• The webserver implements a Python Context Manager so one can use it with the wtih statemetnt for easy clean-up.

PyUnit Features Used

Some PyUnit features and design choices of the tests are:

• Capturing and presenting Python logging
• Creates PyTest fixtures (I probably should have used the built-ins for temporary directories, rather than rolling my own.)
• Parameterizes the test-cases
• A configurable HUMAN_WAIT_TIME to show tests moving through the webpage in a human-time for debugging

Selenium Features Used

Some Selenium features and design choices are:

• While not used here, for testing AJAX, a function is included is_element_visible_in_viewpoint which shows how one can use JavaScript in Selenium tests. Thanks to the author in StackOverflow Question
• Here only Firefox is used to test the webpage. Selenium supports many WebDrivers and Chrome or other browsers could be used.
• Artifically a 500 pixel by 500 pixel web browser window size is used. Playing with the web browser image size can affect the tests and of course webpage rendering too
• As I run in a Linux environment with /tmp not shared I have to create a temporary directory for Selenium to use

Test Cases

The PyUnit test cases leveraging Selenium perform the following simple checks:

• Find the roll over image
• Navigate to the right part of the image map using the HTML alt attribute for the image
• Make sure the image map changes to present the selected coffee
• Clicks the image map to go to the coffee's section of the webpage (using an HTML anchor)
• Takes and displays a screen shot of the final page navigated to
  • Many folks I've talked to have to do this manually when doing manual webpage tests (this could automatically do that and save them to a directory)

Running the Tests

One can run the test by following these steps (on most Linux distributions):

1. Ensure you have python3 and pip installed
2. Run pip install -r requirements.txt
3. Run python3 ./main.py
4. Go to https://github.com/mozilla/geckodriver/releases and install the geckodriver WebDriver to allow Selenium to talk to Firefox
5. Run python3 ./main.py and see the tests run