Para esta época del año es cuando, desde NodeConf Argentina, empezamos a anunciar nuevos oradores y hay algunas verificaciones que usualmente hacemos en el sitio después de que los cambios en el HTML están hechos. Esas verificaciones son:

  • que los cambios no rompan nada
  • la social card para Twitter se ve bien
  • la social card para Facebook se ve bien

Estaba empezando a cansarme de realizar estos últimos dos chequeos manualmente y pensé “debería haber una forma de automatizarlos, no?”. Resulta que para Twitter encontré un Card Validator y Facebook tiene un URL Debugger. Este artículo cuenta cómo utilicé Puppeteer para navegar el Card Validator de Twitter, realizar una captura de pantalla, subirla a Imgur y pegar su URL cómo comentario en un pull request.

Primero lo primero

Ya tenía la configuración para que TravisCI ejecute un build por cada pull request funcionando. Si querés saber más detalles acerca de cómo lo configuré podés leer más en Running Lighthouse for every PR with Travis CI. Anteriormente estaba usando Surge.sh para los deploys, pero con los submodains de Surge.sh un archivo robots.txt se sobreescribe haciendo que sea imposible utilizarlo en el validador de Twitter.

Migré a now y utilizando deployments públicos resultó ser bastante directo.

Entrando al mundo Puppeteer

Tenía ya Lighthouse ejecutandose hacia el deploy de now por lo que habían tres cosas que faltaban:

  1. obtener la lista de archivos modificados
  2. utilizar Puppeteer para hacer la captura de pantalla
  3. subir la captura a Imgur

Para el primero de estos pasos utilicé un comando git que, si no especifica el branch de origen, retornará la lista de archivos modificados comparando contra el branch actual (el del pull request). El comando es el siguiente:

1
$ git diff --name-status master

Para que Puppeteer saque la captura de pantalla necesité impersonar mi sesión de Twitter, luego ingresar la URL que quería verificar y por último clickear en el botón “Preview Card”. Para lo primero utilicé page.setCookie con una variable de entorno configurada en Travis CI. Siguiente, emulé el viewport que me convenía, navegué al sitio del Card Validator

1
2
3
await page.goto('https://cards-dev.twitter.com/validator', {
    waitLoad: true
});

y use el resultado del paso 1 con la URL de deploy (utilizado como argumento en la consola)

1
2
await page.click(textInputSelector);
await page.keyboard.type(process.argv[2]);

Para que la captura de pantalla se muestre correctamente tenía que esperar a que un iframe se inicialize en la página. Pero esto está lejos de ser perfecto ya que no pude encontrar una solución sin agregar una espera de un número arbitrario de milisegundos. Todo el arcihvo es menos de 70 líneas de código, podés encontrarlo acá.

Para completar el paso n°3 usé Imgur y un script de bash muy útil. Podés especificar tu client ID agregando la variable de entorno IMGUR_CLIENT_ID a tu build.

How the end result looks like on a pull request.

Conclusiones

Podría ser muy útil también agregar la verificación de la social card para Facebook también, pero la plataforma sube imágenes de forma asincrónica por lo que la lógica para Puppeteer sería bastante tediosa.
A esta altura voy a decir que Puppeteer es una herramienta bastante poderosa pero también pienso que hay algunas mejoras posibles por ejemplo en la API para eventos asincrónicos. Incluso después de esperar para diferentes eventos disparados en un iframe insertado dinámicamente tuve que agregar un timer para esperar a que los cambios sean rendereados.
Por cierto, no deberías impersonar tu sesión de Twitter para nada serio. Para esos casos creá una cuenta específica para tu automatización.

¿Usaste Puppeteer en alguna parte de tu flujo de CI? ¡Contame en los comentarios!