Pruebas E2E con TestCafe sobre Docker

TestCafe es un framework para realizar pruebas E2E. Destaca respecto a otros frameworks por su simplicidad, siendo ideal para realizar pruebas sencillas o iniciarse en las pruebas E2E. Su facilidad inicial no implica que no sea potente, ya que permite llegar a casos de uso más complejos.

Una de sus características que me hicieron decantarme por este framework fue su buena integración con Docker y la posibilidad de ejecutar las pruebas en un contenedor (headless o sin interfaz gráfica). De esta forma puedo ejecutar pruebas en varios lugares, como en mi máquina local antes de hacer un push, con precommit, o en un servidor de integración continua. Además puedo pasar información de un framework a otro, al final daré un ejemplo.

Antes de empezar doy por sentado que tienes Docker instalado en tu máquina. Sea Docker Engine o Docker Desktop, no importa.

El primer paso es crear un par de carpetas para almacenar los tests y las capturas de pantalla (si, podemos hacer capturas de pantalla si falla o en cualquier momento del test). En el ejemplo las he llamado tests y screenshots.

A continuación, creamos un archivo llamado compose.yamlcon el siguiente contenido:

services:
  testcafe:
    image: testcafe/testcafe
    command: ["chromium:headless"]
    volumes:
      - ./tests:/tests
      - ./screenshots:/screenshots
    stdin_open: true
    tty: true

Y dentro de la carpeta tests creamos un test con el nombre search-fixture.js:

import { Selector } from 'testcafe';

fixture('Search')
    .page('https://duckduckgo.com/');

test('Search cat', async t => {
    await t
        // automatically dismiss dialog boxes
        .setNativeDialogHandler(() => true)
        .typeText('#searchbox_input', 'cat')
        .pressKey('enter')
	.expect(Selector('ol.react-results--main > li:nth-child(2)').textContent).contains('Cat - Wikipedia');
});

Vamos a buscar en DuckDuckGo la palabra cat y esperamos que el segundo resultado sea la página de Wikipedia sobre gatos.

Para ejecutar las pruebas, lanzamos:

docker compose up

Y ya está.

[+] Running 1/1
 ✔ Container e2e-testcafe-1  Created
 Running tests in:
testcafe-1  |  - Chrome 132.0.0.0 / Alpine Linux 3.22.0_alpha20250108
testcafe-1  |
testcafe-1  |  Search
testcafe-1  |  ✓ Search cat
testcafe-1  |
testcafe-1  |
testcafe-1  |  1 passed (7s)

Aunque no lo puedas visualizar, TestCafe lanzó un Chromium en modo headless y ejecutó las pruebas.

¡Es fantástico!

Caso real: enviar datos de TestCafe a un test de backend

Como mencionaba al inicio, TestCafe nos puede ayudar a complementar las pruebas de un backend con las de un frontend. En este caso necesitaba identificarme por una interfaz web, con el clásico formulario de usuario y contraseña, para obtener un token de autenticación. Si los datos eran correctos, se creaba una cookie que se debía pasar a las pruebas del backend.

import { RequestLogger } from 'testcafe';
import { RequestHook } from 'testcafe';

class JwtBearerAuthorization extends RequestHook {
    constructor () {
        super();
    }

    onRequest (e) {
	if(e?.reqOpts?.headers?.cookie) {
	    const rawCookies = e.reqOpts.headers.cookie.split(';');
	    for(const rawCookie of rawCookies) {
		const cookie = rawCookie.split('=');
		if(cookie[0].trim() === 'COOKIE_AUTH') {
		    console.log(`|${cookie[1]}|`);
		}
	    }
	}
    }

    onResponse (e) {}
}

const jwtBearerAuthorization = new JwtBearerAuthorization();

fixture('Get token')
    .page(process.env.TEST_AUTH_URL);

test('Login', async t => {
    await t
	.addRequestHooks(jwtBearerAuthorization)
	.typeText('#username',  process.env.TEST_AUTH_USERNAME)
	.typeText('#password', process.env.TEST_AUTH_PASSWORD)
	.click('#login');
});

Desde pytest, mi framework de test en Python, lanzo las pruebas de TestCafe y obtengo la cookie de autenticación:

import os

def test_get_token():
    os.environ['TEST_AUTH_URL'] = 'http://localhost:8080/login'
    os.environ['TEST_AUTH_USERNAME'] = 'user'
    os.environ['TEST_AUTH_PASSWORD'] = 'password'
    token = os.popen('docker compose run testcafe').read()

Y con esto ya puedo realizar pruebas de integración entre el frontend y el backend.

Espero que os ayude a realizar softwares más robustos y a disfrutar de la programación.