Primeros pasos con Xamarin.UITests para aplicaciones híbridas

Hemos tenido la oportunidad de empezar a “trastear” con Xamarin.UITest para validar la interfaz de usuario de una aplicación hecha con Cordova, y desplegarlo en Test Cloud para correr los tests en varios dispositivos físicos.

Vamos a partir de la base de que habéis creado un proyecto de Xamarin.UITest, lo primero que debemos hacer es arrancar un emulador o un dispositivo físico para desplegar la app y ejecutar los tests. Para arrancar la aplicación, una vez que el emulador o el dispositivo físico esté arrancado, sólo tenemos que añadir este código:

public class AppInitializer
{
    public static IApp StartApp(Platform platform, Xamarin.UITest.Configuration.AppDataMode mode = Xamarin.UITest.Configuration.AppDataMode.Auto)
	{
		if (platform == Platform.Android)
		{
			return ConfigureApp
				.Android
				.EnableLocalScreenshots()
				.ApkFile("../../../Apps/myapp.apk")
				.StartApp(mode);
		}

		return ConfigureApp
			.iOS			
			.EnableLocalScreenshots()
			.AppBundle("../../../Apps/myapp.app")
			.StartApp(mode);
	}
}

Fijáos que vamos a testar la UI de una aplicación multiplataforma desarrollada con Cordova para iOS y Android, por lo que hemos decidido usar un único punto de entrada para ambas aplicaciones. El motivo de todo esto es crear un conjunto de tests multiplataforma para Android e iOS. Así que con esta simple clase, en cada clase de test que tengamos, el método de “Setup” será algo parecido a:

[SetUp]
public void BeforeEachTest()
{
    app = AppInitializer.StartApp(platform);
}

De este modo, podemos asumir que antes de que se ejecute cada test la aplicación estará arrancada para poder ir navegando por ella a partir de la pantalla de inicio. Así estamos listos para empezar a testar la interfaz de usuario.

El flujo de trabajo es simple:

1. Esperar hasta que el elemento con el que queremos interactuar aparece en la interfaz:Con esta línea estamos pidiéndole a la aplicación que se espere hasta que aparezca un div en el componente WebView. El método “WaitForElement” tiene varias sobrecargas con diferentes parámetros en los que le podemos modificar el timeout, etc. Esto puede ser útil en algunos casos, como por ejemplo, cuando el div se muestre después de una operación que pueda tardar más tiempo de lo normal

	this.app.WaitForElement(c => c.WebView().Css("div.MyStyleClass"));

2. Interactuar con la UI:Este método nos permite simular taps en la aplicación. La interfaz IApp de Xamarin.UITest ofrece bastantes métodos con los que podemos interactuar con la app como Scrolldown, PressEnter, PinchToZoomIn, etc…

this.app.Tap(c =&gt; c.WebView().Css("div.MyStyleClass "));</li>


3. Esperar a lo que queremos testar. Vamos a asumir que después de hacer tap en el div que hemos estado esperando, aparecerá otro div. Así que esperamos a que aparezca el segundo div:

this.app.WaitForElement(c =&gt; c.WebView().Css("div.MySecondDivClass"));

El test completo tiene esta pinta:

[Test]
public void AfterTappingDiv2MustBeShown()
{
    this.app.WaitForElement(c =&gt; c.WebView().Css("div.MyStyleClass"));
    this.app.Tap(c =&gt; c.WebView().Css("div.MyStyleClass"));
    this.app.WaitForElement(c =&gt; c.WebView().Css("div.MySecondDivClass"));
}

En este punto tenemos un test que podemos ejecutar en la misma aplicación en ambas plataformas, iOS y Android, y esperamos que en ambas plataformas se comporte de la misma forma.

En algunas ocasiones, por cada test que queramos hacer necesitaremos “ver” el código de la interfaz de usuario. Esto lo conseguimos usando el método “Repl()” que está en la interfaz IApp. Cuando invoquemos a este método aparecerá una consola en nuestro pc:

Open Repl

En esta consola podemos llamar a cualquier método de la interfaz IApp. Es muy útil ya que podemos usarlos para ir creando paso a paso los test que queremos ir haciendo.

Por ejemplo, si esperamos a un elemento que no aparecerá en la UI, la consola mostrará algo así:

Repl Do Not Found Div

Sin embargo, si el elemento existe, REPL nos mostrará el HTML del elemento.

Con esta funcionalidad tan simple somos capaces de transformar tests manuales en tests automáticos. Con esto conseguimos transformar un trabajo muy costoso en un trabajo totalmente automatizado.

Artículo original publicado en el blog Xamarin Team de Plainconcepts

Deja un comentario