Jika Anda ingin menjalankan pengujian otomatis menggunakan Headless Chrome, cari tahu lebih lanjut. Artikel ini akan membantu Anda menyiapkan cara menggunakan Karma sebagai runner dan Mocha+Chai untuk membuat pengujian.
Apa saja hal-hal tersebut?
Karma, Mocha, Chai, Chrome Headless, astaga!
Karma adalah harness pengujian yang berfungsi dengan salah satu framework pengujian paling populer (Jasmine, Mocha, QUnit).
Chai adalah library pernyataan yang berfungsi dengan Node dan di browser. Kita butuh yang terakhir.
Headless Chrome adalah cara untuk menjalankan browser Chrome di lingkungan headless tanpa UI browser lengkap. Salah satu manfaat menggunakan Headless Chrome (bukan menguji langsung di Node) adalah pengujian JavaScript Anda akan dijalankan di lingkungan yang sama dengan pengguna situs Anda. Chrome Headless memberi Anda konteks browser yang sebenarnya tanpa overhead memori untuk menjalankan Chrome versi lengkap.
Penyiapan
Penginstalan
Instal Karma, plugin yang relevan, dan runner pengujian menggunakan yarn
:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
atau gunakan npm
:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Saya menggunakan Mocha dan Chai dalam postingan ini, tetapi jika Anda bukan penggemar, pilih library pernyataan favorit Anda yang berfungsi di browser.
Konfigurasi Karma
Buat file karma.conf.js
yang menggunakan peluncur 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
})
}
Menulis pengujian
Buat pengujian di /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));
});
});
});
Jalankan pengujian Anda
Tambahkan skrip test
di package.json
yang menjalankan Karma dengan setelan kita.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Saat Anda menjalankan pengujian (yarn test
), Chrome Headless akan aktif dan menampilkan
hasilnya ke terminal:
Membuat peluncur Chrome Headless Anda sendiri
Peluncur ChromeHeadless
sangat bagus karena dapat langsung digunakan untuk
pengujian di Headless Chrome. Rilis ini mencakup tanda Chrome yang sesuai untuk Anda dan
meluncurkan versi proses debug jarak jauh untuk Chrome pada port 9222
.
Namun, terkadang Anda mungkin ingin meneruskan flag kustom ke Chrome atau mengubah
port proses debug jarak jauh yang digunakan peluncur. Untuk melakukannya, buat kolom customLaunchers
yang memperluas peluncur ChromeHeadless
dasar:
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']
}
},
}
};
Menjalankan semuanya di Travis CI
Mengonfigurasi Karma untuk menjalankan pengujian di Headless Chrome adalah bagian yang sulit. Continuous integration di Travis hanya memerlukan beberapa baris.
Untuk menjalankan pengujian di Travis, gunakan dist: trusty
dan instal add-on stabil 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