Se vuoi eseguire test automatici utilizzando Chrome headless, non cercare oltre. Questo articolo ti aiuterà a eseguire la configurazione utilizzando Karma come runner e Mocha+Chai per la creazione di test.
Che cosa sono?
Karma, Mocha, Chai, Chrome headless, che meraviglia!
Karma è un harness di test che funziona con qualsiasi framework di test più diffuso (Jasmine, Mocha, QUnit).
Chai è una libreria di asserzioni che funziona con Node e nel browser. Abbiamo bisogno di quest'ultimo.
Headless Chrome è un modo per eseguire il browser Chrome in un ambiente headless senza l'interfaccia utente completa del browser. Uno dei vantaggi dell'utilizzo di Chrome headless (rispetto al test diretto in Node) è che i test JavaScript verranno eseguiti nello stesso ambiente degli utenti del tuo sito. Chrome headless ti offre un contesto del browser reale senza il sovraccarico di memoria dell'esecuzione di una versione completa di Chrome.
Configurazione
Installazione
Installa Karma, i plug-in pertinenti e i runner dei test utilizzando yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
oppure utilizza npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
In questo post utilizzo Mocha e Chai, ma se non ti piacciono, scegli la tua libreria di assert preferita che funzioni nel browser.
Configurare Karma
Crea un file karma.conf.js che utilizzi il programma di avvio 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
})
}
Scrivi un test
Crea un test in /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));
});
});
});
Esegui i test
Aggiungi uno script test in package.json che esegua Karma con le nostre impostazioni.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Quando esegui i test (yarn test), Chrome Headless dovrebbe avviarsi e stampare i risultati nel terminale:
Creare un proprio programma di avvio di Headless Chrome
Il programma di avvio ChromeHeadless è fantastico perché funziona immediatamente per i test su Headless Chrome. Include i flag di Chrome appropriati per te e avvia una versione di Chrome per il debug remoto sulla porta 9222.
Tuttavia, a volte potresti voler passare flag personalizzati a Chrome o modificare la porta di debug remoto utilizzata dal programma di avvio. A tale scopo, crea un campo customLaunchers
che espanda il comando ChromeHeadless di avvio 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']
}
},
}
};
Eseguire tutto su Travis CI
La parte difficile è configurare Karma per eseguire i test in Chrome Headless. L'integrazione continua in Travis è a portata di mano.
Per eseguire i test in Travis, utilizza dist: trusty e installa il componente aggiuntivo stabile di 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