Автоматизированное тестирование с помощью Headless Chrome

Если вы хотите запускать автоматические тесты с помощью Headless Chrome, не ищите дальше! В этой статье вы узнаете, как настроить использование Karma в качестве средства запуска и Mocha+Chai для создания тестов.

Что это за вещи?

Карма, Мокко, Чай, Безголовый Хром, о боже!

Karma — это инструмент для тестирования, который работает с любой из самых популярных платформ тестирования ( Jasmine , Mocha , QUnit ).

Chai — это библиотека утверждений, которая работает с Node и в браузере. Нам нужно последнее.

Headless Chrome — это способ запуска браузера Chrome в автономной среде без полноценного пользовательского интерфейса браузера. Одним из преимуществ использования Headless Chrome (в отличие от тестирования непосредственно в Node) является то, что ваши тесты JavaScript будут выполняться в той же среде, что и пользователи вашего сайта. Безголовый Chrome предоставляет вам реальный контекст браузера без затрат памяти, присущих полной версии 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 , использующий средство запуска 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 с нашими настройками.

пакет.json

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

Когда вы запускаете тесты ( yarn test ), Headless Chrome должен запуститься и вывести результаты на терминал:

Создание собственного лаунчера Headless Chrome

Программа запуска ChromeHeadless великолепна, потому что она сразу же работает для тестирования в Headless Chrome. Он включает в себя соответствующие флаги Chrome и запускает версию Chrome для удаленной отладки на порту 9222 .

Однако иногда вам может потребоваться передать в Chrome собственные флаги или изменить порт удаленной отладки, который использует программа запуска. Для этого создайте поле 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 для запуска тестов в Headless Chrome — сложная задача. Непрерывная интеграция в 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