अगर आपको हेडलेस Chrome का इस्तेमाल करके ऑटोमेटेड टेस्ट चलाना है, तो इसके लिए आपको कहीं और जाने की ज़रूरत नहीं है! इस लेख में, कर्मा को रनर के तौर पर और मोका+चाई का इस्तेमाल ऑथरिंग टेस्ट के लिए किया जा सकता है.
ये क्या-क्या चीज़ें हैं?
कर्मा, मोका, चाय, हेडलेस Chrome, ओह!
Karma एक टेस्टिंग हार्नेस है जो किसी भी सबसे लोकप्रिय टेस्टिंग फ़्रेमवर्क के साथ काम करता है, जैसे कि जैसमिन, मोका, और QUnit.
चाई एक दावा लाइब्रेरी है जो नोड और ब्राउज़र के साथ काम करती है. हमें बाद वाला टूल चाहिए.
हेडलेस Chrome के ज़रिए बिना यूज़र इंटरफ़ेस (यूआई) के, बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले ब्राउज़र में Chrome ब्राउज़र चलाया जा सकता है. हेडलेस Chrome का इस्तेमाल करने का एक फ़ायदा यह है कि सीधे तौर पर Node में टेस्ट करने के बजाय, आपके JavaScript टेस्ट उसी एनवायरमेंट में किए जाएंगे जिससे आपकी साइट के उपयोगकर्ता काम करते हैं. बिना ग्राफ़िक यूज़र इंटरफ़ेस वाले ब्राउज़र का इस्तेमाल करने पर, आपको 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
मैंने इस पोस्ट में मोका और चाई का इस्तेमाल किया है, लेकिन अगर आप इसके फ़ैन नहीं हैं, तो ब्राउज़र में काम करने वाली अपनी पसंदीदा असेस्मेंट लाइब्रेरी चुनें.
कर्मा को कॉन्फ़िगर करें
ChromeHeadless लॉन्चर का इस्तेमाल करने वाली karma.conf.js फ़ाइल बनाएं.
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 चालू हो जाएगा और टर्मिनल को नतीजे देगा:
अपना खुद का हेडलेस 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 में टेस्ट चलाने के लिए, Karma को कॉन्फ़िगर करना सबसे मुश्किल काम है. 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