top of page
90s theme grid background
Writer's pictureGunashree RS

Robot Eyes: Power of Visual Testing Automation

Updated: Sep 18

Introduction

In today's fast-paced software development environment, ensuring a flawless user interface (UI) experience across multiple devices, browsers, and screen sizes is crucial. However, traditional test automation tools often fall short when it comes to visual testing—enter "Robot Eyes," an integration of Applitools Eyes with Robot Framework that offers a revolutionary approach to visual test automation.


"Robot Eyes" allows you to automate the visual inspection of web and mobile applications, ensuring that your UI is pixel-perfect every time you deploy a new version. This guide will walk you through the steps of setting up and using "Robot Eyes" effectively, from initial installation to running complex visual tests.


Whether you're a QA engineer, developer, or anyone involved in the software delivery pipeline, understanding and implementing "Robot Eyes" will help you deliver a consistent and error-free user experience. So, let's dive deep into this powerful tool and learn how to elevate your visual testing game.



What is "Robot Eyes"?

"Robot Eyes" is a term that describes the integration of Applitools Eyes with Robot Framework, a popular open-source automation framework used for test automation. Applitools Eyes is a visual AI-powered testing tool that provides automated visual validation of your application's UI, ensuring that the appearance and layout are consistent across different environments.


Robot eyes

By integrating Applitools Eyes with Robot Framework, "Robot Eyes" enables you to automate the visual testing process, allowing you to detect visual defects, layout issues, and other UI inconsistencies that traditional test automation tools might miss.


Key Features of "Robot Eyes"

  • Automated Visual Validation: Validate the appearance of your application across different browsers, devices, and screen resolutions.

  • AI-Powered Testing: Leverage Applitools' AI to automatically detect visual differences that could impact the user experience.

  • Seamless Integration: Easily integrate with your existing Robot Framework tests to add visual checkpoints without disrupting your existing test suite.

  • Cross-Platform Support: Test web, mobile, and desktop applications across various platforms.

  • Efficient Regression Testing: Quickly identify visual regressions introduced by code changes, reducing the risk of bugs reaching production.



Why Visual Testing Matters

Visual testing is an essential aspect of quality assurance that focuses on the appearance and layout of the UI, rather than just the functionality. While traditional automated tests can validate the logic and functionality of an application, they often overlook visual aspects like:

  • Layout: Ensuring that elements are properly aligned and spaced.

  • Color: Verifying that colors render correctly across different devices.

  • Typography: Confirming that fonts and text sizes are consistent.

  • Responsiveness: Checking that the UI adapts correctly to various screen sizes and orientations.

These visual elements significantly impact the user experience, and any inconsistencies can lead to a poor perception of your product. "Robot Eyes" addresses these challenges by providing automated visual validation, ensuring that your application's UI remains consistent and visually appealing.



Setting Up "Robot Eyes"


Prerequisites

Before you can start using "Robot Eyes," you need to ensure that the following prerequisites are met:

  • Python: Ensure Python is installed on your machine. Robot Framework is built on Python, and you'll need it to run your tests.

  • Robot Framework: Install the Robot Framework using pip if you haven't already done so.

  • Applitools Eyes Account: Sign up for an Applitools account to get your API key.

  • WebDriver: Install the appropriate WebDriver (e.g., ChromeDriver) to run your Selenium-based tests.


Installing "Robot Eyes"

To integrate Applitools Eyes with Robot Framework, you'll need to install the EyesLibrary, a Robot Framework library that interacts with Applitools Eyes.


Install EyesLibrary:

bash

pip install eyes-robotframework

Initialize the EyesLibrary Configuration:

bash

python -m EyesLibrary init-config

Configuring "Robot Eyes"

After installing the necessary packages, you'll need to configure the EyesLibrary to connect to Applitools Eyes. This configuration is done using a YAML file.


Creating the Configuration File

The configuration file contains settings such as your Applitools API key, server URL, and various options for running your tests.


Generate the Configuration File:

bash

python -m EyesLibrary init-config

Edit the Configuration File: Open the generated YAML file and add your Applitools API key and server URL (if using a private server).

yaml

api_key: "YOUR_API_KEY"
server_url: "https://YOUR_COMPANY.applitools.com"

Setting Environment Variables

To authenticate with Applitools Eyes, you'll need to set your API key as an environment variable.


On Linux or Mac:

bash

export APPLITOOLS_API_KEY=your_api_key

On Windows:

bash

set APPLITOOLS_API_KEY=your_api_key

If you are using a private Applitools server, you should also set the server URL:


On Linux or Mac:

bash

export APPLITOOLS_SERVER_URL=https://your_company.applitools.com

On Windows:

bash

set APPLITOOLS_SERVER_URL=https://your_company.applitools.com

Creating and Running Tests with "Robot Eyes"

With the setup complete, you're ready to create and run your first visual test using "Robot Eyes."


Structure of a "Robot Eyes" Test

A typical "Robot Eyes" test follows this structure:


Open Eyes Session:

robot

Eyes Open app_name=YourAppName viewport=[1024 768] branch_name=MainBranch

Perform Actions: Use Robot Framework's SeleniumLibrary to interact with the application.


Check Visuals: Add visual checkpoints to validate the appearance of the UI.

robot

Eyes Check Window name=HomePage

Close Eyes Session:

robot

Eyes Close

Example Test Case

Here's an example of a simple "Robot Eyes" test:

robot

*** Settings ***
Library  SeleniumLibrary
Library  EyesLibrary  runner=selenium  config=applitools_config.yaml
Test Setup  Setup
Test Teardown  Teardown

*** Variables ***
${BROWSER}  Chrome
${URL}  https://example.com

*** Test Cases ***
Visual Test Example
    Open Browser  ${URL}  ${BROWSER}
    Maximize Browser Window
    Eyes Open app_name=ExampleApp viewport=[1024 768] branch_name=MainBranch
    Eyes Check Window name=HomePage
    Close Browser
    Eyes Close

*** Keywords ***
Setup
    Open Browser  ${URL}  ${BROWSER}
    Maximize Browser Window

Teardown
    Close Browser
    Eyes Close

Running the Test

To run the test, use the following command in your terminal:

bash

robot -t VisualTestExample path/to/your/test.robot

Viewing Test Results

After running the test, the results are available both in the Robot Framework console and the Applitools Test Manager.


In the Robot Framework Console

The console output will show whether the test passed or failed. If any visual differences are detected, a URL will be provided to view the details in the Applitools Test Manager.


In Applitools Test Manager

Click on the provided URL in the console output to view detailed results, including screenshots of the differences detected.



Best Practices for "Robot Eyes" Testing

To get the most out of "Robot Eyes," consider the following best practices:


1. Use Baseline Images Wisely

The first time you run a test, Applitools Eyes captures baseline images. On subsequent runs, it compares the new images against these baselines. Ensure your baseline images represent the intended UI state.


2. Handle Dynamic Content

Dynamic content (e.g., ads, timestamps) can cause false positives. Use the EyesLibrary's configuration options to ignore or mask these areas.


3. Leverage Branching

If you're working on different versions of the application, use the branch_name option to manage different baselines for each branch.


4. Integrate with CI/CD

Automate your visual tests by integrating "Robot Eyes" with your CI/CD pipeline. This ensures that visual testing is part of every build.


5. Monitor Performance

While visual testing is powerful, it can add to the test execution time. Monitor the performance of your visual tests and optimize where necessary.



Common Issues and Troubleshooting

Despite the power of "Robot Eyes," you might encounter some common issues. Here’s how to troubleshoot them:


1. Environment Variable Not Recognized

If the Applitools API key or server URL is not recognized, double-check that the environment variables are set correctly and restart your terminal or IDE.


2. Visual Test Failures

If a test fails due to visual differences, review the screenshots in Applitools Test Manager. If the differences are expected (e.g., after a UI update), update the baseline images.


3. Timeouts

Long-running tests can sometimes time out. Adjust the timeout settings in your configuration file to allow for more time, or optimize your tests to run faster.


4. Incorrect Element Selection

If your visual checks are not targeting the correct elements, verify that the selectors used in Eyes Check commands are accurate and unique.



Conclusion

"Robot Eyes" is a powerful tool for automating visual UI testing, providing robust visual validation to ensure that your application looks and behaves as expected across all environments. By integrating Applitools Eyes with Robot Framework, you can elevate your test automation strategy, catch visual bugs early, and deliver a consistent, pixel-perfect user experience.


Implementing "Robot Eyes" requires some initial setup and configuration, but the benefits it brings in terms of visual accuracy and UI consistency make it a valuable addition to your testing toolkit. Whether you're working on web, mobile, or desktop applications, "Robot Eyes" offers a scalable solution for ensuring that your UI remains flawless, even as your application evolves.


Start using "Robot Eyes" today and see the difference it can make in your software development lifecycle.



Key Takeaways

  • "Robot Eyes" integrates Applitools Eyes with Robot Framework for automated visual testing.

  • Visual testing ensures a consistent and error-free user interface across various platforms.

  • Setting up "Robot Eyes" involves installing EyesLibrary, configuring the YAML file, and setting environment variables.

  • Use baselines, branching, and dynamic content handling to optimize your visual tests.

  • "Robot Eyes" can be seamlessly integrated into CI/CD pipelines for continuous visual regression testing.



FAQs


1. What is Robot Framework?

Robot Framework is an open-source automation framework used for acceptance testing and robotic process automation (RPA). It supports keyword-driven testing and can be extended with libraries like SeleniumLibrary for browser automation.


2. What is Applitools Eyes?

Applitools Eyes is a visual AI-powered testing tool that automates the process of visual UI testing. It compares screenshots of your application's UI against baseline images to detect visual differences.


3. Why is Visual Testing Important?

Visual testing ensures that your application's UI looks correct across different browsers, devices, and screen sizes. It helps catch visual defects that could negatively impact the user experience.


4. How Do I Integrate Applitools Eyes with Robot Framework?

You can integrate Applitools Eyes with Robot Framework by installing the EyesLibrary, setting up a configuration file, and adding visual checkpoints to your Robot Framework tests.


5. Can I Use "Robot Eyes" for Mobile Testing?

Yes, "Robot Eyes" can be used for mobile testing by setting the appropriate runner in the EyesLibrary configuration. You can test native mobile applications and mobile web applications.


6. How Do I Handle Dynamic Content in Visual Tests?

You can handle dynamic content by using Applitools Eyes' configuration options to ignore or mask areas of the UI that change dynamically, such as ads or timestamps.


7. What Happens When a Visual Test Fails?

When a visual test fails, Applitools Eyes highlights the differences between the baseline and the current images. You can review these differences in the Applitools Test Manager and decide whether to update the baseline or investigate further.


8. How Do I Update Baseline Images?

To update baseline images, simply accept the current test results as the new baseline in the Applitools Test Manager. This will overwrite the old baseline with the new images.


9. Can I Use "Robot Eyes" in a CI/CD Pipeline?

Yes, "Robot Eyes" can be integrated into a CI/CD pipeline. By adding visual tests to your CI/CD pipeline, you can ensure that visual regression tests are run automatically with every build.


10. Is "Robot Eyes" Suitable for Large-Scale Projects?

"Robot Eyes" is scalable and can be used for large-scale projects. Applitools Eyes supports multiple baselines, branches, and environments, making it suitable for complex, enterprise-level applications.



Article Sources

Kommentare


bottom of page