Если вы хотите запускать автоматические тесты с помощью 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