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

إريك بيدلمان
Twitter GitHub الصفحة الرئيسية

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

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

يا إلهي!

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

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

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

إعداد 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 بلا واجهة مستخدم رسومية ويعرض النتائج إلى الوحدة الطرفية:

الإخراج من Karma

إنشاء مشغِّل 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