Si quieres ejecutar pruebas automatizadas con Headless Chrome, no busques más. En este artículo, te ayudaremos a usar Karma como Runner y Mocha+Chai para crear pruebas.
¿Qué son esos elementos?
Karma, Mocha, Chai, Chrome sin cabeza, ¡Dios mío!
Karma es un agente de prueba que funciona con cualquiera de los frameworks de prueba más populares (Jasmine, Mocha o QUnit).
Chai es una biblioteca de aserciones que funciona con Node y en el navegador. Necesitamos esta última.
Chrome sin interfaz gráfica es una forma de ejecutar el navegador Chrome en un entorno sin interfaz gráfica y sin la IU completa del navegador. Uno de los beneficios de usar Chrome sin interfaz gráfica (en lugar de probar directamente en Node) es que las pruebas de JavaScript se ejecutarán en el mismo entorno que los usuarios de tu sitio. Headless Chrome te brinda un contexto de navegador real sin la sobrecarga de memoria que conlleva ejecutar una versión completa de Chrome.
Configuración
Instalación
Instala Karma, los complementos, los ejecutores de pruebas y los complementos relevantes con yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
o usa npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Uso Mocha y Chai en esta publicación, pero si no te gusta, elige tu biblioteca de aserciones favorita que funcione en el navegador.
Configura Karma
Crea un archivo karma.conf.js que use el selector ChromeHeadless.
karma.conf.js
module.exports = function(config) {
config.set({
frameworks: ['mocha', 'chai'],
files: ['test/**/*.js'],
reporters: ['progress'],
port: 9876, // karma web server port
colors: true,
logLevel: config.LOG_INFO,
browsers: ['ChromeHeadless'],
autoWatch: false,
// singleRun: false, // Karma captures browsers, runs the tests and exits
concurrency: Infinity
})
}
Cómo escribir una prueba
Crea una prueba en /test/test.js.
/test/test.js
describe('Array', () => {
describe('#indexOf()', () => {
it('should return -1 when the value is not present', () => {
assert.equal(-1, [1,2,3].indexOf(4));
});
});
});
Ejecuta las pruebas
Agrega una secuencia de comandos test a package.json que ejecute Karma con nuestra configuración.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Cuando ejecutes las pruebas (yarn test), se debería iniciar Chrome sin interfaz gráfica y enviar los resultados a la terminal:
Cómo crear tu propio selector de Chrome sin interfaz gráfica
El selector ChromeHeadless es excelente porque funciona de inmediato para realizar pruebas en Chrome sin interfaz gráfica. Incluye las funciones experimentales de Chrome adecuadas para ti y, además, inicia una versión de depuración remota de Chrome en el puerto 9222.
Sin embargo, es posible que, en ocasiones, quieras pasar marcas personalizadas a Chrome o cambiar el puerto de depuración remota que usa el selector. Para ello, crea un campo customLaunchers que extienda el selector ChromeHeadless base:
karma.conf.js
module.exports = function(config) {
...
config.set({
browsers: ['Chrome', 'ChromeHeadless', 'MyHeadlessChrome'],
customLaunchers: {
MyHeadlessChrome: {
base: 'ChromeHeadless',
flags: ['--disable-translate', '--disable-extensions', '--remote-debugging-port=9223']
}
},
}
};
Ejecuta todo en Travis CI
La parte difícil es configurar Karma para que ejecute pruebas en Chrome sin interfaz gráfica. La integración continua en Travis está a solo unas líneas de distancia.
Para ejecutar las pruebas en Travis, usa dist: trusty e instala el complemento estable de Chrome:
.travis.yml
language: node_js
node_js:
- "7"
dist: trusty # needs Ubuntu Trusty
# Note: if you switch to sudo: false, you'll need to launch Chrome with --no-sandbox.
# See https://github.com/travis-ci/travis-ci/issues/8836
sudo: required
addons:
chrome: stable # have Travis install Chrome stable.
cache:
yarn: true
directories:
- node_modules
install:
- yarn
script:
- yarn test