"Hacer las pruebas de existencia y rendimiento al terminar el desarrollo o tras las pruebas funcionales es como tomar el pulso o hacer una anal铆tica a un paciente que ya est谩 muerto."

-- 鉁嶏笍 Scott Barber

Normalmente vas a querer comprobar algo m谩s que la existencia b谩sica de una web. Hay tantas posibles pruebas que hacer como situaciones pueda vivir un usuario. Pero para empezar te voy a mostrar las m谩s utilizadas.

Emulaci贸n

Algo t铆pico es que despliegues una aplicaci贸n web, pero quieras comprobar que se ejecuta correctamente en distintos dispositivos. Ya que Puppeteer usa por debajo un Chrome, podemos usar las capacidades de emulaci贸n que tiene.

module.exports = async function (pagePuppet) {
  await given(`Any page of my site`, async () => {
    const inputPageUrl = `https://www.bitademy.com`;
    const inputUserAgent =
      'Mozilla/5.0 (iPhone; CPU iPhone OS 11_0 like Mac OS X) AppleWebKit/604.1.38 (KHTML, like Gecko) Version/11.0 Mobile/15A372 Safari/604.1';
    await pagePuppet.setUserAgent(inputUserAgent);
    await pagePuppet.setViewport({ width: 375, height: 812 });
    await when(`we visit emulating an iPhone`, async () => {
      await pagePuppet.goto(inputPageUrl, { waitUntil: `load` });
      const actual = await pagePuppet.evaluate(() => {
        const nav = document.getElementById(`main-navigation`);
        const style = window.getComputedStyle(nav, ``);
        return style.getPropertyValue(`visibility`);
      });
      const expected = `hidden`;
      then(`it hides main-navigation`, actual, expected);
    });
  });
};

De esta forma puedes determinar si se aplican o no ciertos estilos, la validez de tus media queries...

Evaluaci贸n

Hablando de evaluar; te habr谩s fijado en la funci贸n evaluate de primer orden que admite un callback para ejecutar. La clave est谩 en entender cu谩ndo esa funci贸n se va a ejecutar. Evaluate ejecutar谩 el callback de forma as铆ncrona una vez descargada la p谩gina. Por ejemplo lo uso para comprobar que no tenemos links vac铆os en una web.

module.exports = async function (pagePuppet) {
  await given(`A site url`, async () => {
    const inputPageUrl = `https://www.bitademy.com`;
    await when(`we scrap it for empty links`, async () => {
      await pagePuppet.goto(inputPageUrl, { waitUntil: `load` });
      const actual = await pagePuppet.evaluate(() =>
        window.find(`a:is(:not([href]),[href=""],[href="#"])`)
      );
      const expected = false;
      then(`have no one`, actual, expected);
    });
  });
};

Cualquier expresi贸n JavaScript que pongamos se ejecutar谩 como si la hubi茅ramos escrito en la consola del Chrome.

Seguimiento

Adem谩s de lanzar el script y ver directo lo que ocurre, tambi茅n puedes querer ver lo que pas贸 una vez terminado. Es decir comprobar qu茅 ha ocurrido y tener un rastro; sobre todo si se ejecuta en modo desatendido o sin visualizaci贸n.

exports.takeScreenshot = async function takeScreenshot(pagePuppet) {
  const timeStamp = new Date().getTime();
  const shotPath = path.join(process.cwd(), 'images', `${timeStamp}.png`);
  await pagePuppet.screenshot({
    path: shotPath,
    fullPage: false
  });
};

La funci贸n screenshot saca instant谩neas de las pantallas que permitir谩n analizar tranquilamente lo que ocurri贸. Recuerda que la prueba la haces para ti. El log o rastro de lo sucedido es tu principal activo al terminar la prueba.