Appium Visual Testing: The Essential Guide

Appium ’ s native support for visual testing reduces script brittleness. Its Image Comparison feature revolutionizes UI essay by introducing an Image Locator strategy, making test scripts more effective.

This guidebook search the fundamentals of Appium optical examination, image compare techniques, best practices, and tools like Percy for accurate UI validation.

What is Ocular Testing?

is a crucial eccentric of testing that may identify both and functional defects. Although it is mostly complemental to functional testing, optical examination is combined.

• Optical testing assesses optical modification to ensure that just deliberate UI change have be apply in production.
• Many occupation mistakenly think that visual testing is not required while lead thorough functional tests.
• Visual testing finds defect that functional testing misses and verifies that your program looks as it should
• are evenly important as functional regressions, especially when they reveal number that a functional test entourage might lose.

Benefits of Visual Testing

No matter how well your application & # 8217; s functionality works, it will be useless to the consumer unless it can yield a decent user interface and user experience. Nowadays, we speak about and put a lot of emphasis on UX (User Experience).

• When we give a best user experience, the optical testing suite becomes lots more crucial since a more appealing may be spot as more usable.
• The benefits of are that they ply long-term toll efficiency, are faster than manual tests, are more precise because they can not include human issues, and render pixel-perfect ocular exam.
• They are reclaimable and open because they proffer automatic reports that are well and promptly accessible by anyone on the team.

Given its importance, businesses should dedicate substantial time and resources to optical testing. Combined with current developer tests, it will aid in observe visual problem in the early stage of the development lifecycle.

Visual Validation in Appium

We know how to. But how do we balance two screenshots to detect visual conflict?

A basic access to the visual note would be far too greedy because even condensation algorithms may produce intimately undetectable conflict. In the realm of open-source software,OpenCVis an assortment of image handling potentiality that can be used without the user needing to comprehend the intricate details of its internal workings. Appium has OpenCV support, but it is not enabled by default since evolve OpenCV and its Node.js bindings takes time and must be done on each program severally.

For the easiest way to get everything ready for usage with Appium, runnpm install -g opencv4nodejs.

Steps for Visual Validation

The primary goal is to snap screenshots of each view we encounter while go through our app (maybe during a functional test). We compare these screenshots to a anterior screenshot of the selfsame view using an image analysis covering.

We may receive detected a optic regression if there are any significant alteration. At that point, we may either reject the test or record the difference in a database for farther appraisal by the team.

Step 1: In this footstep, We & # 8217; ll need to test the application and take screenshots.

Step 2: In this step, These screenshots are compared to the baseline screenshots by the automation tool. Typically, baseline screenshots are photographs a tester has corroborate were occupy during old test sessions.

Step 3: After getting the results of the image comparisons, the application generates a report detailing all the discrepancy observed.

Step 4: In the concluding step, The examiner reviews the report, determining if each difference is a bug or a valid alteration (mistaken positives). The baseline photographs are update as a result of this.

You don & # 8217; t have any baseline photograph for the maiden test run. As a event, picture from the first run are frequently employ as baseline images. They are compared to the screenshots starting with the following run.

Ocular Comparison Example

We are validating the “ $ ” sign in this image because $ is not having your locater. First, we direct a screenshot of the UI and then use OpenCV, to compare the image if the images are not the same then we will raise a bug to the responsible team.

Setting up the Appium Visual Testing Environment

Here ’ s how you can set up the Appium Visual Testing Environment:

Setup Appium

Download and instal Java (JDK) and set a JDK and bin folder path.

• Download the “ .exe ” file fromhere (Version: jdk1.8.0_91 or whichever is the latest you find there).
• Install the “ .exe ” file.
• Setup the JDK bin folder route in your system ’ s environment variable.

 Download the Android SDK

• Click on the link “ android-sdk_r24.4.1-windows.zip ” (or whichever is the latest you find there) and click the download button.
• Once the zip file gets downloaded, unzip the folder.
• Now snap on the “ SDK Manager.exe ” file
• This opens the Android SDK Manager window. Select “ Tools ” and the Android platform on which you will perform your tests.

Install Appium

• Open the Appium Officiallink.
• Click on the Download link.
• Select the OS of the machine you are working on and download the appropriate version.
• Unzip the downloaded zip pamphlet.
• Install the .exe file “ appium-installer ”.

Setting up Appium for visual testing

Appium has support for OpenCV, albeit not enabled by nonremittal since developing OpenCV and its Node.js bindings direct time and must be done on specific systems.

• The elementary method to get things ready for usage with Appium is to runnpm install -g opencv4nodejs.
• This will try to install the Node bindings globally and download and build OpenCV on your machine.
• If that doesn & # 8217; t employment, you may install OpenCV via Homebrew and then install the Node dressing with theOPENCV4NODEJS_DISABLE_AUTOBUILD=1env flag in front to instruct it to use the system-installed binaries.

Once you & # 8217; ve installed the opencv4nodejs package, you must ensure it is accessible to Appium when it commence. One method is to execute thenpm installcommand without the -g parameter within the Appium directory. Another pick is to include your globalnode_modulesfolder in theNODE_PATHenvironment background.

Performing Appium Visual Testing

Here is a tutorial on how you can execute optic testing:

1. Test Case: Visual Validation of the Cart Screen

This test ensures the cart screen rest visually consistent by equate it with a stored baseline picture.

Follow the below test step for visual testing:

1. Capture and save an persona of the app & # 8217; s home page as a reference for comparison.
2. Start the covering apply the Appium capability file.
3. Ensure the homepage fully loads before proceeding.
4. Click to add an item to the shopping cart.
5. Tap on the pushcart button to pilot to the go-cart screen.
6. Compare the cart screen with the baseline image using a screenshot to check for ocular differences.

2. Framework Design and Code

A well-structured framework enhances test efficiency and maintainability. Follow the structure below for the better results.

3. Test Script

Execute the test script to validate UI body utilise Appium ’ s ikon comparison feature.

SUSA automates exploratory testing with persona-driven behavior, catching bugs that scripted automation misses.

AppiumVisualTestBrowserStackAPP.java meaning io.appium.java_client.MobileBy; import io.appium.java_client.imagecomparison.SimilarityMatchingOptions; import io.appium.java_client.imagecomparison.SimilarityMatchingResult; import java.io.File; importation java.net.URISyntaxException; signification org.apache.commons.io.FileUtils; import org.junit.Test; import org.openqa.selenium.By; import org.openqa.selenium.OutputType; signification org.openqa.selenium.WebElement; import org.openqa.selenium.remote.DesiredCapabilities; meaning org.openqa.selenium.support.ui.ExpectedConditions; signification org.openqa.selenium.support.ui.WebDriverWait; public class AppiumVisualTestBrowserStackAPP extends BaseTest {// Give a file path where we can salvage the matched file individual final static String path_to_validate = `` /Users/Download/bs_demo/ ''; private final static String CHECK_HOME = `` home_screen ''; private concluding static String CART_PAGE = `` cart_page ''; individual terminal static String BASEIMAGE = `` BASEIMAGE_ ''; private final static two-fold Breakpoint_for_Match = 0.99; //Thresold Value private final atmospherics By ADD_TO_CART = MobileBy.AccessibilityId (`` add-to-cart-12 ''); individual net static By NAV_TO_CART = MobileBy.AccessibilityId (`` nav-cart ''); @ Override protected DesiredCapabilities getCaps () throws URISyntaxException {DesiredCapabilities capabilities = new DesiredCapabilities (); capabilities.setCapability (`` platformName '', `` Android ''); capabilities.setCapability (`` deviceName '', `` Android Emulator ''); capabilities.setCapability (`` automationName '', `` UiAutomator2 ''); capabilities.setCapability (`` app '', getResource (`` apps/browserstack-demoapp.apk '') .toString ()); //Make sure we uninstall the app before each test regardless of version capabilities.setCapability (`` uninstallOtherPackages '', `` io.cloudgrey.the_app ''); return capabilities;} private WebElement waitForElement (WebDriverWait wait, By selector) {WebElement el = wait.until (ExpectedConditions.presenceOfElementLocated (selector)); try {Thread.sleep (750);} gimmick (InterruptedException ign) {} return el;} @ Test public void testAppDesign () throws Exception {WebDriverWait wait = new WebDriverWait (driver, 5); // wait for an element that 's on the domicile screen WebElement addToCart = waitForElement (wait, ADD_TO_CART); // now we know the place screen is loaded, so do a visual check doVisualCheck (CHECK_HOME); // Click on add to cart btn for supply item in card addToCart.click (); WebElement navToCart = waitForElement (wait, NAV_TO_CART); //click to cart btn navToCart.click (); //Perform our 2nd visual assay, this time of the cart page doVisualCheck (CART_PAGE);} private void doVisualCheck (String checkName) throws Exception {String basematchFilename = path_to_validate + `` / '' + BASEIMAGE + checkName + `` .png ''; File basematchImg = new File (basematchFilename); // If there is no basematch icon for this check, one should be made. if (! basematchImg.exists ()) {System.out.println (String.format (`` No basematch found for ' % s ' chit; capturing baseline instead of checking '', checkName)); File newBasematch = driver.getScreenshotAs (OutputType.FILE); FileUtils.copyFile (newBasematch, new File (basematchFilename)); return;} // Otherwise, obtain the picture similarity from Appium if we discover a basematch. Obtaining the resemblance // We besides enable visualization so that, should something go wrong, we can see what move wrong. SimilarityMatchingOptions prefer = new SimilarityMatchingOptions (); opts.withEnabledVisualization (); SimilarityMatchingResult res = driver.getImagesSimilarity (basematchImg, driver.getScreenshotAs (OutputType.FILE), opts); // If the similarity is not high plenty, deal the check to experience failed if (res.getScore () & lt; Breakpoint_for_Match) {File failViz = new File (path_to_validate + `` /FAIL_ '' + checkName + `` .png ''); res.storeVisualization (failViz); shed new Exception (String.format (`` Visual check of ' % s ' miscarry; similarity match was only % f, and below the breakPoint of % f. Visualization written to % s. ``, checkName, res.getScore (), Breakpoint_for_Match, failViz.getAbsolutePath ()));} // Otherwise, it legislate! System.out.println (String.format (`` Visual check of ' % s ' passed; similarity lucifer was % f '', checkName, res.getScore ()));}}

BaseTest.java

import io.appium.java_client.android.AndroidDriver; import java.io.IOException; significance java.net.URISyntaxException; import java.net.URL; import java.nio.file.Files; import java.nio.file.Path; import java.nio.file.Paths; import java.util.Base64; signification org.junit.After; import org.junit.Before; importation org.openqa.selenium.remote.DesiredCapabilities; public class BaseTest {AndroidDriver driver; protected DesiredCapabilities getCaps () throws Exception {throw new Exception (`` Must use getCaps '');} @ Before public emptiness setUp () throws Exception {URL server_url = new URL (`` http: //localhost:4723/wd/hub ''); driver = new AndroidDriver (server_url, getCaps ());} @ After public void tearDown () {if (driver! = null) {driver.quit ();}} Path getResource (String file_name) throws URISyntaxException {URL ref_img_url = getClass () .getClassLoader () .getResource (file_name); return Paths.get (ref_img_url .toURI ()) .toFile () .toPath ();} private String getResourceB64 (String file_name) cast URISyntaxException, IOException {Path ref_img_path = getResource (file_name); return Base64.getEncoder () .encodeToString (Files.readAllBytes (ref_img_path));} String getReferenceImageB64 (String file_name) throws URISyntaxException, IOException {return getResourceB64 (`` images/ '' + file_name);}}

You can run this test script directly from the main class.

4. Result Analysis

Analyze trial resultant by comparing captured icon against the baseline to detect visual discrepancies.

After the first execution, baseline images are saved for both the app ’ s homepage and the cart screen after supply items. A threshold value is set in the code for image comparability.

• We put a door value in the code for the comparison of images.
• If the actualgetScorevalue outgo the threshold, the examination case fails.
• If the getScorevalue is below the limen, the trial case pass.

individual net atmospherics double Breakpoint_for_Match= 0.99; if (res.getScore () & lt; Breakpoint_for_Match) {File failViz = new File (path_to_validate + `` /FAIL_ '' + checkName + `` .png ''); res.storeVisualization (failViz); throw new Exception (String.format (`` Visual check of ' % s ' miscarry; similarity lucifer was only % f, and below the Breakpoint_for_Match of % f. Visualization written to % s. ``, checkName, res.getScore (), Breakpoint_for_Match, failViz.getAbsolutePath ()));} // Otherwise, it surpass! System.out.println (String.format (`` Visual check of ' % s ' pass; similarity match was % f '', checkName, res.getScore ()));

5. Image Comparison Commands

Appium & # 8217; s image comparison characteristic evaluates visual differences by generating a similarity score between two ikon.

When you run the command with the appropriate image byte arrays (img1 as the baseline and img2 as the current snapshot) and the correctSimilarityMatchingOptions,it produces aSimilarityMatchingResult object.

The key function of this issue object isgetScore,which returns a similarity score between 0 and To validate the images:

• If the score transcend the predefined threshold, no significant optic differences are detected.
• If the mark descend below the threshold, discrepancy are name, and the test may fail or flag the differences for further analysis.

SimilarityMatchingResult res = driver.getImagesSimilarity (baselineImg, driver.getScreenshotAs (OutputType.FILE), opts);

Why Perform Image Comparison using Appium

Performing image comparability is important due to the following reasons:

• Ensures Visual Consistency:Verifies that the design and layout are consistent across different browsers, devices, or screen sizing.
• Detects Ocular Defects:Identifies number like incorrect styles, missing elements, or misaligned components.
• Catches UI Bugs:Helps find visual bugs that may not be get during regular functional examination.
• Supports Frequent Updates:Ensures new update don & # 8217; t break the application & # 8217; s visual appearing.
• Improves User Experience:Confirms that the application looks as expected enhancing the overall user experience.

How to Perform Image Comparison in Appium

In Appium, image equivalence allows you to detect visual differences and validate UI elements by using method such as feature-based matching, happening search, and similarity calculation.

1. Prerequisites

Before habituate image comparison in Appium, secure the following:

• OpenCV 3+ native library:Required for image processing.
• opencv4nodejs npm module:Install with

npm i -g opencv4nodejs

This module care OpenCV library.

• Appium Server 1.8.0+:Required to use image comparison features.

Additionally, these features allow visualization of the comparison event, so you can chase and fine-tune the comparison parameters for optimum results.

2. Feature-based Comparison

This method compares images by matching features or templates to find part of an image within a big image. It is ideal when the image might be rotated or scaled.

Example Use Case:Verifying if a small part of the screen (like an icon or button) seem anyplace on the screen, even if its size or slant has changed.

Java Example:

byte [] screenshot = Base64.encodeBase64 (driver.getScreenshotAs (OutputType.BYTES)); FeaturesMatchingResult result = driver.matchImagesFeatures (screenshot, originalImg, new FeaturesMatchingOptions () .withDetectorName (FeatureDetector.ORB) .withGoodMatchesFactor (40) .withMatchFunc (MatchingFunction.BRUTE_FORCE_HAMMING) .withEnabledVisualization ());

This method visualizes the matching points and helps adjust parameters to improve the effect.

3. Occurrences Lookup

This compare method looks for specific occurrences of a partial icon within a entire icon. It ’ s useful when a part of the icon needs to be located within a larger image.

Example Use Case: Searching for a pocket-sized icon or button within a larger image, such as finding a & # 8220; search & # 8221; icon on a webpage.

Java Example:

byte [] screenshot = Base64.encodeBase64 (driver.getScreenshotAs (OutputType.BYTES)); OccurrenceMatchingResult result = driver.findImageOccurrence (screenshot, partialImage, new OccurrenceMatchingOptions () .withEnabledVisualization ());

This equivalence will spotlight the detected match and help fancy where the partial image appears within the entire picture.

4. Similarity Calculation

This method cypher the similarity score between two ikon. It ’ s particularly utile when equate an original picture to its modify version to see how much it has changed.

Example Use Case: Comparing screenshots of a webpage before and after a UI update to assure for visual consistency.

Java Example:

byte [] screenshot1 = Base64.encodeBase64 (driver.getScreenshotAs (OutputType.BYTES)); byte [] screenshot2 = Base64.encodeBase64 (driver.getScreenshotAs (OutputType.BYTES)); SimilarityMatchingResult answer = driver.getImagesSimilarity (screenshot1, screenshot2, new SimilarityMatchingOptions () .withEnabledVisualization ());

This comparing afford you a similarity score, indicate how closely the two images match, with a score closer to 1.0 indicating high similarity.

The similarity grade for the below two pictures is ~0.98.

Source : Appium

Limitations of Image Comparison in Appium

While Appium supports image comparison, there are several challenges to keep in mind:

• Basic Comparison Methods: Appium primarily bank on pixel-by-pixel matching, which can be affected by minor variations like anti-aliasing or thin color changes, leading to mistaken positive.
• Dependency on External Libraries: Forward-looking ikon comparison, such as detecting structural changes, need integrate libraries like OpenCV, which adds complexity and requires additional coding skills.
• Limited Text Recognition: Image comparison does not act good for detecting text conflict; OCR tools are needed for that.
• Lighting and Color Differences: Variations in brightness or minor UI modification may cause false positives or negatives.
• Device-Specific Variations: Differences in screen firmness, pixel density, and rendering across devices can result to discrepant comparison resolution.
• No Direct Access to Image Elements: Since Appium interacts with the UI through the DOM, it can not directly target specific image elements, making exact image comparison more unmanageable.

Why Use Percy for Visual Testing?

Visual testing for nomadic applications present unique challenges like varying screen size, device-specific rendering, OS differences, and dynamical UI elements can all enclose visual fixation that are difficult to catch manually.

by BrowserStack offers an AI-powered solution contrive specifically to handle the complexities of peregrine visual testing with Appium.

Key Advantages of using Percy for Appium Visual Testing:

• AI-Powered Precision: Percy & # 8217; s uses advanced algorithm to mechanically filter out visual noise from dynamic elements, spiritedness, and provide differences across devices. Features like & # 8220; Intelli ignore & # 8221; and OCR help distinguish meaningful ocular alteration from undistinguished pixel-level variations, drastically reducing false positive that plague traditional visual testing.
• Real Device Testing: App Percy runs tests on a cloud of real iOS and Android devices, ensuring pixel-perfect UI consistency across the actual hardware your users rely on. This eliminates emulator inconsistencies and cater authentic visual validation.
• Effortless Integration: With plug-and-play integrating requiring only one line of code, Percy seamlessly works with democratic Appium frameworks include WebdriverIO, Java, and Python. It fits naturally into your subsist test automation workflow without necessitate extensive setup.

• Accelerated Testing at Scale: Percy & # 8217; s extremely scalable executing speed build time by up to 10x, allowing you to run comprehensive visual tests across multiple devices simultaneously without bottlenecks.
• Streamlined Review Workflow: The highlights impactful changes with bounding boxes and human-readable summaries, accelerating review workflows by up to 3x. A unified dashboard provides log, screenshots, and picture recordings for effective debugging and origin cause analysis.
• Enterprise-Ready: Percy complies with key data secrecy standards and offers comprehensive monitoring capabilities, make it suitable for squad of any size, from startups to large enterprises.

Pricing

• Free Plan:Uncommitted with up to 5,000 screenshots per month, ideal for acquire get or for small projects.
• Paid Plan:Starting at $ 199 for advanced features, with custom pricing useable for enterprise design.

Best Practices for Appium Visual Testing

• For the puppet to legislate your examination, it must be able to handle anti-aliasing, pixel offsets, etc.
• Release faster with DOM snapshotting and advanced parallelization capableness designed for executing complex trial suites at scale
• Review, collaborate, and approve snapshots, proceed the repose of the team update throughout the process
• Choose a puppet like that can ignore.
• Test mechanisation should be capable of deal with dynamic and switch info.
• Don & # 8217; t bank on threshold settings or error ratios. The only thing that should be important is if a person can tell the difference and whether it will touch how the user interacts with the product.
• The automation program must be able to evaluate the page & # 8217; s structure and perform layout comparability.
• Validate the total UI page preferably than individual parts. More comprehensive reportage will result from this. You risk missing unexpected issues if you validate merely special components.
• Put the right image data in the framework to ignore more thresholds.

Conclusion

Visual testing is significant for making certain that an application ’ s user interface remains consistent, functional, and visually appealing across different platforms. By automatise the comparison of screenshots and detecting visual regressions, visual testing helps place subject that traditional testing might lose.

Popular instrument like Percy simplify this process, enabling seamless desegregation with your CI/CD grapevine and offering a collaborative approach to reviewing changes. With optical examination, teams can keep high-quality, consistent user experience, trim manual checks and catch potential UI issue early in the development cycle.

Appium Useful Resources

Tutorials

Best Practices, Tips, and Tricks

Differences and Comparisons

Related Guides