Pengujian otomatis dengan Headless Chrome

Jika Anda ingin menjalankan pengujian otomatis menggunakan Headless Chrome, cari tahu lebih lanjut. Artikel ini akan membantu Anda menyiapkan cara menggunakan Karma sebagai runner dan Mocha+Chai untuk membuat pengujian.

Apa saja hal-hal tersebut?

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 butuh yang terakhir.

Headless Chrome adalah cara untuk menjalankan browser Chrome di lingkungan headless tanpa UI browser lengkap. Salah satu manfaat menggunakan Headless Chrome (bukan menguji langsung di Node) adalah pengujian JavaScript Anda akan dijalankan di lingkungan yang sama dengan pengguna situs Anda. Chrome Headless memberi Anda konteks browser yang sebenarnya tanpa overhead memori untuk 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 bukan penggemar, pilih library pernyataan favorit Anda yang berfungsi di browser.

Konfigurasi 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));
    });
  });
});

Jalankan 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 hasilnya ke terminal:

Output dari Karma.

Membuat peluncur Chrome Headless Anda sendiri

Peluncur ChromeHeadless sangat bagus karena dapat langsung digunakan untuk pengujian di Headless Chrome. Rilis ini mencakup tanda Chrome yang sesuai untuk Anda dan meluncurkan versi proses debug jarak jauh untuk Chrome pada 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 Headless Chrome adalah bagian yang sulit. Continuous integration di Travis hanya memerlukan beberapa baris.

Untuk menjalankan pengujian di Travis, gunakan dist: trusty dan instal add-on stabil 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