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

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

What are these things?

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

เอาต์พุตจาก Karma

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

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

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