Pengujian otomatis dengan Headless Chrome

Jika Anda ingin menjalankan pengujian otomatis menggunakan Chrome Headless, lihat di sini. Artikel ini akan menyiapkan semuanya menggunakan Karma sebagai runner dan Mocha+Chai untuk menulis pengujian.

Apa itu?

Karma, Mocha, Chai, Chrome Headless, astaga!

Karma adalah harness pengujian yang berfungsi dengan salah satu framework pengujian paling populer (Jasmine, Mocha, QUnit).

Chai adalah library pernyataan yang berfungsi dengan Node dan di browser. Kita memerlukan yang terakhir.

Chrome Headless adalah cara untuk menjalankan browser Chrome di lingkungan headless tanpa UI browser lengkap. Salah satu manfaat menggunakan Headless Chrome (bukan pengujian langsung di Node) adalah pengujian JavaScript Anda akan dijalankan di lingkungan yang sama dengan pengguna situs Anda. Headless Chrome memberi Anda konteks browser yang sebenarnya tanpa overhead memori saat menjalankan Chrome versi lengkap.

Penyiapan

Penginstalan

Instal Karma, plugin yang relevan, dan runner pengujian menggunakan yarn:

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

atau gunakan npm:

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

Saya menggunakan Mocha dan Chai dalam postingan ini, tetapi jika Anda tidak menyukainya, pilih library pernyataan favorit Anda yang berfungsi di browser.

Mengonfigurasi Karma

Buat file karma.conf.js yang menggunakan peluncur 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
  })
}

Menulis pengujian

Buat pengujian di /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));
    });
  });
});

Menjalankan pengujian Anda

Tambahkan skrip test di package.json yang menjalankan Karma dengan setelan kita.

package.json

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

Saat Anda menjalankan pengujian (yarn test), Chrome Headless akan aktif dan menampilkan hasil ke terminal:

Membuat peluncur Chrome Headless Anda sendiri

Peluncur ChromeHeadless sangat bagus karena dapat berfungsi secara optimal untuk pengujian di Headless Chrome. File ini menyertakan flag Chrome yang sesuai untuk Anda dan meluncurkan versi Chrome proses debug jarak jauh di port 9222.

Namun, terkadang Anda mungkin ingin meneruskan flag kustom ke Chrome atau mengubah port proses debug jarak jauh yang digunakan peluncur. Untuk melakukannya, buat kolom customLaunchers yang memperluas peluncur ChromeHeadless dasar:

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']
      }
    },
  }
};

Menjalankan semuanya di Travis CI

Mengonfigurasi Karma untuk menjalankan pengujian di Chrome Headless adalah bagian yang sulit. Continuous integration di Travis hanya berjarak beberapa baris.

Untuk menjalankan pengujian di Travis, gunakan dist: trusty dan instal add-on Chrome stabil:

.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