Si vous souhaitez exécuter des tests automatisés avec Headless Chrome, ne cherchez plus. Cet article vous explique comment configurer Karma en tant que runner et Mocha+Chai pour l'écriture de tests.
De quoi s'agit-il ?
Karma, Mocha, Chai, Headless Chrome, oh my!
Karma est un harnais de test qui fonctionne avec tous les frameworks de test les plus courants (Jasmine, Mocha, QUnit).
Chai est une bibliothèque d'assertions qui fonctionne avec Node et dans le navigateur. Nous avons besoin de la seconde.
Headless Chrome est un moyen d'exécuter le navigateur Chrome dans un environnement headless sans l'interface utilisateur complète du navigateur. L'un des avantages de Chrome headless (par rapport aux tests directement dans Node) est que vos tests JavaScript seront exécutés dans le même environnement que les utilisateurs de votre site. Headless Chrome vous offre un contexte de navigateur réel sans les coûts de mémoire liés à l'exécution d'une version complète de Chrome.
Configuration
Installation
Installez Karma, les plug-ins pertinents et les outils de test à l'aide de yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
ou utiliser npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Dans cet article, j'utilise Mocha et Chai, mais si vous n'êtes pas fan, choisissez votre bibliothèque d'assertion préférée qui fonctionne dans le navigateur.
Configurer Karma
Créez un fichier karma.conf.js qui utilise le lanceur 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
})
}
Écrire un test
Créez un test dans /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));
});
});
});
Exécuter vos tests
Ajoutez un script test dans package.json qui exécute Karma avec nos paramètres.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Lorsque vous exécutez vos tests (yarn test), Headless Chrome doit se lancer et afficher les résultats dans le terminal:
Créer votre propre lanceur Chrome sans interface graphique
Le lanceur ChromeHeadless est excellent, car il fonctionne immédiatement pour les tests sur Chrome headless. Il inclut les indicateurs Chrome appropriés et lance une version de débogage à distance de Chrome sur le port 9222.
Toutefois, vous souhaiterez parfois transmettre des indicateurs personnalisés à Chrome ou modifier le port de débogage à distance utilisé par le lanceur d'applications. Pour ce faire, créez un champ customLaunchers qui étend le lanceur ChromeHeadless de 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']
}
},
}
};
Exécuter le tout sur Travis CI
La partie la plus difficile consiste à configurer Karma pour exécuter vos tests dans Headless Chrome. L'intégration continue dans Travis ne nécessite que quelques lignes de code.
Pour exécuter vos tests dans Travis, utilisez dist: trusty et installez le module complémentaire stable 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