Aprende automatización web en 6 pasos

Pero es que esa ni es la parte mala.

No, la parte mala, terrible, espeluznante son los elementos superpuestos.

¿Quieres clicar en ese botón de login?

¡Pues no! ¡Banner de cookies allí en medio!

¿Quieres clicar ese link de suscripción?

¡Mala suerte! ¡No bajaste suficiente en la página y está tras el footer!

Así que clicar en sí puede ser sencillo, pero te encontrarás haciendo una serie de comprobaciones y preparaciones para ese clic:

1. Superposiciones: Comprobar que los elementos que sabemos que pueden tapar el elemento que buscamos no lo estén haciendo (y si lo están, ¡solucionarlo!)

2. Localización en pantalla: Comprobar que la posición del elemento no lo oculta y hacer scroll de ser necesario.

3. Confirmación de objetivo: Asegurar que el elemento en el que clicamos es el elemente que pretendíamos clicar.

Escribir texto en automatización web

¡Al fin algo más normal! A menos que la página web utilice alguna magia oscura (en cuyo caso, ver el apartado "¡Quejarse!" de hace unas secciones) esta acción es extremadamente sencilla:

await element.setValue("patatas")

¡Felicidades! Has escrito "patatas" y se te considera legalmente como un Experto en Automatización Web (Nota: definitivamente no eres un Experto en Automatización Web. Los Expertos en Automatización Web, de hecho, no existen).

Recoger texto en automatización web

Este es tan sencillo como el anterior:

const text = await element.getText()

Y así de sencillo, tenemos ¡OH DIOS MÍO, POR FAVOR, NO! ¿DE DÓNDE HA SALIDO TODO ESTE TEXTO DE MÁS?

Vale, así que hay un contratiempo menor...

En la mayor parte de las librerías de automatización web, al pedir el texto de un elemento se obtiene el texto de todos los descendientes junto con él. Normalmente es lo que quieres (si contiene algo de texto dentro de una etiqueta de negrita ¿de verdad quieres ignorarlo?), pero hace falta aprender a tratarlo correctamente:

1. Inclusión: En general cuando pidamos textos deberemos comprobar la inclusión del texto buscado más que la igualdad (¡Así que a desempolvar los viejos text.includes()!)

2. Selección de elementos: A veces podemos simplificarlo todo eligiendo el elemento correcto para evitar dolores de cabeza con los descendientes.

Esperar el resultado de las pruebas de la automatización web

Existe una habilidad que los automatizadores web han perfeccionado: esperar que la batería de pruebas termine mientras charlas al lado de la máquina de café. Y las esperas del código:

const elem = await $('#someText')
await elem.waitUntil(async function () {
    return (await this.getText()) === 'I am now different'
}, {
    timeout: 5000,
    timeoutMsg: 'expected text to be different after 5s'
});

Aquí el secreto: en automatización web no utilizamos expect sinó wait. Bueno, no del todo, porque en muchas librerías expect es un wait disfrazado. ¡Pero lo que importa es el concepto!

Y, ¿Cuál es la diferencia, preguntas?

• Cuando usamos expect le estamos diciendo a nuestro test "Esto debería ser así en este momento exacto y me da igual si va a estar en 5ms: ¡Tiene que estar ya!" Tumbar mesa

• Cuando usamos wait le estamos diciendo a nuestro test "Oye, entiendo que los navegadores hacen mucho de estas cosas asíncronas y eso, así que si en los siguientes 5 segundos o así pasa esto, por favor dímelo para continuar con el test. ¡Muchas gracias y que tengas un buen día!"

Así que los waits básicamente hacen que nuestro código de las pruebas sea más robusto y resistente a fluctuaciones menores tales como pequeños retrasos en la red o cualquier otra de las multitudes de razones por las que una página web puede ralentizarse. También nos fuerzan a especificar qué consideramos un tiempo de respuesta aceptable. Para utilizarlos correctamente necesitamos:

1. Aprender a escribir buenos cuerpos de espera: Entender qué elementos son imprescindibles a ejecutar cada vez que queramos comprovar la condición (por ejemplo en Webdriver.io no necesitamos buscar el elemento cada vez a menos que estemos esperando a su existencia.

2. Condiciones: Estas componen el estado final deseado que estamos probando, y escribirlas bien es de suma importancia.

Mención de honor: borrar las cookies

Esta acción no encaja muy bien en eso del "99% de los casos" ya que sólo la escribirás una vez:

await browser.deleteCookies()

Ahora bien, ¡esa única vez será en tu función beforeEach para asegurar que todo test sea independiente!

Conclusiones

¡Como has podido ver, la automatización web es muy sencilla! Si aprendes a utilizar correctamente las funciones que hemos mencionado, te convertirás en todo un experto.

Pero en caso de que se te siga haciendo un mundo, siempre podrás contar con una empresa de software como Redsauce para ayudarte.

Descubre este y otros consejos sobre qa testing y automatización en nuestro ebook gratuito: