الاختبار المبرمَج باستخدام Chrome بلا واجهة مستخدم رسومية

إذا أردت إجراء اختبارات مبرمَجة باستخدام Chrome بلا واجهة مستخدم رسومية، لا داعي للقلق. ستساعدك هذه المقالة في إعداد كلّ شيء باستخدام Karma كأداة تنفيذ وMocha+Chai لإنشاء الاختبارات.

ما هي هذه العناصر؟

Karma وMocha وChai وHeadless Chrome، يا له من اسماء!

Karma هو حِزمة اختبار تعمل مع أي من إطارات العمل الأكثر شيوعًا للاختبار (Jasmine وMocha وQUnit).

Chai هي مكتبة تأكيدات تعمل مع Node وفي المتصفّح. نحتاج إلى الأخير.

Chrome بدون واجهة مستخدم هو طريقة لتشغيل Chrome في بيئة بدون واجهة مستخدم بدون واجهة المستخدم الكاملة للمتصفّح. من بين مزايا استخدام Headless Chrome (بدلاً من الاختبار مباشرةً في Node) هو أنّه سيتم تنفيذ اختبارات JavaScript في البيئة نفسها التي يستخدمها مستخدمو موقعك الإلكتروني. يوفّر لك متصفّح Chrome الذي لا يتضمّن واجهة مستخدم رسومية سياق متصفّح حقيقي بدون التأثير في ذاكرة جهازك الناتج عن تشغيل إصدار كامل من 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

يمكنك إنشاء ملف 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)، من المفترض أن يتم تشغيل "Chrome بلا واجهة مستخدم رسومية" وعرض النتائج في وحدة التحكّم:

إنشاء مشغّل Chrome بلا واجهة مستخدم رسومية

إنّ مشغّل ChromeHeadless رائع لأنّه يعمل تلقائيًا لاختباره على "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 لتشغيل اختباراتك في "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