Pruebas Automáticas de UI en Xcode 7

Standard

Hola, el día de hoy voy a ampliar un poco más el tema de las pruebas automáticas, ya que en Hunabsys estamos ampliando más la práctica como parte de los mecanismos de validación que estamos implementando en nuestros proyectos.

¿Qué son las Pruebas de UI?

Las Pruebas de UI son pruebas para validar la interfaz del usuario. No es que sea nuevo, ya lo hacemos todo el tiempo para validar nuestros proyectos, de manera manual, en las apps lo hacemos haciendo taps sobre los diferentes elementos de la pantalla.

Pero las pruebas manuales para realizar las regresiones es aburrido. Además de que tienes que recordar el probar todos los pasos para validar que no hayamos introducido algún error en cada iteración.

Hacer Pruebas Unitarias de clases Swift es relativamente sencillo: podemos probar “unidades” (leer una “clase”) a través de su interfaz de programación, así que escribimos código para asegurarnos que hace lo que se supone programamos.

En el caso de las Pruebas Automáticas de UI no es tan sencillo: debemos pretender que alguien está haciendo tap sobre la pantalla y arrastrando e interactuando con tu app para que haya cambios en la interfaz, debe de haber mecanismos para poder “ver” si la UI cambió de acuerdo a lo esperado.

¿Cómo te ayuda Xcode 7 con esto?

A partir de Xcode 7 tenemos una interfaz programática para probar la UI de nuestra app, con el namespace XCUI.

Xcode también cuenta con la herramienta para grabar tus interacciones con la app, la cual te genera código de pruebas.

Nota. Antes existía un mecanismo para probar la interfaz basado en Javascript, pero no era tan intuitivo, además que solo soportaba iOS, XCUI también funciona para las apps basadas en OS X.

Ejemplo: HelloAlertApp

Vamos a usar una aplicación muy sencilla con un botón que lanza una alerta, para grabar una prueba de regresión y validar que todo funciona bien. Es un ejemplo sencillo, pero te va a familiarizar con los mecanismos para agregar el framework de XCUI y el recorder.

hello-alert-app-1hello-alert-app-2

ViewController.swift

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
//
//  ViewController.swift
//  HelloAlertApp
//
//  Created by Omar Palomino Sandoval on 11/03/16.
//  Copyright © 2016 Hunabsys. All rights reserved.
//
 
import UIKit
 
class ViewController: UIViewController {
 
    // MARK: - Variables
   
   
    // MARK: - Outlets
   
    @IBOutlet weak var showMessageButton: UIButton!
   
    // MARK: - Lifecycle
   
    override func viewDidLoad() {
        super.viewDidLoad()
        // TODO: set showMessageButton Colors
    }
   
    // MARK: - Actions
 
    @IBAction func showMessageAction(sender: AnyObject) {
        let alertController = UIAlertController(title: "Hello", message: "Sup?", preferredStyle: .Alert)
        let dismissAction = UIAlertAction(title: "Dismiss", style: .Default, handler: nil)
        alertController.addAction(dismissAction)
       
        presentViewController(alertController, animated: true, completion: nil)
    }
 
}

Agregando el soporte de Pruebas UI a tu Proyecto

Para agregar el soporte de Pruebas UI a tu proyecto tienes dos opciones:

  1. Al momento de crear tu proyecto marcas la opción de Include UI Tests.

hello-setup-ui-tests

2. Si no las incluiste al momento de crearlo no te preocupes, lo puedes hacer desde las propiedades de tu app.

  • Le damos en la opción de Add Target.
  • En la sección de iOS > Test > iOS UI Testing Bundle.

xcode-add-target

(Seleccionamos las opciones por default para el nuevo target)

new-target

(Y ya tenemos las opciones para generar las pruebas)

ui-test-setup-done

Grabado tu primer prueba

De acuerdo a lo que dejamos los valores por default, se debe de haber agregado una clase swift llamada HelloAlertAppUITests de tipo XCTestCase, el cual funciona como un caso de prueba unitaria, solo que tiene la configuración para grabar las pruebas de UI.

Si nos posicionamos dentro del método testExample(), el cuál está vacío ahora se activa el botón de Recorder, con el cual podemos proceder a grabar nuestra prueba de regresión.

record-ui-test

  1. Le damos click al botón de Record UI Test procedemos a grabar la prueba de UI.
  2. Al momento vamos a ver como arranca nuestro app.
  3. Ahora mientras vamos interactuando con la aplicación se van agregando el código que va a automatizar esta prueba.
  4. Al terminar le damos de nuevo en el botón Stop Recording UI Test.
  5. Nuestro método testExample() quedaría de la siguiente forma:
func testExample() {
    let app = XCUIApplication()
    app.buttons["Show Message"].tap()
    app.alerts["Hello"].collectionViews.buttons["Dismiss"].tap() 
}

Ejecutando la prueba

Ahora le damos del menú Product > Test (Cmd + U) y vamos a ver como se ejecuta esta sencilla prueba de regresión.

Esto va a ocasionar que se lance el Build de tu aplicación, que la ejecute y vas a ver como se van ejecutando los pasos que grabamos.

Por cada método test que agreguemos se repetiría este proceso.

Puedes usar XCUITest con proyectos de antes de iOS9

Yo pensaba que este mecanismo de pruebas solo funcionaba para las nuevas versiones de iOS 9+. La buena noticia es que también funciona en proyectos basados en el SDK iOS 8+.

Comentarios

Ahora ya sabes como elaborar pruebas de regresión y probar de manera automática que no haya errores en la interfaz o que la app funcione correctamente con servicios de terceros.

Como seguimiento a esta publicación más adelante publicaré como sacar más de tus Pruebas de UI:

  • Seleccionar elementos.
  • Hacer queries sobre la estructura de tu UI.
  • Simular eventos en la interfaz.
  • Agregar Assertions para validar supuestos en la UI.

Leave a Reply

Your email address will not be published. Required fields are marked *