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

אריק בידלמן
Twitter GitHub דף הבית

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

מה זה?

קארמה, מוקה, צ'אי, Chrome ללא ממשק גרפי, אוי לי!

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

Chai היא ספרייה של טענת נכונות (assertions) שפועלת עם הצומת ובדפדפן. אנחנו צריכים את האפשרות השנייה.

באמצעות Chrome ללא GUI אפשר להפעיל את דפדפן Chrome בסביבה ללא GUI, ללא ממשק המשתמש המלא של הדפדפן. אחד היתרונות של השימוש ב-Chrome ללא ממשק גרפי (בניגוד לבדיקה ישירה ב-Node) הוא שבדיקות ה-JavaScript יבוצעו באותה סביבה שבה משתמשים משתמשים באתר. Chrome ללא ממשק גרפי מספק הקשר אמיתי לדפדפן ללא תקורה הזיכרון של הפעלת גרסה מלאה של Chrome.

Setup (הגדרה)

התקנה

מתקינים את 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

אני משתמש במוצ'ה ובצ'אי בפוסט הזה, אבל אם אתם לא מעריצים, בחרו את ספריית טענת הנכוֹנוּת (assertion) המועדפת עליכם מהדפדפן.

הגדרת קארמה

יצירת קובץ 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 מצוין כי הוא פועל ללא GUI לצורך בדיקה ב-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