"Si un usuario final percibe una mal rendimiento en tu website, su siguiente click probablemente sea en tu-competencia.com"

-- 鉁嶏笍 Ian Molyneaux

Lo primero es software que funcione. Y cuando hablamos de una web la primera garant铆a debe ser la existencia y la descarga r谩pida de contenido relevante.

Todo lo dem谩s vendr谩 despu茅s. Paro si el usuario no encuentra r谩pido lo que busca... entonces si puede se ir谩, y si no puede irse estar谩 a disgusto. Ninguna de las dos situaciones es deseable.

Pero, afortunadamente, es muy sencillo realizar unos primeros test que garanticen estos aspectos tan b谩sicos de nuestros sistemas.

La herramienta que os propongo utilizar es Puppeteer. Aunque todo se puede realizar con otras como Cypress o Playwright. La primera la usaremos para pruebas m谩s funcionales, y la segunda es muy reciente y habr谩 que darle algo de tiempo...

Lo interesante no es el software que usemos, sino tener claro cual es el objetivo de la prueba. Que en este caso es tremendamente simple.

  • 鉁 Garantizar que una ruta existe.
  • 鉁 Comprobar que el contenido es el esperado.
  • 鉁 Validar que sus m茅tricas entran en un rango esperado.

Son casi pruebas de humo para comprobar que algo no arde nada m谩s enchufarlo. Pero por su simplicidad para implantarlas y su coste tan asequible de ejecuci贸n son la primera recomendaci贸n que puedo dar a un web tester.

Vamos a usar Puppeteer para realizar una pruebas muy b谩sicas. Pero vamos a prepararlo y automatizarlo de forma que sea muy sencillo y barato realizarlas con frecuencia.

Para seguir este tutorial no se requiere ning煤n conocimiento previo sobre testing. Pero se recomienda familiarizarse con la terminolog铆a leyendo el art铆culo Filosof铆a y patrones

Puppeteer

Lo primero es tener las herramientas adecuadas. Instalamos Puppeteer con el comando yarn add puppeteer. Y empezamos a programar. Os propongo desarrollar un script Node que tome como dependencia a Puppeteer, lo lance y lo cierre.

const { getBrowser, closeBrowser, takeScreenshot } = require(`./lib/puppets`);
async function test() {
  const { browser, pagePuppet } = await arrangeBefore();
  await cleanAfter(browser);
}
async function arrangeBefore() {
  const browser = await getBrowser();
  const pagePuppet = await browser.newPage();
  return { browser, pagePuppet };
}
async function cleanAfter(browser) {
  await closeBrowser(browser);
}

Veamos en detalle:

El browser

La secci贸n de preparaci贸n de cualquier test debe dejarlo listo para la ejecuci贸n de pruebas. Habitualmente se preparan objetos de negocio, ficheros, servicios o como en este caso se configura Puppeteer para visitar p谩ginas en modo oculto y a la resoluci贸n que determinemos.

exports.getBrowser = async function getBrowser() {
  if (!browser) {
    browser = await puppeteer.launch({
      headless: false,
      defaultViewport: { width: 1920, height: 1080 },
      devtools: false
    });
  }
  return browser;
};

Y ahora aun par de pruebas.

La p谩gina

A partir de este momento ya empezamos con lo que deber铆a ocurrir. Y lo m谩s sencillo es determinar que una p谩gina existe y devuelve un c贸digo http v谩lido. Acost煤mbrate a la sintaxis as铆ncrona con async-await porque todo esto se ejecutar谩 siempre en segundo plano.

module.exports = async function (pagePuppet) {
  const inputPageUrl = `https://www.bitademy.com/`;
  await given(`A the url ${inputPageUrl}`, async () => {
    await when(`we visit it`, async () => {
      const response = await pagePuppet.goto(inputPageUrl, { waitUntil: `load` });
      let actual = response.ok();
      let expected = true;
      then(`respond with an ok status code`, actual, expected);
    });
  });
};

F铆jate en la auditoria tan expl铆cita que se hace. En un test siempre querr谩s saber lo que est谩 pasando. Recuerda que es una herramienta para el desarrollador, es decir, para ti. As铆 que haz que te resulte c贸moda, agradable y util.

Para homogenizar los mensajes te propongo que uses la terminolog铆a que tomo prestada del BDD. Se basa en usar los tres sucesos de toda prueba. Given, when, then. Es decir dada una situaci贸n de partida, cuando el usuario realiza una acci贸n, entonces el sistema deber铆a responder adecuadamente.

El contenido

Este caso de comprobar existencia es habitual, aunque mucho m谩s habitual ser谩 comprobar contenido. Por ejemplo si la p谩gina existe pero queremos comprobar que es la adecuada. Para ello se usan m茅todos auxiliares para obtener acceso a la respuesta.

module.exports = async function (pagePuppet) {
  const inputPageUrl = `https://www.bitademy.com/`;
  await given(`A the page at ${inputPageUrl}`, async () => {
    await when(`we get its title`, async () => {
      await pagePuppet.goto(inputPageUrl, { waitUntil: `load` });
      const actual = await pagePuppet.title();
      const expected = `bitAdemy`;
      then(`it is ${expected}`, actual, expected);
    });
    await when(`we download all the content`, async () => {
      await pagePuppet.goto(inputPageUrl, { waitUntil: `networkidle2` });
      const content = await pagePuppet.content();
      const kiloByte = 1024;
      const maximumKiloBytes = 30;
      const maximunExpected = kiloByte * maximumKiloBytes;
      const actual = content.length < maximunExpected;
      const expected = true;
      then(`it is smaller than ${maximunExpected} bytes`, actual, expected);
    });
  });
};

En este caso comprobando t铆tulo y tama帽o de la descarga. Ojo a las esperas. Porque en algunas situaciones nos basta esperar a la respuesta b谩sica del server y en otros necesitamos esperar a todo el contenido.