Skip to main content

Implementing UI tests on iOS and Android using screenshot comparison tools

Have you ever thought when writing or maintaining UI tests, there must be a better way?

Take a look at screenshot tests provided by Google Firebase and Facebook:

ios-snapshot-test-case
A "snapshot test case" takes a configured UIView or CALayer and uses the renderInContext: method to get an image snapshot of its contents. It compares this snapshot to a "reference image" stored in your source code repository and fails the test if the two images don't match.

GitHub Facebook

screenshot-tests-for-android
Testing rendering for your Android app is hard. How do you prevent visual regressions in paddings and margins and colors from creeping in?
Iterating on UI code is hard. How do you quickly verify that your layout or view changes work correctly in all configurations?

screenshot-tests-for-android can solve these problems by providing a test framework that checks for visual differences across changes.

GitHub Facebook

Google Firebase Test Lab
Test Lab lets you run Espresso, Robotium, or UI Automator 2.0 instrumentation tests written to exercise your app from the Firebase console, Android Studio, or the gcloud command line interface. You can also use Robo test to automatically exercise your app from the Firebase console or the gcloud command line.


Robo test captures logs, creates an "activity map" that shows a related set of annotated screenshots, and creates a video from a sequence of screenshots to show you the simulated user operations that it performed. Learn more about Robo test.

Firebase Test Lab

Firebase Test Lab for Android includes a library that you can use to take screenshots when running instrumentation tests, such as tests written using the Espresso test framework. To add this capability to your test, use the cloudtestingscreenshotter_lib.aar library.

The ability to take screenshots is already incorporated into the test APK, app-debug-test-unaligned.apk, for the NotePad sample app, and screenshots are also captured when you run Robo test. The following instructions tell you how to add the screenshot library to your app and how to call that library from your test.

After your test has run, you can review the screenshots in Android Studio or in the Firebase console.
Screenshot comparison screen

Firebase Take Screenshots

Another nice read:
How we make flaky UI Tests stable

Comments

  1. Hello Paul,

    I have created a tool to provide continuous visual testing for mobile apps called Sightr (https://www.sightr.io).

    It provides comparison based on screenshots generated by the UI tests and comments directly in a pull request or provide diffs info in the website.

    I have written a blog post to explain the approach: https://blog.sightr.io/visual-testing-for-ios-apps-spot-the-difference-63437c42013d

    And we have a Youtube channel with getting started videos: https://www.youtube.com/playlist?list=PLtJvI3LrMCfBUiuGy5V14HumPRgfRgqZY

    Let me know if you would like to find out more, we are running a beta at the moment and looking for feedback.

    Best,
    Bastien

    ReplyDelete
    Replies
    1. Salut Bastien,
      merci pour ta suggestion - je me demande, quel est-ce l'advantage de ta solution en comparer avec la solution de Facebook/Google?
      Best,
      Paul

      Delete
  2. This article is very much helpful and i hope this will be an useful information for the needed one.Keep on updating these kinds of informative things...
    iOS App Development Company
    Android App Development Company

    ReplyDelete

Post a Comment

Popular posts from this blog

Pattern: Riblets vs. VIPER

Engineering the architecture behind Uber's new rider app

Not being held back by our extensive codebase and previous design choices gave us the freedom where we otherwise would have made compromises. The outcome is the sleek new app you see today, which implements a new mobile architecture across both iOS and Android. Read on to learn why we felt the need to create this new architecture pattern, called Riblets, and how it helps us reach our goals.

The platforms share:

Core architectureClass namesInheritance relationships between business logic unitsHow business logic is dividedPlugin points (names, existence, structure, etc.)Reactive programming chainsUnified platform components
Each Riblet is made up of one Router, Interactor, and Builder with its Component (hence the name), and optional Presenters and Views. The Router and Interactor handle the business logic, while the Presenter and View handle the view logic.

Uber

Stetho - A Chrome debug bridge for Android applications

Stetho is a sophisticated debug bridge for Android applications. When enabled, developers have access to the Chrome Developer Tools feature natively part of the Chrome desktop browser. Developers can also choose to enable the optional dumpapp tool which offers a powerful command-line interface to application internals.

Facebook Github

WireMock

WireMock is a flexible library for stubbing and mocking web services. Unlike general purpose mocking tools it works by creating an actual HTTP server that your code under test can connect to as it would a real web service.

It supports HTTP response stubbing, request verification, proxy/intercept, record/playback of stubs and fault injection, and can be used from within a unit test or deployed into a test environment.

Although it’s written in Java, there’s also a JSON API so you can use it with pretty much any language out there.

WireMock.org