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

헤드리스 Chrome을 사용하여 자동 테스트를 실행하고 싶다면 바로 실행할 수 있습니다. 이 도움말에서는 실행기로 Karma를 사용하고 테스트를 작성하는 데 Mocha+Chai를 사용할 수 있도록 모든 설정을 안내합니다.

이러한 요소는 무엇인가요?

카르마, 모카, 차이, 헤드리스 Chrome

Karma는 가장 인기 있는 테스트 프레임워크 (Jasmine, Mocha, QUnit)와 함께 작동하는 테스트 하네스입니다.

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

헤드리스 Chrome은 전체 브라우저 UI 없이 헤드리스 환경에서 Chrome 브라우저를 실행하는 방법입니다. Node에서 직접 테스트하는 대신 Headless Chrome을 사용하는 이점 중 하나는 JavaScript 테스트가 사이트 사용자와 동일한 환경에서 실행된다는 것입니다. 헤드리스 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의 출력입니다.

나만의 Headless 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