Als u geautomatiseerde tests wilt uitvoeren met Headless Chrome, hoeft u niet verder te zoeken! In dit artikel krijg je alles te zien met Karma als hardloper en Mocha+Chai voor het schrijven van tests.
Wat is dit allemaal?
Karma, Mocha, Chai, Headless Chrome, oh my!
Karma is een testharnas dat werkt met elk van de meest populaire testframeworks ( Jasmine , Mocha , QUnit ).
Chai is een beweringsbibliotheek die werkt met Node en in de browser. Dat laatste hebben wij nodig.
Headless Chrome is een manier om de Chrome-browser in een headless-omgeving uit te voeren zonder de volledige browser-UI. Een van de voordelen van het gebruik van Headless Chrome (in tegenstelling tot rechtstreeks testen in Node) is dat uw JavaScript-tests in dezelfde omgeving worden uitgevoerd als de gebruikers van uw site. Headless Chrome biedt u een echte browsercontext zonder de geheugenoverhead die gepaard gaat met het uitvoeren van een volledige versie van Chrome.
Opgericht
Installatie
Installeer Karma, de relevante plug-ins en de testlopers met behulp van yarn :
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
of gebruik npm :
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Ik gebruik Mocha en Chai in dit bericht, maar als je geen fan bent, kies dan je favoriete beweringsbibliotheek die in de browser werkt.
Configureer Karma
Maak een karma.conf.js bestand dat gebruikmaakt van het ChromeHeadless opstartprogramma.
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
})
}
Schrijf een test
Maak een test in /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));
});
});
});
Voer uw tests uit
Voeg een test toe in package.json dat Karma uitvoert met onze instellingen.
pakket.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Wanneer u uw tests uitvoert ( yarn test ), zou Headless Chrome moeten opstarten en de resultaten naar de terminal moeten sturen:
Uw eigen Headless Chrome-launcher maken
Het ChromeHeadless opstartprogramma is geweldig omdat het kant-en-klaar werkt voor testen op Headless Chrome. Het bevat de juiste Chrome-vlaggen voor u en start een versie voor foutopsporing op afstand van Chrome op poort 9222 .
Soms wilt u echter aangepaste vlaggen doorgeven aan Chrome of de poort voor foutopsporing op afstand wijzigen die het opstartprogramma gebruikt. Om dat te doen, maakt u een customLaunchers veld dat het basis ChromeHeadless opstartprogramma uitbreidt:
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']
}
},
}
};
Draai het allemaal op Travis CI
Het configureren van Karma om uw tests uit te voeren in Headless Chrome is het moeilijkste gedeelte. Continue integratie in Travis is slechts een paar regels verwijderd!
Om uw tests in Travis uit te voeren, gebruikt u dist: trusty en installeert u de stabiele Chrome-add-on:
.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