การทดสอบอัตโนมัติกับ Chrome แบบ Headless

หากต้องการทำการทดสอบอัตโนมัติโดยใช้ Chrome แบบ Headless ก็ไม่ต้องดำเนินการใดเพิ่มเติม บทความนี้จะอธิบายวิธีตั้งค่าโดยใช้ Karma เป็น Runner และ Mocha+Chai สำหรับการเขียนทดสอบ

สิ่งเหล่านี้คืออะไร

Karma, Mocha, Chai, Headless Chrome, โอ้ พระเจ้า

Karma เป็นชุดทดสอบที่ทำงานร่วมกับเฟรมเวิร์กการทดสอบยอดนิยมใดก็ได้ (Jasmine, Mocha, QUnit)

Chai เป็นไลบรารีการยืนยันที่ทำงานร่วมกับ Node และในเบราว์เซอร์ เราต้องการตัวเลือกหลัง

Chrome แบบ Headless เป็นวิธีเรียกใช้เบราว์เซอร์ Chrome ในสภาพแวดล้อมแบบ Headless ที่ไม่มี UI ของเบราว์เซอร์แบบสมบูรณ์ ข้อดีอย่างหนึ่งของการใช้ Headless Chrome (เมื่อเทียบกับการทดสอบใน Node โดยตรง) คือระบบจะเรียกใช้การทดสอบ JavaScript ในสภาพแวดล้อมเดียวกับผู้ใช้เว็บไซต์ Chrome แบบ Headless จะให้บริบทเบราว์เซอร์จริงโดยไม่ต้องใช้หน่วยความจำเพิ่มเติมจากการเรียกใช้ 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

สร้างไฟล์ 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 แบบ Headless ควรเริ่มทำงานและแสดงผลลัพธ์ไปยังเทอร์มินัล

การสร้าง Launcher ของ Chrome แบบ Headless ของคุณเอง

เครื่องมือเปิด ChromeHeadless ยอดเยี่ยมเพราะพร้อมใช้งานทันทีสําหรับการทดสอบใน Chrome แบบ Headless ซึ่งจะมี Flag ของ Chrome ที่เหมาะสมสำหรับคุณ และเปิด Chrome เวอร์ชันแก้ไขข้อบกพร่องระยะไกลบนพอร์ต 9222

อย่างไรก็ตาม บางครั้งคุณอาจต้องการส่งแฟล็กที่กำหนดเองไปยัง Chrome หรือเปลี่ยนพอร์ตการแก้ไขข้อบกพร่องระยะไกลที่ Launcher ใช้ โดยสร้างช่อง customLaunchers ที่ขยาย Launcher ของ 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 แบบ Headless เป็นขั้นตอนที่ยาก การผสานรวมอย่างต่อเนื่องใน 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