An intro to Snapshot testing 📸

Oscar Antonio Duran Grillo — Sat, 25 Nov 2017 18:32:30 +0000

So, I’m in the way of making a new app and I would love to share all my learnings while I’m in the progress so I can keep my self-motivated and share some knowledge that hopefully, you can use for your owns apps.

🎨 Why to test the UI?

You want to make sure that every time you touch any of your UI elements everything stays as they way they were meant to be, also this kind of integration test help you achieve the pixel perfect views and make your designers happy by having design reference images that they can see even in your pull requests.

So you want to achieve pixel-perfect while making some nice tests?

⚡️ How does it work?

I'll try to describe how to use this method using my latest lib Snap.swift.

It works by generating a reference image that gets stored in your repository and then comparing each new test case with the reference image to check if there are any differences. If test found any differences it will add an attachment into your test case and you'll be able to check what changed

🛠 Configuration

In order to configure the snapshot test folder, we need to add a new environment variable to the project with name SNAP_REFERENCE_IMAGE_PATH and value $(SOURCE_ROOT)/$(PROJECT_NAME)Tests/ so Snap.swift can find the folder to store the reference images. If the configuration was correctly set the project should look like this:

🎯 Installation

Snap.swift is available through CocoaPods. To install
it, simply add the following line to your Podfile:

pod 'Snap.swift'

✅ Creating our first test

1) We first need to record our reference images, in order to do so we have to first go into our test class and set the isRecording variable to be true so the library knows that we are in record mode and can extract the reference images

import XCTest
import Snap_swift

class SnapTests: XCTestCase {

  override func setUp() {
    super.setUp()
    isRecording = true
  }

  func test_box_with_text_aligned_to_center() {
    let view = BoxWithTextAlignedToCenterView()

    expect(view).toMatchSnapshot()
  }
}

After executing out test suite if everything was ok we should see that all of our tests failed with a warning similar to

⚠️ Test ran in record mode, reference image has been saved to $SNAP_REFERENCE_IMAGE_PATH/testcase.png, now remove `isRecording` in order to perform the snapshot comparison.

This is ok, it just means that our reference images were saved, we can inspect them in our reference image directory, we should normally add these into git so we can compare against them.

⚠️ Warning

Remember to remove the isRecording flag after generating your reference images or you won't be able to do the image comparison

📝 Notes

As today, you can make assertions on UIView and CALayer classes.

The project is highly inspired on Facebook FBSnapshotTestCase library, it seems that they had archived the library so I started this one to continue envolving the project and continue with mobile snapshot-testing

There are other ways to test UI elements by using libs like KIF or EarlGrey by Google but I think this kind of snapshot test are more easy to maintain and one of the Snap.tests could be equal to many of the other frameworks.
If you have any doubts or questions you can reach me via Twitter and I’ll try to help you out.

Thanks you all and happy Snapshot testing 📸

Hi, I'm Oscar Antonio Duran Grillo

Oscar Antonio Duran Grillo — Wed, 22 Feb 2017 18:53:14 +0000

I have been coding for 7 years.

You can find me on GitHub as skyweb07

I live in Barcelona.

I work for Wallapop

I mostly program in these languages: Swift, Objective-C, PHP, Java.

I am currently learning more about Big Data, IA.

Nice to meet you.

DEV Community: Oscar Antonio Duran Grillo