Run GUI Test With Docker: Detect Web Page Loading Issues
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?
Join the DZone community and get the full member experience.Join For Free
Jumpstart your Angular applications with Indigo.Design, a unified platform for visual design, UX prototyping, code generation, and app development.
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, 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:
- The user experience may not the same among your visitors. Driving you crazy, right?
- 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.
- 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, we can easily detect:
- 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).
- 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.
But they all turn out to be dead ends.
Selenium Turns Out To Be a Good Fit for GUI Automation
Selenium will launch a web browser and perform the GUI requests.
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!
It has everything you need to run a test against page loading:
- Packages: Selenium server, Chrome driver, Python SDK
- 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, right?.
- Step2: Run the below commands to perform a hello world test case.
# 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!
- Linux Measure Process Execution Time, When Already Started
- Avoid Using Same SSH Private Key For All Your Servers
Published at DZone with permission of Denny Zhang , DZone MVB. See the original article here.
Opinions expressed by DZone contributors are their own.