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

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

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

קארמה, מוקה, צ'אי, Chrome ללא GUI, אוי לי!

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

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

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

הגדרה

התקנה

באמצעות yarn מתקינים את Karma, את יישומי הפלאגין הרלוונטיים ואת הרצת הבדיקות:

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 ובצ'אי, אבל אם אתם לא חובבים, תוכלו לבחור את ספריית טענות הנכונות (assertions) המועדפת עליכם בדפדפן.

הגדרת קארמה

יצירת קובץ 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 להרצת בדיקות ב-Headless Chrome היא החלק הקשה. רק עוד כמה שורות אפשר יהיה לבצע אינטגרציה רציפה (CI) ב-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