헤드리스 Chrome을 통한 자동 테스트

에릭 비델만
Twitter GitHub 홈페이지

헤드리스 Chrome을 사용하여 자동 테스트를 실행하려면 더 이상 해보지 마세요. 이 문서에서는 Karma를 실행기로 사용하고 Mocha+Chai를 사용해 테스트를 작성하는 과정을 안내합니다.

어떤 것들이 있나요?

카르마, 모카, 차이, 헤드리스 Chrome, 세상에!

Karma는 가장 많이 사용되는 테스트 프레임워크 (Jasmine, Mocha, QUnit)에서 작동하는 테스트 하네스입니다.

Chai는 Node와 브라우저에서 작동하는 어설션 라이브러리입니다. 후자가 필요합니다.

헤드리스 Chrome은 전체 브라우저 UI 없이 헤드리스 환경에서 Chrome 브라우저를 실행하는 방법입니다. 노드에서 직접 테스트하는 대신 헤드리스 Chrome을 사용할 때의 이점 중 하나는 자바스크립트 테스트가 사이트 사용자와 동일한 환경에서 실행된다는 점입니다. 헤드리스 Chrome은 전체 버전의 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와 Chai를 사용하고 있지만, 자주 사용하지 않는다면 브라우저에서 작동하는 어설션 라이브러리를 선택하세요.

Karma 구성

ChromeHeadless 런처를 사용하는 karma.conf.js 파일을 만듭니다.

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));
    });
  });
});

테스트 실행

설정으로 Karma를 실행하는 test 스크립트를 package.json에 추가합니다.

package.json

"scripts": {
  "test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}

테스트 (yarn test)를 실행하면 헤드리스 Chrome이 실행되고 결과를 터미널에 출력합니다.

Karma의 출력

나만의 헤드리스 Chrome 런처 만들기

ChromeHeadless 런처는 헤드리스 Chrome에서 테스트할 때 즉시 작동하므로 유용합니다. 여기에는 적절한 Chrome 플래그가 포함되며 포트 9222에서 Chrome의 원격 디버깅 버전이 실행됩니다.

그러나 Chrome에 맞춤 플래그를 전달하거나 런처에서 사용하는 원격 디버깅 포트를 변경해야 할 수도 있습니다. 이렇게 하려면 기본 ChromeHeadless 런처를 확장하는 customLaunchers 필드를 만듭니다.

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에서 모든 기능 실행하기

헤드리스 Chrome에서 테스트를 실행하도록 Karma를 구성하는 것은 어려운 작업입니다. 몇 줄이면 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