تست خودکار با Headless Chrome

اگر می‌خواهید آزمایش‌های خودکار را با استفاده از Headless Chrome انجام دهید، دیگر دنبال این نباشید! این مقاله همه شما را با استفاده از Karma به عنوان یک دونده و Mocha+chai برای تست‌های نویسندگی آماده می‌کند.

این چیزها چیست؟

کارما، موکا، چای، کروم بدون سر، اوه من!

Karma یک مهار تست است که با هر یک از محبوب ترین چارچوب های تست ( Jasmine ، Mocha ، QUnit ) کار می کند.

Chai یک کتابخانه ادعایی است که با Node و در مرورگر کار می کند. ما به دومی نیاز داریم.

هدلس کروم راهی برای اجرای مرورگر کروم در محیط بدون سر و بدون رابط کاربری کامل مرورگر است. یکی از مزایای استفاده از Headless Chrome (برخلاف آزمایش مستقیم در Node) این است که تست های جاوا اسکریپت شما در همان محیطی که کاربران سایت شما انجام می دهند، اجرا می شود. Headless Chrome به شما یک زمینه واقعی مرورگر را می‌دهد بدون اینکه سربار حافظه اجرای نسخه کامل کروم را به همراه داشته باشد.

برپایی

نصب و راه اندازی

Karma، پلاگین های مربوطه، و اجراکننده های آزمایشی را با استفاده از yarn نصب کنید:

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

یا از npm استفاده کنید:

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

من در این پست از Mocha و Chai استفاده می کنم، اما اگر طرفدار نیستید، کتابخانه ادعایی مورد علاقه خود را که در مرورگر کار می کند انتخاب کنید.

کارما را پیکربندی کنید

یک فایل karma.conf.js ایجاد کنید که از راه‌انداز 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
  })
}

یه تست بنویس

یک تست در /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));
    });
  });
});

تست های خود را اجرا کنید

یک اسکریپت test در package.json اضافه کنید که Karma را با تنظیمات ما اجرا می کند.

package.json

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

وقتی آزمایش‌های خود را اجرا می‌کنید ( yarn test )، Headless Chrome باید فعال شود و نتایج را به ترمینال ارسال کند:

ایجاد لانچر Headless Chrome خودتان

راه‌انداز ChromeHeadless عالی است زیرا برای آزمایش روی Headless Chrome کاملاً کار می‌کند. این شامل پرچم‌های Chrome مناسب برای شما است و نسخه اشکال‌زدایی از راه دور Chrome را در پورت 9222 راه‌اندازی می‌کند.

با این حال، گاهی اوقات ممکن است بخواهید پرچم‌های سفارشی را به Chrome ارسال کنید یا پورت اشکال‌زدایی از راه دور را که راه‌انداز استفاده می‌کند تغییر دهید. برای انجام این کار، یک فیلد customLaunchers ایجاد کنید که راه‌انداز پایه 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']
      }
    },
  }
};

اجرای همه چیز در Travis CI

پیکربندی Karma برای اجرای آزمایشات شما در Headless Chrome بخش سخت است. ادغام مداوم در تراویس فقط چند خط فاصله دارد!

برای اجرای آزمایش‌های خود در تراویس، dist: trusty استفاده کنید و افزونه پایدار 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