Image Comparison:

Empowering Automated Visual Testing Introduction Appium, an open-source mobile testing framework, has gained significant popularity for its ability to automate mobile app testing across various platforms. While Appium primarily focuses on functional testing, it also offers a powerful feature called image comparison, enabling developers and testers to automate visual testing and ensure consistent app appearance and behaviour across different devices and platforms. In this blog, we will explore how Appium's image comparison capabilities empower automated visual testing and enhance the quality of mobile applications.

Purpose:

Image comparison might be handy for many automation tasks. For example: - It is necessary to figure out whether the given picture example is present on the screen - It is necessary to calculate coordinates of some predefined on-screen object - It is necessary to verify whether the current on-screen object state is similar to the expected state

Understanding Image Comparison in Appium

Image comparison in Appium involves comparing screenshots of an application's user interface (UI) taken at different stages of testing. By capturing screenshots during test execution and comparing them against reference images, Appium allows for the detection of visual discrepancies, such as UI layout issues, missing elements, or unintended visual changes. Key Benefits of Image Comparison in Appium Accuracy and Precision: Image comparison in Appium provides a high level of accuracy and precision. It can detect even subtle visual differences, such as changes in pixel colours, element positions, or sizes. This ensures that the UI elements of an application are rendered correctly across different devices, resolutions, and operating systems.

Advantages :

Regression Testing: Automated image comparison plays a crucial role in regression testing. By comparing screenshots captured during each test run against a set of baseline images, Appium can identify any visual regressions caused by code changes or updates.
This helps prevent UI defects from going unnoticed and ensures consistent user experience throughout the development lifecycle.

Cross-Platform Compatibility: Mobile applications need to run seamlessly on various platforms, including iOS and Android. Appium's image comparison allows developers to test and compare UI elements across different operating systems and versions. This cross-platform compatibility ensures that the app's visual appearance and behaviour remain consistent for all users.

Time and Effort Savings: Manually comparing app UIs across different devices and platforms is a time-consuming and error-prone task. Appium's automated image comparison eliminates the need for manual inspection and significantly reduces the effort required for visual testing. By automating this process, developers and testers can focus more on critical aspects of app development and quality assurance.

Implementing Image Comparison in Appium:

To utilize image comparison capabilities in Appium, follow these general steps:

1.Set Up Appium: Install and configure Appium on your testing machine, ensuring that you have the necessary dependencies and drivers for the target platforms (e.g., Android SDK, Xcode for iOS).

2.WebDriverAgent is an iOS WebDriver server provided by Facebook that can be used to
remotely control iOS devices.

3. WDA is a WebDriver-compatible server that runs in the context of an iOS simulator or device and exposes the XCUITest API.

Basically after 30-40 tests execution everything stops. We do not get the exact error but the run remains in a state where local host in no longer recognized.
Error: Unable to launch WebDriverAgent because of XCode build failure: XCode build failed with code 65

https://github.com/facebookarchive/WebDriverAgent/issues/507

Brief Solution :

The approach here is to enable full control over how WDA is built, managed, and run on the device. This way we may fine-tune our automated tests in CI environment and make them more stable in long-running perspective.

Here along with calling the default capabilities we also call WebDriver related capabilities.
And rather than creating a session with capabilities and URL (host + port) we start session by only driver capabilities.

But for host and port details we will pass them from capabilities itself. capabilities.setCapability("webDriverAgentUrl", WDAServer.SERVER_URL);

Now the server will do everything for us, however we won't have so much control over WDA.

To perform image comparison using Appium in Java, you can follow these steps:

1. Set up your Appium project and ensure you have all the necessary dependencies configured in your Java project.

2. Make sure you have the OpenCV library added to your project. You can do this by adding the following Maven dependency to your pom.xml file: 

3. Import the necessary packages in your Java file:

4. Capture the screenshots of the images you want to compare using the Appium driver:

5. Load the images using OpenCV:

6. Resize the images to a common size (if necessary)

Project Details and Solutions :

1. WebDriverAgent source is automatically downloaded with Appium. The usual folder location in case Appium is installed via npm tool (npm install -g appium) is /usr/local/lib/node_modules/appium/node_modules/appium-webdriveragent

2. In order to make sure that WDA source is configured properly:
Open /usr/local/lib/node_modules/appium/node_modules/appium-webdriveragent/WebDriverAgent.xcodeproj in Xcode
Select WebDriverAgentRunner project
Select your real phone/Simulator you'd like to run automated tests on as build target
Select Product->Test from the main menu

XCode should successfully build the project and install it on the real device/Simulator, so you'll see the icon of WebDriverAgentRunner application on the springboard.

3. Add a check if the session is running and if not kill the session and restart the session
call this piece of code before to start Appium iOS driver, for example, in setUp method:
 
if (!WDAServer.getInstance().isRunning()) {
    WDAServer.getInstance().restart();
  }
It is important to set webDriverAgentUrl capability for Appium driver to let it know that our WDA driver is ready for use:
 capabilities.setCapability("webDriverAgentUrl", WDAServer.SERVER_URL);

Improve Project execution efficiency :

Define Baseline Images: Capture and save reference screenshots of the app's UI elements, representing the expected appearance.

Capture Screenshots during Tests: Incorporate Appium's screenshot functionality into your test scripts. Take screenshots at specific test checkpoints or after interacting with UI elements.
Compare Screenshots: Utilize image comparison libraries or tools compatible with Appium, such as OpenCV or Image Magick. Compare the captured screenshots against the baseline images, highlighting any visual differences or regressions.

Analyze and Report: Review the results of the image comparison and analyze any discrepancies. Generate reports that clearly indicate the detected differences for further investigation and debugging.
Best Practices for Appium Image Comparison To ensure effective and accurate image comparison in Appium, consider the following best practices: Define Clear Baseline Images: Take reference screenshots on devices and platforms representative of the target audience to establish accurate baselines. Update baseline images whenever intentional UI changes occur.

Handle Dynamic Content: Account for dynamic content, such as date/time or user-specific information, by excluding or masking these elements during image comparison to focus on the critical UI components.
Tolerate Expected Differences: Define an acceptable tolerance level for visual differences, as some variations may be intentional due to device