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

אם אתם רוצים להריץ בדיקות אוטומטיות באמצעות Headless Chrome, זה המקום בשבילכם. במאמר הזה נסביר איך להגדיר את כל מה שצריך באמצעות Karma כ-runner ו-Mocha+Chai ליצירת בדיקות.

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

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

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

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

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

פלט מ-Karma.

יצירת מרכז אפליקציות משלכם ל-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