One of the most impressive talks for me at WWDC 2010 was session 306 - "Automating Use Interface Testing with Instruments". I've been wanting to check it out ever since iOS 4 was released. A couple of weeks ago, I finally had a chance to give it a test ride with "I think I spider", one of the Apps I developed.
All you need to get started is an App, Instruments and some basic JavaScript skills. Apple provides a set of JavaScript libraries, that you can use to drive your tests and simulate user interaction. Your custom test scripts are run using the Automation Instrument in Apple's Instruments App, targeting your App either in the Simulator or on an actual device.
You can test almost every aspect of user interaction, using Apple's JavaScript library. No matter if you want to test shaking, device orientation or the basics like tapping and swiping, you can do all that using basic JavaScript function calls. Apple's documentation is quite solid, as most of them are, and explains the process in detail.
For "I think I spider" I covered the basic use cases in terms of UI, to make sure it still works after adding new features. Here is a basic example of the JavaScript involved to test "opening" the book, after starting the App:
You can see that the JavaScript API is quite easy to use and yet very powerful! After setting this up in the Automation Instrument and running it, you can see the Simulator firing up and tapping the UIImageView with the accessibility label "startscreen" after it became available. It then tests, if the main screen of the App was loaded and either passes or fails the test.
In order to make our App testable, I had to set the accessibility labels on the elements we wanted to reference from the script. That was the only change I had to make in our code. Since you should take accessibility into consideration anyways, it was a reasonable effort.
Apple did an awesome job giving us developers the ability to catch regressions and make our life easier. However, there is room for improvement, which has been nicely summarized by Air Source. For us, a missing UIALogger.warn function in the JavaScript library was the biggest downside. Sometimes it's okay for a test to fail under certain conditions, but you still want to get a warning about it. I use UIALogger.logMessage for those cases as a workaround, but it's quite easy to miss those lines, since they don't stand out.
Overall, I think it's a huge improvement to have a UI testing tool for iOS Apps at hand. There is room for improvement, but the current state of UI Test Automation is already priceless!
{ by david linsin }
January 31, 2011
January 10, 2011
5 Star Rating
A couple of months ago we release our first own App "I think I spider" at Synyx. It features German quotes and sayings directly translated to English. It doesn't make much sense to a none-native German speaker, but believe me it's hilarious for us.
The App let's you rate those quotes with a 5 star rating, which is directly incorporated into a ranking. Up until today the component in charge of the ranking is a simple bunch of UIImageViews wired up with Interface Builder and set appropriately when tapped. That means if you want to give a 3 star rating, tapping on the 3rd UIImageView would fill up the 2 previous one as well. Same goes for changing your mind and going from a 5 to 3 star rating. The logic would unhighlight the 4th and 5th star.
Now, this works great and it certainly looks beautiful, but have you ever rated an App in the App Store on your iOS device? This is how it looks like:
Apple did a great job of just getting everything right with this small little control. The way you can slide your finger over it and the stars light up is just great. Also notice that if you want to reset the rating and go down to 0 stars, you need to swipe your finger all the way to the left. Note, that you can also touch slightly below the star, in order to see the stars above your fingers.
All those little details were the requirements for the next version of the rating feature of I think I spider. However, having some spare time over the holidays, I though I'd write a little component, which does all of that and more: DLStarRating. You can find the code on github, along with a sample project of how to use the stuff in your next App.
DLStarRating consists of a configurable number of custom UIButtons called DLStarView. They have a different background image for their normal and highlighted state. Those buttons are wrapped in a UIControl called DLStarRatingControl, which does all the touch handling. The buttons are centered in the DLStarRatingControl so keep that in mind when configuring its size.
It's quite easy to use DLStarRating in your code. You can wire it up in Interface Builder (although you won't be able to configure it from there) or in your UIViewController subclass:
To customize the stars, you can replace star.png and star_highlighted.png in the images folder under DLStarRating with your own. The only requirement is that the two images must have the same size.
If you discover any bugs or have a great idea you want implemented, open an issue on github or fork the project and help me out!
The App let's you rate those quotes with a 5 star rating, which is directly incorporated into a ranking. Up until today the component in charge of the ranking is a simple bunch of UIImageViews wired up with Interface Builder and set appropriately when tapped. That means if you want to give a 3 star rating, tapping on the 3rd UIImageView would fill up the 2 previous one as well. Same goes for changing your mind and going from a 5 to 3 star rating. The logic would unhighlight the 4th and 5th star.
Now, this works great and it certainly looks beautiful, but have you ever rated an App in the App Store on your iOS device? This is how it looks like:
Apple did a great job of just getting everything right with this small little control. The way you can slide your finger over it and the stars light up is just great. Also notice that if you want to reset the rating and go down to 0 stars, you need to swipe your finger all the way to the left. Note, that you can also touch slightly below the star, in order to see the stars above your fingers.
All those little details were the requirements for the next version of the rating feature of I think I spider. However, having some spare time over the holidays, I though I'd write a little component, which does all of that and more: DLStarRating. You can find the code on github, along with a sample project of how to use the stuff in your next App.
DLStarRating consists of a configurable number of custom UIButtons called DLStarView. They have a different background image for their normal and highlighted state. Those buttons are wrapped in a UIControl called DLStarRatingControl, which does all the touch handling. The buttons are centered in the DLStarRatingControl so keep that in mind when configuring its size.
It's quite easy to use DLStarRating in your code. You can wire it up in Interface Builder (although you won't be able to configure it from there) or in your UIViewController subclass:
To customize the stars, you can replace star.png and star_highlighted.png in the images folder under DLStarRating with your own. The only requirement is that the two images must have the same size.
If you discover any bugs or have a great idea you want implemented, open an issue on github or fork the project and help me out!
com_channels
- mail(dlinsin@gmail.com)
- jabber(dlinsin@gmail.com)
- skype(dlinsin)
my_links
recent_postings
loading...
