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

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

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

Karma, Mocha, Chai, Headless Chrome โอ้โห

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

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

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

Launcher ของ ChromeHeadless นั้นยอดเยี่ยมเพราะทำงานได้ทันทีสำหรับการทดสอบกับ Chrome แบบ Headless ซึ่งจะมี Chrome Flag ที่เหมาะสมสำหรับคุณ และเปิดใช้ 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