Automatisierte Tests mit Headless Chrome

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 einrichten.

Worum geht es?

Karma, Mocha, Chai, Headless Chrome – oh mein Gott!

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 brauchen Letzteres.

Mit Headless Chrome können Sie den Chrome-Browser in einer monitorlosen Umgebung ohne die vollständige Browser-UI ausführen. Einer der Vorteile von Headless Chrome (im Vergleich zu direkten Tests in Node) besteht darin, dass Ihre JavaScript-Tests in derselben Umgebung wie Nutzer Ihrer Website ausgeführt werden. Mit monitorlosem Chrome erhalten Sie einen echten Browserkontext, ohne den Arbeitsspeicher-Aufwand für eine Vollversion von Chrome.

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

Ich verwende in diesem Beitrag Mocha und Chai. Wenn Sie aber kein Fan sind, 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 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 werden und die Ergebnisse im Terminal ausgeben:

Eigenen Headless Chrome-Launcher erstellen

Der ChromeHeadless-Launcher ist sehr gut geeignet, weil er für Tests mit monitorlosem Chrome sofort einsatzbereit ist. 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 schwierige Teil besteht darin, Karma für die Tests in Headless Chrome zu konfigurieren. 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