בדיקה אוטומטית עם דפדפן 'דפדפן ללא GUI'

אם אתם רוצים להריץ בדיקות אוטומטיות באמצעות דפדפן ללא ממשק גרפי, אין צורך בכך. המאמר הזה יעזור לך להיעזר בקארמה כריצה וב-Mocha+Chai לעריכת מבחנים.

מהם הדברים האלה?

Karma, ‏ Mocha, ‏ Chai, ‏ Headless Chrome, ‏ אוי ואבוי!

Karma היא מסגרת בדיקה שמתאימה לכל מסגרות הבדיקה הפופולריות ביותר (Jasmine, Mocha ו-QUnit).

Chai היא ספריית טענות נכוֹנוּת (assertion) שעובדת עם Node ובדפדפן. אנחנו זקוקים לאפשרות השנייה.

Headless Chrome הוא דרך להריץ את דפדפן Chrome בסביבה ללא ממשק משתמש מלא של דפדפן. אחד מהיתרונות של שימוש ב-Headless Chrome (לעומת בדיקה ישירות ב-Node) הוא שבדיקות ה-JavaScript יבוצעו באותה סביבה שבה משתמשים באתר. דפדפן ללא GUI מספק הקשר אמיתי לגבי הדפדפן, בלי התקורה של הזיכרון כשמריצים גרסה מלאה של 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.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), Headless Chrome אמור להיפתח ולהציג את התוצאות במסוף:

יצירת מרכז אפליקציות משלכם ל-Headless Chrome

מרכז האפליקציות ChromeHeadless מצוין כי הוא פועל מבלי שתצטרכו לבצע שינויים כדי לבדוק אותו ב-Headless 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 להרצת בדיקות ב-Headless 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