Run GUI Test With Docker: Detect Web Page Loading Issues

how fast do your web pages load on the client side, 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 is 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 of this, my friend. but you might not have enough time.

good news! with container technology, things are much easier now. check out this short post. and give it a try now!

why do we need to care about web page loading issues?

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

(tip: 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 is it hard to achieve fast loading speeds, but it's also difficult to detect the potential issues:

1. the user experience may not the same among your visitors. driving you crazy, right?
2. the issue might not be easily reproducible. there could be instability in the external sources for the javascript or css files you download. there could be web caching, tricky firewall settings, or even bugs in the frontend/backend code.
3. it's functionally working. and the slowness in the 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 notices. you want that, do you?

web browsers usually provide useful developer tools

browser-based developer tools can help us to diagnose these kinds of issues.

take chrome for example. with chrome devtools [2] , we can easily detect:

1. how fast the web page loads (tip: remember to always clear 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, like in the below screenshot.

but this is a manual way.

how can you automate this process? and what's better? if you automate, you'll 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 using recursive downloading with typical command lines, like wget or curl. or using network packets sniffer tools, like tcpdump for tcp layer or justniffer for the 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 javascript 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 your web browser driver correctly setup, you can easily try the python code below.

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 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 .

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 can i run a gui test on my local machines?

• step1: install the docker daemon to your machines. super easy with docker docs [5] , right?.
• step2: run the below commands to perform a hello world 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 "http://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.

please leave me comments, if i'm too proud of this script.

(note about login pages that require credentials. yes, these do need some work. prs or input are warmly welcomed).

## sample:
##   - test page load: basic test
##        python ./selenium_load_page.py --page_url http://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 http://www.dennyzhang.com --max_load_seconds 5
##
##   - test page load: after page loading, save screenshot
##        python ./selenium_load_page.py --page_url http://www.dennyzhang.com --should_save_screenshot true

if you're a selenium ninja, you can definitely create your own test scripts. login to 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!

footnotes:

[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://docs.docker.com/manuals/

related reading:

• linux measure process execution time, when already started
• avoid using same ssh private key for all your servers

check our popular posts? discuss with us on linkedin , twitter or newsletter .