Peek: UI testing on a device

By The App Business under Engineering, #TABLife 01 October 2014

I started working at The App Business late last year and for me, this was the first time I had a dedicated QA team on a project. One of the things that began to dawn on me very quickly was that the brilliant people doing this job really didn’t have the same tools they may have had if doing web development. Even simple tools like Firebug weren’t really available.

So, I decided to try and solve this problem for my colleagues, and hopefully for other designers and test engineers out there. Two days later, I had an initial concept for Peek. What started as a simple layout validation tool quickly turned into something more akin to a testing tool for all things UI (see below).

Inside Peek

Essentially, Peek is a tool to aide designers and testers in achieving pixel perfect designs for their iOS user interfaces. And, while you are reading The App Business’ blog, you might think Peek, logically, is an app. But it isn’t.

Peek runs inside your app (requiring a one-time install by your dev) using overlays on top of your application. It provides contextual information about your app, including layout, fonts, colours and other useful information.

Peek doesn’t require a single line of code by a developer, and will even automatically remove itself from App Store builds. This helps ensure you don’t accidentally ship with it switched on. Peek also allows you to report issues back to your development team right from within Peek (see below).

Once Peek is installed into a project, all subsequent builds can enable Peek through the use of the volume keys on your device. Peek has a simple but powerful UI: it allows you, quickly and easily, to perform context-based tasks such as validating layouts, font and colour attributes for text, image cropping, sizing and a whole lot more. Peek is also extremely configurable, allowing you to add new contexts easily – and in many cases with just a single line of code. At this point, though, you will need a developer to lend a hand configuring contexts and properties.

Here’s a video of Peek in action:

Defining a ‘Context’ in Peek

Contexts are basically tasks that you wish to perform. Peek comes pre-packaged with various contexts to cover the majority of cases. However, Peek is inherently flexible and adaptable: it’s relatively straightforward for your development team to add additional contexts to suit your application’s needs.

Peek includes the following contexts out-of-the-box:

Absolute Layout: provides view layout information on a per-view basis.

Relative Layout: provides view layout information between 2 views.

Font Inspection: provides font and text attributes for all textual elements.

Colour Inspection: provides colour information for all views.

Each context in Peek provides the following:

Overlay: an overlay allows you to draw contextual information over your UI.

Properties: contextual properties related to the task at hand.

Filters: filter out views that are out of ‘context’, allowing you to focus on the current task.

Peek has a long roadmap ahead, but with its extensible nature and flexible architecture, this and more is possible.

Peek in the future

I have a lot of great ideas still to come for Peek, including more contexts focused around accessibility, localisation and even some ideas for dealing with non-visual elements. When I built Peek, it was because I wanted to create something genuinely useful for my colleagues – that’s why I’m open-sourcing Peek so that everyone can benefit from this tool and hopefully more developers will add features that I haven’t even thought of. This will ensure Peek keeps evolving, improving and becoming more useful with additional contexts, that will make Peek the best on-device tool available for user interface testing.

If you like what you see here, and have questions or even ideas for Peek in the future, drop me a line or find me on Twitter @shaps.