Using Xcode Storyboard for UI Building and Testing

DZone 's Guide to

Using Xcode Storyboard for UI Building and Testing

Xcode's storyboard feature is a positive boon to iOS developers. In this post, we take a look at using it not only to help build apps, but also to help with your testing!

· Mobile Zone ·
Free Resource

The storyboard feature has been available in Xcode for some versions back already, and personally, I’ve found this feature extremely handy to quickly build UI layouts, sketch things out, and mock UI look-and-feels. It doesn’t only save your time and effort when building, mocking, or designing user interfaces for your app, but it also produces great results. In addition, packaging things up in Xcode and send those for real device tests on the cloud is easier than ever.

Advantages of Xcode Storyboard

Frankly, Xcode Storyboard has numerous benefits for every app developer, but those also work as a great illustration for those who implement test automation for the app. Furthermore, if you select to start using Xcode, it’s always recommended to get a deep understanding of which pros and cons are provided with it for testing.

Visual UI editor with rich features. With the help of Storyboard, you can visually design and edit UI layouts. This is where users can visually lay out view controllers for the UI and define how they are connected to each other. A View Controller is view-management functionality for the UIViewController class.

Image title

In addition to UI design and creation, Storyboard maintains overview and list of all scenes that application has.

Compelling overview of scenes and transitions between views. Using Storyboard, users can quickly get a glance of what is going on with UI transitions between different views. These transitions can be quickly connected in Storyboard by using drag-and-drop, and it certainly makes the UI design and transitions easy and effortless.

Xcode Storyboard makes working with table views easier with any mock or static cell features. Users can design their table views entirely in the storyboard editor, reducing the need to write code. This also saves quite a lot of time when things can be done just visually.

Auto Layouts. Another great advantage in Xcode Storyboard is the Auto Layouts. This features automatically calculates sizes and positions of all views in the hierarchy. Auto Layouts makes it easy to either dynamically or statically align UI components to adjust the appropriate illustration. It’s an especially handy feature for scaling UI components for different sizes of screens and resolutions.

The Basics of Using Xcode Storyboard

To get started with Xcode Storyboard, just create a new project (empty Single-View Application). Once Xcode is up and running, open a .storyboard file and create a UI for your application. The UI components can be dragged-and-dropped from the Object Library (if you use the standard editor window, the Object Library is on the bottom-right).

Add UI components, such as labels, buttons, text fields, segment controls, switches, sliders, activity indicators, progress views, and any other UI items available on the menu.

Now, create another view controller (by selecting it from Object Library) and use drag-and-drop to connect your UI elements to the new view controller. I’m using the following example as a basis:

Image title

The view transitions (also known as Segues) can be connected to the buttons and other UI elements by pressing CTRL and dragging the mouse to another view. The view transitions are shown as arrow-type lines, and if you click any of those, parameters, identifiers, classes/subclasses, modules, and so on can be configured in the Storyboard Segues view (on the top-right if you use the standard editor view).

It’s also worth of mentioning that if you edit launchscreen.storyboard, you’ll get an error (error = Launchscreens may not have triggered segues) when the app is trying to be executed. All edits and UI creation should be done on main.storyboard or new storyboards.

Launchscreen.storyboard and main.storyboard are two totally different things. The launch screen is what first appears when the user taps the app icon, before the app is finished launching. It shows a single, static screen. It can’t be dynamic and it can’t use any custom classes or code. Basically, it’s the replacement for launch images.

The main storyboard is what your app actually displays when the app is running. It contains your app, code, and all its logic.

Ok, that’s very basic stuff for creating a basic UI. Let’s see how to test these sorts of UI mockups.

Testing UI Components Created with Xcode Storyboard

The easiest option to get XCUITests done for your app is to use the Xcode Test Recorder. With this, native UI components can be identified and specific interaction on those is automatically done based on object’s characteristics (class, ID, attributes, etc.).

Just remember to highlight test function you’re about to record and wait until the app gets up and running. Here is the recorded example for the above UI elements (this time with Objective-C):

// Application init and XCUIElementQuery for label text
    XCUIApplication *app = [[XCUIApplication alloc] init];
    XCUIElementQuery *newBitbarSampleAppElementsQuery = [app.otherElements containingType:XCUIElementTypeStaticText identifier:@"New Bitbar Sample App"];
    [[[[newBitbarSampleAppElementsQuery childrenMatchingType:XCUIElementTypeSlider] matchingIdentifier:@"50%"] elementBoundByIndex:0] swipeRight];

// Recorded Slider example, both swipe on left and right
    [app.sliders[@"64%"] swipeLeft];
    [app.sliders[@"46%"] swipeLeft];
    [[[[newBitbarSampleAppElementsQuery childrenMatchingType:XCUIElementTypeSlider] matchingIdentifier:@"50%"] elementBoundByIndex:1] swipeRight];
    [[[[newBitbarSampleAppElementsQuery childrenMatchingType:XCUIElementTypeSwitch] matchingIdentifier:@"1"] elementBoundByIndex:1] tap];

// Button takes view to another view controller and click back to the first one
    [app.buttons[@"Button"] tap];
    [app.buttons[@"Go Back"] tap];

The XCUITest can be recorded for multiple view controllers.

However, sometimes you need to record a click (or other action) on a certain location where UI element is not identified using these items. The easiest and definitely handiest way to implement a click on a certain position on the screen can be done with extensions.

Here is an example of the XCUIElement extension for clicking a certain position on the screen:

extension XCUIElement{
    func tapAtPosition(position: CGPoint) {
        let exact_coordinate = self.coordinate(withNormalizedOffset: CGVector(dx: 0, dy: 0)).withOffset(CGVector(dx: position.x, dy: position.y))

And the extension would be used as follows:

let point = CGPoint(x:512,y:200)
   app.tapAtPosition(position: point)

Hopefully, this encouraged you to give Xcode Storyboard and Test Recorder a try! Let us all know the trickiest part of using Xcode Storyboard and Test Recorder.

Happy iOS testing, folks!

mobile ,storyboards ,testing ,tutorial ,ui ,xcode

Published at DZone with permission of Ville-Veikko Helppi , DZone MVB. See the original article here.

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}