Si quieres ejecutar pruebas automatizadas con Chrome sin interfaz gráfica, no busques más. En este artículo, aprenderás cómo usar Karma como ejecutor y Mocha+Chai para crear pruebas.
¿Qué son estos elementos?
Karma, Mocha, Chai, Chrome sin interfaz gráfica… ¡uf!
Karma es un conjunto de pruebas que funciona con cualquiera de los frameworks de pruebas más populares (Jasmine, Mocha, QUnit).
Chai es una biblioteca de aserciones que funciona con Node y en el navegador. Necesitamos lo último.
Chrome sin interfaz gráfica es una forma de ejecutar el navegador Chrome en un entorno sin interfaz gráfica sin la IU completa del navegador. Uno de los beneficios de usar Headless Chrome (en lugar de realizar pruebas directamente en Node) es que las pruebas de JavaScript se ejecutarán en el mismo entorno que los usuarios de tu sitio. Chrome sin interfaz gráfica te brinda un contexto de navegador real sin la sobrecarga de memoria de ejecutar una versión completa de Chrome.
Configuración
Instalación
Instala Karma, los complementos relevantes y los ejecutores de pruebas 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
Estoy usando 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 en 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), Headless Chrome debería iniciarse y mostrar los resultados en la terminal:
Crea tu propio selector de Chrome sin interfaz gráfica
El selector ChromeHeadless es excelente porque funciona de inmediato para realizar pruebas en Headless Chrome. Incluye las marcas de Chrome adecuadas y lanza una versión de depuración remota de Chrome en el puerto 9222.
Sin embargo, a veces es posible que desees 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 base ChromeHeadless:
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 ejecutar tus pruebas en Chrome sin interfaz gráfica. La integración continua en Travis está a solo unas líneas de distancia.
Para ejecutar tus pruebas en Travis, usa dist: trusty y, luego, 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