बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome की मदद से, अपने-आप होने वाली टेस्टिंग

अगर आपको Headless Chrome का इस्तेमाल करके, अपने-आप चलने वाले टेस्ट चलाने हैं, तो यहां जाएं! इस लेख में, एक रनर के तौर पर कर्मा और मोका+चाय का इस्तेमाल करके टेस्टिंग टेस्ट करने के बारे में पूरी जानकारी दी गई है.

ये चीज़ें क्या हैं?

कर्मा, मोका, चाय, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome, ओह!

Karma एक टेस्टिंग हार्नेस है, जो सबसे लोकप्रिय टेस्टिंग फ़्रेमवर्क (Jasmine, Mocha, QUnit) के साथ काम करता है.

Chai एक दावा लाइब्रेरी है जो नोड के साथ और ब्राउज़र में काम करती है. हमें बाद वाले विकल्प की ज़रूरत है.

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome, Chrome ब्राउज़र को बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले एनवायरमेंट में चलाने का एक तरीका है. हेडलेस Chrome का इस्तेमाल करने का एक फ़ायदा यह है कि सीधे नोड में टेस्ट करने के बजाय, आपके JavaScript की जांच उसी एनवायरमेंट में की जाएगी जिसमें आपकी साइट के उपयोगकर्ता काम करते हैं. बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome, आपको Chrome के फ़ुल वर्शन को चलाने के लिए मेमोरी के ओवरहेड के बिना ब्राउज़र का सटीक वर्शन उपलब्ध कराता है.

सेटअप

इंस्टॉल करना

yarn का इस्तेमाल करके, Karma, काम के प्लग इन, और टेस्ट रनर इंस्टॉल करें:

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

इस पोस्ट में मेरे लिए मोका और चाय का इस्तेमाल किया गया है. अगर आप इसके प्रशंसक नहीं हैं, तो ब्राउज़र में काम करने वाली अपनी पसंदीदा दावा लाइब्रेरी चुनें.

Karma को कॉन्फ़िगर करना

ऐसी 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) जांच चलाने पर, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाला Chrome ट्रिगर हो जाएगा और उससे जुड़े नतीजे टर्मिनल पर भेज देंगे:

अपना Headless Chrome लॉन्चर बनाना

ChromeHeadless लॉन्चर बहुत अच्छा है, क्योंकि यह बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome पर जांच करने के लिए, बिना किसी सेटअप के काम करता है. इसमें आपके लिए सही 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']
      }
    },
  }
};

Travis CI पर इसे चलाना

बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले Chrome में टेस्ट चलाने के लिए, कर्मा को कॉन्फ़िगर करना सबसे मुश्किल काम है. Travis में लगातार इंटिग्रेशन करने के लिए, बस कुछ लाइनें लिखनी होती हैं!

Travis में अपने टेस्ट चलाने के लिए, 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