Jeśli chcesz przeprowadzić automatyczne testy w Chrome bez interfejsu graficznego, nie musisz szukać! Z tego artykułu dowiesz się, jak rozpocząć korzystanie z Karma do biegania i tworzenia testów Mocha+Chai.
Co to jest?
Karma, Mocha, Chai, Chrome bez interfejsu graficznego, o rety!
Karma to platforma testowa, która współpracuje z dowolną z najpopularniejszych platform testowych (Jasmine, Mocha, QUnit).
Chai to biblioteka asercji, która współpracuje z węzłem i przeglądarką. Tego drugiego potrzebujemy.
Chrome bez interfejsu graficznego to sposób na uruchamianie przeglądarki Chrome w środowisku bez interfejsu graficznego bez interfejsu użytkownika. Jedną z zalet Chrome bez interfejsu graficznego (w przeciwieństwie do testowania bezpośrednio w Node) jest to, że testy JavaScript będą wykonywane w tym samym środowisku co użytkownicy witryny. Przeglądarka Chrome bez interfejsu graficznego daje dostęp do rzeczywistego kontekstu, bez zbędnego nakładu pracy związanego z uruchomieniem pełnej wersji Chrome.
Konfiguracja
Instalacja
Aby zainstalować Karma, odpowiednie wtyczki i testy uruchamiające, skorzystaj z programu yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
lub użyj npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
W tym poście używam Mocha i Chai, ale jeśli nie jesteś fanem, wybierz swoją ulubioną bibliotekę asercji, która działa w przeglądarce.
Skonfiguruj Karma
Utwórz plik karma.conf.js używający programu uruchamiającego 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
})
}
Pisanie testu
Utwórz test w: /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));
});
});
});
Przeprowadzanie testów
Dodaj w package.json skrypt test, który będzie uruchamiał Karma w naszych ustawieniach.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Po uruchomieniu testów (yarn test) przeglądarka Chrome bez interfejsu graficznego powinna się uruchomić i wysłać wyniki do terminala:
Tworzenie własnego programu uruchamiającego Chrome bez interfejsu graficznego
Menu z aplikacjami ChromeHeadless jest świetne, bo od razu po uruchomieniu sprawdza się w Chrome bez interfejsu graficznego. Zawiera odpowiednie flagi Chrome i uruchamia wersję Chrome do zdalnego debugowania na porcie 9222.
Czasami jednak możesz chcieć przekazać do Chrome niestandardowe flagi lub zmienić port debugowania zdalnego, którego używa program uruchamiający. Aby to zrobić, utwórz pole customLaunchers, które rozszerza podstawową Menu z aplikacjami 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']
}
},
}
};
Uruchomienie wszystkich narzędzi w Travis CI
Skonfigurowanie Karma do przeprowadzania testów w Chrome bez interfejsu graficznego to trudna część. Ciągła integracja w systemie Travis jest od razu po kilku linijkach.
Aby uruchomić testy w Travis, użyj programu dist: trusty i zainstaluj stabilny dodatek do 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