Si vous souhaitez exécuter des tests automatisés à l'aide de Headless Chrome, vous êtes au bon endroit. Cet article explique comment configurer les tests avec Karma en tant que runner et avec Mocha+Chai pour la création de tests.
De quoi s'agit-il ?
Karma, Mocha, Thé, Chrome sans tête, oh mon dieu !
Karma est un atelier 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 ce dernier.
Headless Chrome permet d'exécuter le navigateur Chrome dans un environnement sans interface graphique, sans interface utilisateur complète. L'un des avantages de Chrome sans interface graphique (par opposition aux tests effectués directement dans Node) est que vos tests JavaScript sont exécutés dans le même environnement que les utilisateurs de votre site. Le mode sans interface graphique de Chrome vous offre un contexte de navigation réel sans avoir à gérer une version complète de Chrome.
Prérequis
Installation
Installez Karma, les plug-ins pertinents et les exécuteurs 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
J'utilise Mocha et Chai dans cet article, mais si vous n'êtes pas fan, choisissez votre bibliothèque d'assertions préférée qui fonctionne dans le navigateur.
Configurer Karma
Créez un fichier karma.conf.js qui utilise le lanceur d'applications 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), Chrome sans interface graphique doit se déclencher et afficher les résultats dans le terminal:
Créer votre propre lanceur d'applications Chrome sans interface graphique
Le lanceur ChromeHeadless est idéal, car il fonctionne directement pour les tests sur Chrome sans interface graphique. Il inclut les indicateurs Chrome appropriés et lance une version de débogage à distance de Chrome sur le port 9222.
Toutefois, vous aurez parfois besoin de transmettre des indicateurs personnalisés à Chrome ou de 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 d'applications de 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']
}
},
}
};
Tout exécuter sur Travis CI
Configurer Karma pour qu'il exécute vos tests dans Chrome sans interface graphique est la partie la plus difficile. L'intégration continue dans Travis n'est plus qu'à quelques lignes.
Pour exécuter vos tests dans Travis, utilisez dist: trusty et installez le module complémentaire Chrome stable:
.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