Wenn Sie automatisierte Tests mit Headless Chrome ausführen möchten, sind Sie hier genau richtig. In diesem Artikel erfahren Sie, wie Sie Karma als Runner und Mocha + Chai zum Erstellen von Tests einrichten.
Was sind das für Dinge?
Karma, Mocha, Chai, Headless Chrome, oh my!
Karma ist ein Test-Harness, das mit allen gängigen Test-Frameworks funktioniert (Jasmine, Mocha, QUnit).
Chai ist eine Assertion-Bibliothek, die mit Node und im Browser funktioniert. Wir benötigen Letzteres.
Mit Headless Chrome können Sie den Chrome-Browser in einer headless-Umgebung ohne die vollständige Browser-Benutzeroberfläche ausführen. Einer der Vorteile der Verwendung von Headless Chrome (im Gegensatz zum Testen direkt in Node) besteht darin, dass Ihre JavaScript-Tests in derselben Umgebung ausgeführt werden wie die Nutzer Ihrer Website. Headless Chrome bietet einen echten Browserkontext ohne den Arbeitsspeicher-Overhead, der beim Ausführen einer vollständigen Version von Chrome entsteht.
Einrichtung
Installation
Installieren Sie Karma, die relevanten Plug-ins und die Testläufer mit 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
In diesem Beitrag verwende ich Mocha und Chai. Wenn Sie diese Bibliotheken nicht mögen, wählen Sie Ihre bevorzugte Assertion-Bibliothek aus, die im Browser funktioniert.
Karma konfigurieren
Erstellen Sie 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ügen Sie package.json ein test-Script 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 werden und die Ergebnisse im Terminal ausgeben:
Eigenen Headless Chrome-Launcher erstellen
Der ChromeHeadless-Launcher ist ideal, da er sofort für Tests in Headless Chrome verwendet werden kann. Es 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 Remote-Debugging-Port ändern, den der Launcher verwendet. Dazu erstellen Sie ein customLaunchers-Feld, das den Basis-ChromeHeadless-Launcher 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
Der schwierigste Teil ist die Konfiguration von Karma, damit Ihre Tests in Headless Chrome ausgeführt werden. 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 stabile Chrome-Add-on:
.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