Se você quer executar testes automatizados usando o Headless Chrome, não precisa mais procurar. Neste artigo, você aprenderá a configurar tudo usando o Karma como executor e o Mocha+Chai para a criação de testes.
O que são esses elementos?
Karma, Mocha, Chai, Headless Chrome, que maravilha!
O Karma é um harness de teste que funciona com qualquer um dos frameworks de teste mais conhecidos (Jasmine, Mocha, QUnit).
Chai é uma biblioteca de declarações que funciona com o Node e no navegador. Precisamos do segundo caso.
O Chrome sem comando é uma maneira de executar o navegador Chrome em um ambiente sem a interface completa. Um dos benefícios do uso do Chrome sem cabeça (em vez de testar diretamente no Node) é que seus testes de JavaScript serão executados no mesmo ambiente que os usuários do seu site. A versão headless do Chrome oferece um contexto real de navegador sem a sobrecarga de memória da execução de uma versão completa do navegador.
Configuração
Instalação
Instale o Karma, os plug-ins relevantes e os executores de teste usando yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
ou use npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Estou usando o Mocha e o Chai nesta postagem, mas, se você não gosta deles, escolha sua biblioteca de declarações favorita que funcione no navegador.
Configurar o Karma
Crie um arquivo karma.conf.js que use o iniciador 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
})
}
Criar um teste
Crie um teste em /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));
});
});
});
Executar seus testes
Adicione um script test em package.json que execute o Karma com nossas configurações.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Quando você executa seus testes (yarn test), o Headless Chrome é acionado e gera os resultados no terminal:
Como criar seu próprio iniciador do Headless Chrome
O iniciador ChromeHeadless é ótimo porque funciona sem precisar de configuração
para testes no Chrome sem cabeça. Ele inclui as flags apropriadas do Chrome e
inicia uma versão de depuração remota do Chrome na porta 9222.
No entanto, às vezes, você pode querer transmitir flags personalizadas para o Chrome ou mudar a
porta de depuração remota usada pelo iniciador. Para fazer isso, crie um campo customLaunchers
que estenda o iniciador ChromeHeadless básico:
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']
}
},
}
};
Como executar tudo no Travis CI
Configurar o Karma para executar testes no Headless Chrome é a parte difícil. Faltam poucas linhas para a integração contínua no Travis.
Para executar os testes no Travis, use dist: trusty e instale o complemento estável 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