> For the complete documentation index, see [llms.txt](https://elguerre.gitbook.io/de0an/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://elguerre.gitbook.io/de0an/capitulo-6-la-construccion.-testeando-desde-el-principio/proyecto-de-pruebas-unitarias-de-ui-codificadas.md).

# Pruebas Unitarias de UI (Coded UI Tests)

De la misma manera que las pruebas manuales nos permiten a modo de *checklist*, probar la interfaz de usuario, las codificadas automáticas (o “Coded UI Test”), se basan en la ejecución de pruebas de interfaz de manera unitaria y mecánica y sin la intervención del testador (o *tester*). Son generadas a partir de una interacción grabada y tienen la particularidad de poder ser editadas y codificadas.

Al tratarse de pruebas unitarias, pueden incluirse como parte de una compilación automática (o *Build*) formando parte de nuestra integración continua (IC)[¹](/de0an/capitulo-6-la-construccion.-testeando-desde-el-principio/que-hemos-aprendido.md#notas).

Para la generación de estas pruebas de IU completaremos los siguientes pasos:

1. Añadir a la solución un nuevo proyecto de tipo “Code UI Test Project (Universal Windows)” con el nombre *ElGuerre.Taskin.Uwp.UITests*.
2. Pulsar OK, en la ventana de diálogo que se muestra a continuación marcando previamente la opción: “Edit UI Map or add assertions”.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-19fdcca92a7c7c49f5c2e41afe6a93877c6d2358%2Fimage27.png?alt=media)

**Figura 21.- Creando pruebas unitarias de UI codificadas**

3. La herramienta “Coded UI Test Builder” se abre en la parte inferior derecha de la pantalla y se muestra el menú de inicio de Windows.
   1. Seleccionar el botón (![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-05cf98e15bed816eb1ab4be018f708be4e10018f%2Fimage28.png?alt=media)) y mantenerlo pulsado mientras se arrastra hasta el icono de la aplicación en el menú de inicio de Windows.
   2. En una nueva ventana emergente, copiar el valor de la propiedad “AutomationId”, que necesitaremos más adelante.

La siguiente imagen resume estos pasos:

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-7ce931a9d29defdea15ba1039b4774cc00f5fcca%2Fimage29.png?alt=media)

**Figura 22.- Obteniendo el valor “AutomationId” con Coded UI Test Builder**

4. Abrir la aplicación.
5. Repetir el paso 3, arrastrando el botón (![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-05cf98e15bed816eb1ab4be018f708be4e10018f%2Fimage28.png?alt=media)) la opción de menú “Acerca de” (icono “?”).
   1. Una vez seleccionado se abrirá de nuevo la ventana con el detalle del control seleccionado.
   2. Pulsar el botón (![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-7414acbda8a500918226ca0cc71c56e0250fd451%2Fimage30.png?alt=media)). Esta acción añade el control seleccionado al código que finalmente se genere.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-09007bc54c23abda135a0acd2af7bfaae7fc8690%2Fimage31.png?alt=media)

**Figura 23.- Añadiendo la barra de aplicación con Coded UI Test Builder**

6. Con la aplicación abierta, pulsar la opción de menú “Acerca de” para realmente abrir la ventana de ayuda y la pestaña “General”.
7. Repetir el paso 5, arrastrando el botón (![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-05cf98e15bed816eb1ab4be018f708be4e10018f%2Fimage28.png?alt=media)) hasta el número de versión de la aplicación.
8. Marcar el campo *DisplayText* y añadir una aserción (“Add Assertion”).

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-097045f46a2d38b477dd0fe44337fa1423419b25%2Fimage32.png?alt=media)

**Figura 24.- Añadiendo el control TextBlock de la versión con Coded UI Test Builder**

9. Introducir un comentario identificativo que se mostrará durante la ejecución de las pruebas en caso de fallo y pulsar OK.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-5db25a3bc749cc0dad4f9c762b1a80edeb5aa5c2%2Fimage33.png?alt=media)

**Figura 25.- Añadiendo una aserción para la versión con Coded UI Test Builder**

10. Finalmente, para generar el código, pulsar el botón (![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-0cf1e1e0a0e97efce771c79cd3b7d8007b008eb2%2Fimage34.png?alt=media)).
11. Introducir un nombre para identificar al método de la aserción, con el prefijo “Assert”. Ej.: *AssertNumeroVersionApp*.
12. Pulsar “Add and Generate”.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-c7f0828d81eaea0ce55a9264ab99fb78d981adc4%2Fimage35.png?alt=media)

**Figura 26.- Generando el código resultante con Coded UI Test Builder**

Tras la auto-generación de código, veremos que se han añadido varios ficheros en el proyecto *UITests*:

* UIMap.uitest. Es utilizado directamente por la herramienta Code UI Test Builder y puede ser editado en cualquier momento para seguir añadiendo aserciones.
* UIMap.Designer.cs. Contiene todo el código autogenerado. Básicamente se trata de un conjunto de métodos que realizan la búsqueda de aquellos controles y aserciones que hemos ido añadiendo durante los pasos anteriores. Es importante conocer, que el código que incluyamos manualmente en este fichero, puede ser eliminado tras cada nueva auto-generación de código.
* UIMap.cs. Utilizado para incluir código adicional sin temor a que sea eliminado con cada auto-generación.
* CodeUITest1.cs. Se trata de la clase y métodos de pruebas unitarias. Contendrá un método de prueba con referencia a cada aserción auto-generada.

La siguiente figura muestra el resultado de la auto-generación.

![](https://240651724-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FfrvHBNivOTy0fVKROgzo%2Fuploads%2Fgit-blob-a50f19fb463a7b47194bf37e1f5acefad2085a3d%2Fimage36.png?alt=media)

**Figura 27.- Ficheros auto-generados por Code UI Test Builder**

Aun teniendo casi todo el código generado, tenemos que hacer algunas modificaciones en la clase CodeUITest1.cs, para completar el proceso completo de la prueba e incluir algunas buenas prácticas:

1. Incluir en el método *CodedUITestMethod1*, las siguientes instrucciones:

```csharp
XamlWindow.Launch("e23600af-4899-40f5-a99d-4501dc2df033_6ynj98xx5c4ve!App");
Gesture.Tap(UIMap.UITaskinWindow.UIPaneRootWindow.UIHamburgerMenuItemToggleButton);
UIMap.AssertNumeroVersionApp();
```

Donde:

1. *XamlWindow\.Launch*. Abre la aplicación automáticamente pasando como parámetro el valor “AutomationId” previamente copiado.
2. *Gesture.Tap*. Ejecuta la acción de presionar sobre un control. Para este caso en particular, presionar el botón de ayuda para la navegación a la página “Acerca de”.
3. Renombrar el método *CodedUITestMethod1* para que pase a ser *VerifyAppVersionUITest*. Asumiremos así que cada clase de pruebas tendrá un sufijo “UITest”. Ej.: “\<Nombre\_Página>UITest”.
4. Crear una nueva clase base “**BaseUITest.cs**” donde incluir las propiedades y métodos comunes para cada nuevo método de pruebas que generemos. El código inicial es el siguiente, una vez *refactorizado*:

```csharp
public class BaseUITest
{
    private const string APP_UID = "e23600af-4899-40f5-a99d-4501dc2df033_6ynj98xx5c4ve!App";
    private XamlWindow taskinApp;
    private UIMap map;
    protected UIMap UIMap
    {
        get
        {
            if ((this.map == null))
            {
                this.map = new UIMap();
            }
            return this.map;
        }
    }
    public BaseUITest()
    {
        taskinApp = null;
    }
    protected void LaunchApp()
    {
        if (null == taskinApp)
            taskinApp = XamlWindow.Launch(APP_UID);
    }
}
```

4. Modificar la clase *AboutUITest*, para que herede de *BaseUITest* y actualizar el método *VerifyAppVersionUITest*.

```csharp
[CodedUITest(CodedUITestType.WindowsStore)]
public class AboutUITest : BaseUITest
{
    public AboutUITest(){}
    [TestMethod]
    public void VerifyAppVersionUITest()
    {
        LaunchApp();
        Gesture.Tap(UIMap.UITaskinWindow.UIPaneRootWindow.UIHamburgerMenuItemToggleButton);
        UIMap.AssertNumeroVersionApp();
    }
    …
```

Para más detalle sobre la generación de pruebas de UI codificadas, así como algunas de sus restricciones y las diferencias con aplicaciones Windows y Windows Mobile, visitar la página: <https://msdn.microsoft.com/es-es/library/dn747198.aspx>.

{% hint style="info" %}
**Nota**: Existen otras herramientas similares a *Coded UI Test* *Appium*, que permiten trabajar de forma similar y ofreciendo, incluso, mayores facilidades y características.
{% endhint %}

Ahora que ya sabemos cómo crear pruebas unitarias, y cómo medir el código, conoceremos cómo crear un plan completo de pruebas.