Run GUI Test With Docker: Detect Web Page Loading Issues

How fast your web pages load on client sides, especially the portal or login pages? And how do you detect unexpected 302, 404 or 5XX responses. It would probably hurt your user experience or even the functionalities. Slow or problematic page loading are always bad.

Good, if you have examined that carefully. And most likely, with multiple unpleasant manual steps. The thing is how can you be so sure that it’s always good. Even with the endless code changes.

To automate the GUI test? You have to learn lots of GUI automation skills, and the complicated setup. Yes, I certainly believe you are capable for this, my friend. But you might not have enough time.

Good news! With container technology, things are way much easier now. Check out this short post. And have a try now!

Use Docker To Run GUI Test: Detect Web Page Loading Issues


For Impatient Users: please check the docker section directly.

Why We Need To Care About 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?

Web Browsers Usually Provide Useful Developer Tools.

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.

Use Docker To Run GUI Test: Detect Web Page Loading Issues

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 Turns Out To Be A Good Fit For GUI Automation.

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.

Have Fun With Docker!

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

Follow @dennyzhang

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

  1. Packages: selenium server, Chrome driver, python SDK
  2. Scripts: selenium_load_page.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[5], 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_load_page.py should be able to solve most of your problems.

Use Docker To Run GUI Test: Detect Web Page Loading Issues

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!

Leave a Reply

Your email address will not be published. Required fields are marked *