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 oraz Mocha i 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.js i w przeglądarce. Tego drugiego potrzebujemy.
Chrome bez interfejsu to sposób na uruchomienie przeglądarki Chrome w środowisku bez interfejsu użytkownika. Jedną z zalet Chrome bez interfejsu graficznego (w przeciwieństwie do testowania bezpośrednio w Node.js) jest to, że testy JavaScriptu będą przeprowadzane w tym samym środowisku, co użytkownicy witryny. Chrome bez interfejsu graficznego oferuje rzeczywisty kontekst przeglądarki bez konieczności korzystania z pamięci, która nie jest potrzebna w przypadku 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 w usłudze package.json skrypt test, który uruchamia Karmę 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. Kilka linii kodu wystarczy, aby skonfigurować 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