Jeśli chcesz uruchamiać testy automatyczne za pomocą Chrome bez interfejsu graficznego, to właśnie to znajdziesz w tym artykule. Z tego artykułu dowiesz się, jak skonfigurować Karma jako narzędzie do uruchamiania testów i Mocha+Chai do ich tworzenia.
Co to jest?
Karma, Mocha, Chai, Headless Chrome, oh my!
Karma to zestaw narzędzi do testowania, który działa z dowolną z najpopularniejszych platform testowych (Jasmine, Mocha, QUnit).
Chai to biblioteka asercji, która działa z Node i w przeglądarce. Potrzebujemy tego drugiego.
Chrome bez interfejsu graficznego to sposób na uruchomienie przeglądarki Chrome w srodowisku bez interfejsu użytkownika. Jedną z zalet korzystania z Chrome bez przeglądarki (w przeciwieństwie do testowania bezpośrednio w Node) jest to, że testy JavaScript będą wykonywane w tym samym środowisku co użytkownicy Twojej witryny. Chrome bez interfejsu graficznego zapewnia kontekst przeglądarki bez obciążenia pamięci, jakie powoduje uruchamianie pełnej wersji Chrome.
Konfiguracja
Instalacja
Zainstaluj Karma, odpowiednie wtyczki i programy do testów za pomocą yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
lub 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 bibliotek Mocha i Chai, ale jeśli nie są Ci one odpowiadać, wybierz ulubioną bibliotekę asercji, która działa w przeglądarce.
Konfigurowanie funkcji Karma
Utwórz plik karma.conf.js, który używa 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));
});
});
});
Uruchamianie testów
Dodaj skrypt test w package.json, który uruchamia Karma z naszymi ustawieniami.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Gdy uruchomisz testy (yarn test), Chrome bez interfejsu graficznego powinien się uruchomić i wyświetlić wyniki w terminalu:
Tworzenie własnego uruchamiacza Chrome bez interfejsu graficznego
Narzędzie ChromeHeadless jest świetne, ponieważ można go od razu używać do testowania w Chrome bez interfejsu graficznego. Zawiera on odpowiednie flagi Chrome i uruchamia wersję Chrome do zdalnego debugowania na porcie 9222.
Czasami jednak może być konieczne przekazanie niestandardowych flag do Chrome lub zmiana portu zdalnego debugowania używanego przez program uruchamiający. Aby to zrobić, utwórz pole customLaunchers, które rozszerza podstawowy ChromeHeadlesslauncher:
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']
}
},
}
};
Uruchamianie wszystkiego w Travis CI
Konfigurowanie Karma do uruchamiania testów w Chrome bez interfejsu graficznego jest trudne. Wystarczy kilka linii kodu, aby włączyć ciągłą integrację w Travisie.
Aby uruchomić testy w Travisie, użyj dist: trusty i zainstaluj dodatek do Chrome w wersji stabilnej:
.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