Test automatici con Chrome headless

Eric Bidelman

Se vuoi eseguire test automatici utilizzando Chrome senza testa, non cercare oltre. In questo articolo imparerai a usare Karma come runner e Mocha+Chai per creare i test.

Che cosa sono?

Karma, Mocha, Chai, Headless Chrome, oh santo cielo!

Karma è un'apparecchiatura di test che funziona con uno dei framework di test più diffusi (Jasmine, Mocha, QUnit).

Chai è una libreria di asserzioni che funziona con Node e nel browser. Abbiamo bisogno della seconda.

Headless Chrome è un modo per eseguire il browser Chrome in un ambiente headless senza l'interfaccia utente completa del browser. Uno dei vantaggi dell'utilizzo di Chrome headless (anziché dei test diretti in Node) è che i test JavaScript verranno eseguiti nello stesso ambiente degli utenti del tuo sito. Headless Chrome offre un contesto reale del browser senza l'overhead di memoria necessario per l'esecuzione di una versione completa di Chrome.

Configurazione

Installazione

Installa Karma, i plug-in pertinenti e i runner del test utilizzando yarn:

yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai

o usa npm:

npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai

In questo post ho scelto Mocha e Chai, ma se non sei un fan, scegli la tua libreria di asserzioni preferita che funziona nel browser.

Configura Karma

Crea un file karma.conf.js che utilizza Avvio app 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
  })
}

Scrivi un test

Crea un 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));
    });
  });
});

Esegui i test

Aggiungi uno script test in package.json che esegua Karma con le nostre impostazioni.

package.json

"scripts": {
  "test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}

Quando esegui i test (yarn test), Chrome headless dovrebbe attivarsi e restituire i risultati al terminale:

Output da Karma.

Creazione del tuo Avvio app Headless per Chrome

Avvio app ChromeHeadless è fantastico perché è pronto all'uso per i test su Chrome senza testa. Include i flag di Chrome appropriati e avvia una versione di debug remoto di Chrome sulla porta 9222.

Tuttavia, a volte potresti voler passare flag personalizzati a Chrome o modificare la porta di debug remoto utilizzata da Avvio app. Per farlo, crea un campo customLaunchers che estenda l'Avvio app di 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']
      }
    },
  }
};

Tutto su Travis CI

Configurare Karma per eseguire i test in Chrome Headless è la parte più difficile. L'integrazione continua in Travis è a poche righe di distanza!

Per eseguire i test in Travis, utilizza dist: trusty e installa il componente aggiuntivo stabile di 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