Comparing Screenshots in XCTest with Applitools
The Applitools Eyes Images SDK allows you to easily add visual checkpoints to your XCTest and XCUI based unit tests, in Swift and Objective-C. It takes care of images given by the user, sending them to the Eyes server for validation and failing the test in case differences are found.
Install the SDK
Using Swift Package Manager
In Xcode, select File > Add Packages... then add the GitHub URL of EyesImages
:
https://github.com/applitools/eyes-images-swift-package.git
Using CocoaPods
Add EyesImages
to your podfile
target ‘YOUR_APPLICATION_TARGET_NAME’ do
target ‘YOUR_UNIT_TESTING_TARGET_NAME’ do
pod 'EyesImages'
end
end
Run your first test
Applitools Eyes reports differences by comparing screenshots of your application with baseline images that define the expected appearance of the application at each step of the test. The user should specify the environment (OS and application under test), and the Eyes SDK will automatically set the viewport size based of the size of the image being tested. It will then compare the screenshots against baseline images that are specific to that environment. The first time you run a test in a given environment, its screenshots will be automatically saved as its baseline. Starting from the second run onward, you always have a baseline to compare against.
The test below is a simple XCTest function that visually validates an image of the main screen of our example app, "HelloWorld". It consists of a single visual checkpoint. The first time you run this test a new baseline will be created, and subsequent test runs will be compared to this baseline. If any screenshot mismatch its baseline image in a perceptible way, eyes.close()
will throw a DiffsFoundException
which includes a URL that points to a detailed report where you can see the detected differences and take appropriate actions such as reporting bugs, updating the baseline and more.
Before running the test, make sure to set the API key that identifies your account in the environment variable APPLITOOLS_API_KEY
or directly assign it to the eyes.apiKey
property. You can find your API key under the user menu located at the right hand side of the test manager toolbar. If you don't yet have an account create it now to obtain your key.
- Swift
- Objective-C
import EyesImages
func testExample() throws {
// Initialize the eyes SDK and set your private API key.
let eyes = Eyes()
eyes.apiKey = <#YOUR_API_KEY#>
// Start the test
eyes.open(withApplicationName: "Hello World iOS", testName: "iOS Screenshot test!")
// Create image
let view = try XCTUnwrap(UIApplication.shared.windows.last(where: \.isKeyWindow))
let format = UIGraphicsImageRendererFormat(for: .init(displayScale: 1))
let image = UIGraphicsImageRenderer(bounds: view.bounds, format: format).image {
view.layer.render(in: $0.cgContext)
}
// Visual validation.
eyes.check(image, tag: "Main Screen")
// End visual testing.
try eyes.close()
}
@import EyesImages;
- (void)testExample {
// Initialize the eyes SDK and set your private API key.
Eyes *eyes = [Eyes new];
eyes.apiKey = @"<#YOUR_API_KEY#>";
// Start the test
[eyes openWithApplicationName:@"Hello World iOS" testName:@"iOS Screenshot test!"];
// Create image
NSPredicate *isKeyWindow = [NSPredicate predicateWithFormat:@"isKeyWindow == YES"];
UIView *view = [UIApplication.sharedApplication.windows filteredArrayUsingPredicate:isKeyWindow].lastObject;
UIGraphicsImageRendererFormat *format = [UIGraphicsImageRendererFormat new];
format.scale = 1;
UIGraphicsImageRenderer *renderer = [[UIGraphicsImageRenderer alloc] initWithBounds:view.bounds format:format];
UIImage *image = [renderer imageWithActions:^(UIGraphicsImageRendererContext *context) {
[view.layer renderInContext:context.CGContext];
}];
// Visual validation.
[eyes checkImage:image tag:@"Main Screen"];
// End visual testing.
[eyes close:nil];
}
Analyze your test results
Congratulations! You've successfully run your first visual UI test with Applitools Eyes! A detailed report is ready for your inspection at the Applitools Eyes test manager. Watch this 5 minute video to get acquainted with the test manager and to learn the basics of baseline maintenance.
Login to Applitools and analyze the results.
Don't suffer in silence! Let us help you. Please reach out to us to get your project working.
Taking the next steps with Applitools
Congratulations on completing this quickstart! There's still so much to learn about visual testing with Applitools, but you're off to a great start.
Resources for next steps:
- 🤖 Learning how visual testing works
- ↔️ Setting match levels for visual checkpoints
- 💥 Troubleshooting common issues
- 🐞 Reporting bugs
- 🗺 Detailed overview of visual testing with Applitools