Tagged: javascript

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.

More

jQuery Framework First Impressions

Javascript frameworks come in a variety of flavors, they’ll typically encapsulate common practices that web developers frequently use in their sites. With the three dominant mainstream browsers (FF3, IE7, Safari and potentially even more) to worry about, each with a slightly different technique to program for, it can be a good practice to use a tested framework which works across the board and remove the overhead associated with testing common methods.

The framework which I’ve come to grow quite fond of lately is called jQuery. JQuery is best described as a type of web designers toy box that focuses on separating content from functionality. So what do I mean by this?

Here is an example setup for a jQuery project.

Sample jQuery Page Structure
$(document).ready(function(){
   $("#Button1").click(function(event){
	alert("Say Something");
 });
});

Whats nice about jQuery is that the footprint is relatively small at 54k or less, and if you prefer there is a file hosted from the Google API website which you can link to directly inside of your page. In fact you’ll find that many tasks require a minimal amount of code to achieve some impressive results.

// Resize lightbox on button click

$(document).ready(function(){
   $("#Button1").click(function(){
      $("#lightbox").animate({
          width: "1000px", 
          height: "400px", 
          fontSize: "3em"
      });
   });
});

Those familiar with object oriented programming will be glad to know that jQuery also supports chainability as in this example.

$("a").addClass("test").show().html("foo");

The jQuery framework is becoming increasingly popular among many high profile sites such as Netflix, NBC and Dell to name a few. Even the Microsoft development community is taking notice as their next update of Visual Studio will be providing jQuery code completion within the software itself.

For more information on jQuery you can visit their website: http://jquery.com/

More