Today, Applitools is enabling teams to validate user interface (UI) components by creating automated tests with visual checkpoints through testing frameworks like Selenium, Appium, Espresso, and more.
Software testers once took visual validation for granted when manually testing apps. As teams moved forward with automated testing, the visual validation of UI components quickly faded away in the background.
Now, with groundbreaking automated UI validation from Applitools Eyes, we can validate UI components again.
Why do we need visual checkpoints?
Without visual inspections, there is no way to know that a UI component has broken when developers commit UI changes by using existing automated functional end-to-end test suites. We need to be proactive and continue to seek ways to move faster to keep up with the changes to ensure we are building quality checks into our applications. The time is now to stop pushing unintended visual bugs to production so that the user experience isn't affected. And Applitools is an automated visual testing solution that automatically validates all the visual aspects of web, mobile, and desktop apps.
Here is a small checklist to reference when defining visual test coverage:
Each UI component appears in the right color, shape, position and size
Ensure that a component doesn’t hide or overlap any other UI elements
Verify that the graphic user interface (GUI) appears correctly across multiple platforms, devices, browsers, and screen resolutions.
No broken images
Let's review adding visual tests to our existing automated tests by using Applitools Eyes SDKs, and integrating with Sauce Labs.
Enabling Applitools (visual testing) is easy
The setup of Applitools is simple. You need to open a free account, select the automation environment (Selenium), and install the Applitools SDK by selecting the preferred programming language (Ruby). Go to Applitools tutorials to give it a try!
Open Terminal (Unix/Linux)
$ gem install eyes_selenium
We are ready to write our first visual tests from scratch or add to our existing Ruby and Selenium.
Code Snippet from Applitools Tutorial
require 'eyes_selenium'
eyes = Applitools::Eyes.new
# This is your api key, make sure you use it in all your tests.
eyes.api_key = $APPLITOOLS_API_KEY
# Get a selenium web driver object.
my_webdriver = Selenium::WebDriver.for :firefox
begin
# Start visual testing using my_webdriver and setting the viewport to 1024x768.
eyes.test(app_name: 'USAToday', test_name: 'USA Today',
viewport_size: {width: 1024, height: 768}, driver: my_webdriver) do |driver|
driver.get 'http://www.usatoday.com'
# Visual validation point #1
eyes.check_window('Front Page')
end
ensure
my_webdriver.quit
end
Running your visual tests on Sauce Labs and analyzing the testing results
We can run the Selenium tests with visual checkpoints on any browser and operating system (OS) using Sauce Labs. After running a test for the first time, it will automatically save a screenshot as a baseline for future test runs on Applitools. The next test run will compare the screenshot with the baseline. Let's review the results!
The only challenge is manually analyzing the test results when a screenshot has been marked with a visual difference. Yes, this is a manual check, but it is still faster than manually executing your entire functional test suite every time a pull request (PR) is created.
The benefit of adding visual checkpoints to our existing automated tests is that we can validate both functional end-to-end and visual components at the same time.
Conclusion
The objective of visual testing is to catch unintended visual bugs before they are pushed to production, and affect the user experience. Teams need to continue to explore new testing approaches to increase test coverage—and most importantly, take pressure off of manual testing to move faster and more accurately. By enabling Applitools and integrating Sauce Labs into your test automation ecosystem, your team will release faster, with confidence, and provide a flawless UI.
Greg Sypolt (@gregsypolt) is a Senior Engineer at Gannett – USA Today Network and co-founder of Quality Element. He has spent most of his career working as a developer in test— concentrating on automated testing for web browsers, APIs, mobile, and more. He is focused on the research, creation, and deployment of automated test strategies, testing frameworks, tools, and continuous integration. Passionate about #TestAutomation #TestCoverage #ContinuousIntegration #DevOps
