Run GUI Test With Docker: Detect Web Page Loading Issues

For good user experience[1], we should limit the load of landing page within 0.5 to 2 seconds.

(Tips: To test how fast your website loads from all over the world, use this free tool).

Unfortunately we have lots of technical challenges.

Not only hard to achieve that fast loading, but also difficult to detect the potential issues:

1. The user experience may not be equally the same among your visitors. Driving you crazy, right?
2. The issue might not be easy to reproducible. Instability of external sources for javascripts or css files download. Web caching, tricky firewall settings, or even bugs in frontend/backend code.
3. It’s functionally working. And slowness in client network misleads you. Consequently you overlook the issues, which hurt your users every single visit.
4. The list goes on…

As a serious IT professional, you want to be on top of these issues. And when it happens, you want to be notified before anyone even notice. You want that, do you?

It helps us to diagnose this kind of issues.

Take Chrome for example. With Chrome DevTools[2], we can easily detect:

1. How fast the web page loads.

   (Tips: Remember to always clean the web browser cache. Restarting web browsers may not be good enough, since some browsers have filesystem caching.)

2. Any 4XX or 5XX issues by checking Network tab in below.

But this is a manual way.
How to automate the process? And what’s better? Get alerted, if page loads start to take longer than before, or some new problematic network responses are captured.

At the first glance, I’m thinking about recursively download with typical command lines, like wget or curl. Or use network packets sniffer tools, like tcpdump for TCP layer or justniffer for http layer[3].

But they all turn out to be dead ends.

When opening a web page, we might need to interpret the html code and launch the implied http requests. Typically fetching javascripts and css files.

Selenium will launch a web browser and perform the GUI requests.[4]

Once you get Selenium and web browser driver correctly setup, you can easily try below python code.

from selenium import webdriver

driver = webdriver.Chrome()
p = driver.get('http://dennyzhang.com/')

# Save screenshot
fname = '/tmp/dennyzhang.png'
driver.get_screenshot_as_file(fname)

driver.close()

But the setup is tricky and dealing with selenium SDK, it takes time.

That’s why I’m in favor of the docker way.

Here I’ve released one open docker image in docker hub and github.
GitHub

It has everything you need to run a test against page loading:

1. Packages: selenium server, Chrome driver, python SDK
2. Scripts: selenium_loadpage.py, which runs the actual page loading tests.

How to run GUI test in my local machines?

• Step1: Install docker daemon in your machines. Super easy with docker doc[6], right?.
• Step2: Run below commands to perform a helloworld test case.

That’s it!

# Start selenium docker container
# docker stop selenium; docker rm selenium
mkdir -p /tmp/screenshot && chmod 777 /tmp/screenshot
docker run -d -p 4444:4444 -v /tmp/screenshot:/tmp/screenshot \
     -h selenium --name selenium denny/selenium:v1
docker ps

# wait for selenium service to be up and running
sleep 5

# Test page loading
docker exec selenium python selenium_load_page.py \
           --page_url "https://www.dennyzhang.com"

# Check generated screenshot
ls -lth /tmp/screenshot

# Destroy selenium container, after testing
docker stop selenium; docker rm selenium

selenium_loadpage.py should be able to solve most of your problems.

Please leave me comments, if I’m too proud of this script.

(Note: About login pages which requires credential. Yes, we do need some work. PRs or input are warmly welcomed.)

## Sample:
##   - Test page load: basic test
##        python ./selenium_load_page.py --page_url https://www.dennyzhang.com
##
##   - Test page load: if it takes more than 5 seconds, fail the test. Default timeout is 10 seconds
##        python ./selenium_load_page.py --page_url https://www.dennyzhang.com --max_load_seconds 5
##
##   - Test page load: after page loading, save screenshot
##        python ./selenium_load_page.py --page_url https://www.dennyzhang.com --should_save_screenshot true

If you’re selenium ninja, you can definitely create your own test scripts. Login the docker container and do whatever your want.

Please don’t forget to share this post to your QA or DevOps colleagues, if you think it’s helpful for your projects. Thanks, my friend!

[1] http://www.webdesignerdepot.com/2016/02/how-slow-is-too-slow-in-2016/
[2] https://developer.chrome.com/devtools
[3] http://justniffer.sourceforge.net/#!/examples
[4] http://docs.seleniumhq.org/projects/ide/
[5] https://hub.docker.com/r/denny/selenium/
[6] https://docs.docker.com/manuals/

Related Reading:

• Linux Measure Process Execution Time, When Already Started
• Avoid Using Same SSH Private Key For All Your Servers

Blog URL: https://www.dennyzhang.com/selenium_docker