Wenn Sie automatisierte Tests mit Headless Chrome durchführen möchten, sind Sie hier richtig. In diesem Artikel erfahren Sie, wie Sie Karma als Runner und Mocha+Chai zum Erstellen von Tests verwenden.
Worum geht es?
Karma, Mokka, Chai, Chrome ohne Kopf
Karma ist ein Testtool, das mit jedem der beliebtesten Test-Frameworks (Jasmine, Mocha, QUnit) funktioniert.
Chai ist eine Assertion-Bibliothek, die mit Node und im Browser funktioniert. Wir brauchen Letzteres.
Mit Headless Chrome kann der Chrome-Browser in einer monitorlosen Umgebung ohne die vollständige Browser-Benutzeroberfläche ausgeführt werden. Einer der Vorteile der Verwendung von Headless Chrome (im Vergleich zu Tests direkt in Node) besteht darin, dass Ihre JavaScript-Tests in derselben Umgebung wie Nutzer Ihrer Website ausgeführt werden. Die monitorlose Chrome-Version bietet einen echten Browserkontext, ohne den Speicheraufwand für die Ausführung einer Vollversion von Chrome zu erhöhen.
Einrichtung
Installation
Installieren Sie Karma, die relevanten Plug-ins und die Test-Runner mithilfe von yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
oder npm verwenden:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Ich verwende in diesem Beitrag Mocha und Chai. Falls Sie kein Fan sind, wählen Sie Ihre bevorzugte Assertion-Bibliothek aus, die im Browser funktioniert.
Karma konfigurieren
Erstelle eine karma.conf.js-Datei, die den ChromeHeadless-Launcher verwendet.
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
})
}
Test schreiben
Erstellen Sie einen 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));
});
});
});
Tests ausführen
Füge in package.json ein test-Skript hinzu, das Karma mit unseren Einstellungen ausführt.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Wenn Sie Ihre Tests ausführen (yarn test), sollte Headless Chrome gestartet und die Ergebnisse an das Terminal ausgegeben werden:
Eigenen monitorlosen Chrome-Launcher erstellen
Der ChromeHeadless-Launcher ist großartig, da er sofort für Tests in Headless Chrome funktioniert. Sie enthält die entsprechenden Chrome-Flags und startet eine Remote-Debugging-Version von Chrome auf Port 9222.
Manchmal möchten Sie jedoch benutzerdefinierte Flags an Chrome übergeben oder den vom Launcher verwendeten Remote-Debugging-Port ändern. Erstellen Sie dazu das Feld customLaunchers, das den Basis-Launcher ChromeHeadless erweitert:
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']
}
},
}
};
Alles auf Travis CI ausführen
Das Konfigurieren von Karma zum Ausführen von Tests in Headless Chrome ist der schwierige Teil. Continuous Integration in Travis ist nur ein paar Zeilen entfernt!
Wenn Sie Ihre Tests in Travis ausführen möchten, verwenden Sie dist: trusty und installieren Sie das Chrome-Add-on „stabile 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