Gözetimsiz Chrome ile otomatik test

Gözetimsiz Chrome'u kullanarak otomatik testler çalıştırmak istiyorsanız doğru yerdesiniz. Bu makalede, koşucu olarak Karma'yı, test yazmak için Mocha+Chai'yi ise kullanmaya hazır olacaksınız.

Bunlar nelerdir?

Karma, Mocha, Chai, Headless Chrome, aman tanrım!

Karma, en popüler test çerçevelerinden herhangi biriyle (Jasmine, Mocha, QUnit) çalışan bir test aracıdır.

Chai, Node ile ve tarayıcıda çalışan bir beyan kitaplığıdır. İkincisi gerekli.

Gözetimsiz Chrome, Chrome tarayıcıyı tam tarayıcı kullanıcı arayüzü olmadan gözetimsiz bir ortamda çalıştırmanın bir yoludur. Doğrudan Düğüm'de test etmek yerine Gözetimsiz Chrome kullanmanın avantajlarından biri, JavaScript testlerinizin sitenizin kullanıcılarıyla aynı ortamda yürütülmesidir. Gözetimli olmayan Chrome, Chrome'un tam sürümünü çalıştırmanın bellek yükü olmadan gerçek bir tarayıcı bağlamı sunar.

Kurulum

Kurulum

Karma, ilgili eklentileri ve test çalıştırıcılarını yarn kullanarak yükleyin:

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

veya npm kullanın:

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

Bu yayında Mocha ve Chai kullanıyorum, ancak bu içeriğin hayranı değilseniz tarayıcıda çalışan favori onay kitaplığınızı seçin.

Karmayı yapılandırma

ChromeHeadless başlatıcısını kullanan bir karma.conf.js dosyası oluşturun.

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 yazma

/test/test.js uygulamasında test oluşturun.

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

Testlerinizi çalıştırma

package.json'a, Karma'yı ayarlarımızla çalıştıran bir test komut dosyası ekleyin.

package.json

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

Testlerinizi çalıştırdığınızda (yarn test) Gözetimsiz Chrome etkinleşir ve sonuçları terminale gönderir:

Karma'dan çıkış.

Kendi Gözetimsiz Chrome başlatıcınızı oluşturma

ChromeHeadless başlatıcı, Gözetimsiz Chrome'da test için hazır olarak çalıştığından mükemmel bir seçenektir. Sizin için uygun Chrome işaretlerini içerir ve 9222 bağlantı noktasında Chrome'un uzaktan hata ayıklama sürümünü başlatır.

Ancak bazen Chrome'a özel işaretler iletmek veya başlatıcının kullandığı uzak hata ayıklama bağlantı noktasını değiştirmek isteyebilirsiniz. Bunun için temel ChromeHeadless başlatıcıyı genişleten bir customLaunchers alanını oluşturun:

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

Tüm özellikleri Travis CI'da çalıştırma

Karma'yı, testlerinizi Gözetimsiz Chrome'da çalıştıracak şekilde yapılandırmak en zor kısımdır. Travis'te sürekli entegrasyon sadece birkaç satır uzaklıkta!

Testlerinizi Travis'te çalıştırmak için dist: trusty kullanın ve Chrome kararlı eklentisini yükleyin:

.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