হেডলেস ক্রোমের সাথে স্বয়ংক্রিয় পরীক্ষা

আপনি যদি হেডলেস ক্রোম ব্যবহার করে স্বয়ংক্রিয় পরীক্ষা চালাতে চান, তাহলে আর তাকাবেন না! এই নিবন্ধটি আপনাকে কারমাকে একজন রানার এবং মোচা+চাই ব্যবহার করে অথরিং পরীক্ষার জন্য সেট আপ করবে।

এই জিনিসগুলো কি?

কর্ম, মোচা, চাই, মাথাহীন ক্রোম, ওহ!

কর্ম হল একটি টেস্টিং জোতা যা সবচেয়ে জনপ্রিয় যেকোন টেস্টিং ফ্রেমওয়ার্কের সাথে কাজ করে ( Jasmine , Mocha , QUnit )।

Chai একটি দাবী গ্রন্থাগার যা নোড এবং ব্রাউজারে কাজ করে। আমাদের পরেরটা দরকার।

হেডলেস ক্রোম হল সম্পূর্ণ ব্রাউজার UI ছাড়াই হেডলেস পরিবেশে Chrome ব্রাউজার চালানোর একটি উপায়। হেডলেস ক্রোম (সরাসরি নোডে পরীক্ষা করার বিপরীতে) ব্যবহার করার সুবিধাগুলির মধ্যে একটি হল যে আপনার জাভাস্ক্রিপ্ট পরীক্ষাগুলি আপনার সাইটের ব্যবহারকারীদের মতো একই পরিবেশে কার্যকর করা হবে। হেডলেস ক্রোম আপনাকে Chrome এর সম্পূর্ণ সংস্করণ চালানোর মেমরি ওভারহেড ছাড়াই একটি বাস্তব ব্রাউজার প্রসঙ্গ দেয়।

সেটআপ

ইনস্টলেশন

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

আপনার পরীক্ষা চালান

package.json এ একটি test স্ক্রিপ্ট যোগ করুন যা আমাদের সেটিংসের সাথে Karma চালায়।

package.json

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

যখন আপনি আপনার পরীক্ষা চালান ( yarn test ), হেডলেস ক্রোম ফায়ার করা উচিত এবং ফলাফলগুলি টার্মিনালে আউটপুট করা উচিত:

আপনার নিজস্ব হেডলেস ক্রোম লঞ্চার তৈরি করা হচ্ছে

ChromeHeadless লঞ্চারটি দুর্দান্ত কারণ এটি হেডলেস ক্রোমে পরীক্ষার জন্য বাক্সের বাইরে কাজ করে৷ এতে আপনার জন্য উপযুক্ত Chrome পতাকা রয়েছে এবং পোর্ট 9222 এ Chrome এর একটি দূরবর্তী ডিবাগিং সংস্করণ চালু করে।

যাইহোক, কখনও কখনও আপনি 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']
      }
    },
  }
};

ট্র্যাভিস সিআই-তে এটি সব চালানো হচ্ছে

হেডলেস ক্রোমে আপনার পরীক্ষা চালানোর জন্য কর্মকে কনফিগার করা কঠিন অংশ। ট্র্যাভিসে ক্রমাগত একীকরণ মাত্র কয়েক লাইন দূরে!

ট্র্যাভিসে আপনার পরীক্ষা চালানোর জন্য, 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