Getting started with UI Automation in Xcode 4

Did you know that with a little patience and some knowledge of JavaScript you can write automated UI tests against your iOS applications? What’s even better is with Xcode 4.2 installed its as easy as clicking a record button and having Instruments generate the test scripts for you.

For this tutorial I’m going to download the Core Data Recipes application from Apple’s developer website. Once you’ve opened the app in Xcode go ahead and click on Product -> Profile in the menu bar (command + I works just as well) to launch the Instruments tool that we’ll be using to run our tests with.

You should see your application launched in the simulator along with a running instruments profiler. Form here you’re going to want to check that the Automation instrument has been created and then click on the Add button just below it to create a new Automator script.

After clicking on Add -> Create you will notice a record button looming towards the bottom that when clicked allows you to begin interacting with your application and generating the JavaScript necessary to automate the test.

Here’s a trivial example that I recorded using the sample application to demonstrate.

var target = UIATarget.localTarget(); target.frontMostApp().mainWindow().tableViews()["Empty list"].cells()["Chocolate cake with chocolate frosting, 1 hour, Chocolate Cake"].tap(); target.frontMostApp().navigationBar().rightButton().tap(); target.frontMostApp().mainWindow().tableViews()["Empty list"].cells()["Dessert"].tap(); target.frontMostApp().mainWindow().tableViews()["Empty list"].cells()["Snack"].tap(); target.frontMostApp().navigationBar().leftButton().tap(); target.frontMostApp().mainWindow().tableViews()["Empty list"].cells()["Snack"].tap(); target.frontMostApp().mainWindow().tableViews()["Empty list"].cells()["Dessert"].tap(); target.frontMostApp().navigationBar().leftButton().tap(); target.frontMostApp().navigationBar().rightButton().tap(); target.frontMostApp().navigationBar().leftButton().tap();

Having Xcode generate the script for you can test your patience with how it tries to target certain elements incorrectly but often times it will at the very least get you a good base to work from if you’re just getting the hang of how to ineract with your app.

It’s worth mentioning that this script will run just fine if you are dealing with UI elements that stay the same across test runs or otherwise remain static. If this isn’t the case then you may run into cases where elements have different attributes or no longer exist if you were to delete a row in a UITableView for example. This is where some knowledge of JavaScript (and the UI Automation Reference) comes in handy to check the existence and state of elements. This is beyond the scope of this article but one possible approach to this problem would be to restore your data prior to each test run.

You’ll notice that the third line has the cell contents hard coded into the script which is just another way of gaining access to it.

target.frontMostApp().mainWindow().tableViews()["Empty list"] .cells()["Chocolate cake with chocolate frosting, Chocolate Cake"].tap();

Thankfully we have a couple of much better options to achieve the same result. The first way is by using the element placement index inside of the cells array.

target.frontMostApp().mainWindow().tableViews()["Empty list"] .cells()[0].tap();

You can alternatively set the accessability label through Interface Builder.

The accessibilityLabel property can also be set at runtime if you so choose, this is most useful for dynamic layouts.

cell.isAccessibilityElement = YES; cell.accessibilityLabel = @"Cake";

Given the nature of the Core Data Recipes sample application our best approach would be to use the cell index or full cell label text for demonstration purposes. Ideally the accessibility text would be part of your data source in some fashion so in code we could iterate over the data while creating the table view cells.

Taking another look at the script you can see a lot of repetitive ways of accessing elements, we can pull out some common pieces and have cached versions to work with instead. Not only does this make your script more readable but it will also help speed up the running times.

var target = UIATarget.localTarget(); var app = target.frontMostApp(); var window = app.mainWindow(); var navBar = window.navigationBar();

We’ll also go ahead and change the hardcoded string key to access the cell to an ordinal index value here as well by updating tableViews()["Empty list"] to be tableViews()[0]

Now what’s left is a script that is much more maintainable going forward.

var target = UIATarget.localTarget(); 
var app = target.frontMostApp(); 
var window = app.mainWindow(); 
var navBar = window.navigationBar(); 

// Select Recipe 
window.tableViews()[0].cells()[0].tap(); 

// Change Ingredient 
navBar.rightButton().tap(); 
window.tableViews()[0].cells()["Dessert"].tap(); 
window.tableViews()[0].cells()["Snack"].tap(); 
navBar.leftButton().tap(); 

// Change Ingredient Again 
window.tableViews()[0].cells()["Snack"].tap(); 
window.tableViews()[0].cells()["Dessert"].tap(); 
navBar.leftButton().tap(); 

// Done Editing 
navBar.rightButton().tap(); 

// Back To Recipe List 
navBar.leftButton().tap();

Where to go from here?

One aspect of the documentation that is worth exploring is the UIALogger class. UIALogger gives you the ability to define a beginning and end of your test cases and not only provide a means of structuring tests but you can record pass or fail messages to give more context to the results. These messages will get output in the Trace Log portion of the Instruments tool.

Show Comments