Nếu muốn chạy kiểm tra tự động bằng Chrome không có giao diện người dùng, bạn không cần làm gì nữa! Bài viết này sẽ hướng dẫn bạn cách thiết lập bằng cách sử dụng Karma làm trình chạy và Mocha+Chai để tạo kiểm thử.
Những thứ này là gì?
Karma, Mocha, Chai, Chrome không có giao diện người dùng, thật tuyệt!
Karma là một phần mềm khai thác kiểm thử hoạt động với mọi khung kiểm thử phổ biến nhất (Jasmine, Mocha, QUnit).
Chai là một thư viện câu nhận định hoạt động được với Nút và trong trình duyệt. Chúng ta cần thứ hai.
Chrome không có giao diện người dùng là một giải pháp để chạy trình duyệt Chrome trong môi trường không có giao diện người dùng mà không cần giao diện người dùng đầy đủ của trình duyệt. Một trong những lợi ích của việc sử dụng Chrome không có giao diện người dùng (thay vì kiểm thử trực tiếp trong Nút) là các kiểm thử JavaScript của bạn sẽ được thực thi trong cùng một môi trường với người dùng trang web. Chrome không có giao diện người dùng mang đến cho bạn ngữ cảnh trình duyệt thực tế mà không bị hao tổn bộ nhớ khi chạy phiên bản Chrome đầy đủ.
Thiết lập
Cài đặt
Cài đặt Karma, các trình bổ trợ, trình bổ trợ và trình chạy kiểm thử có liên quan bằng cách sử dụng yarn:
yarn add --dev karma karma-chrome-launcher karma-mocha karma-chai
yarn add --dev mocha chai
hoặc sử dụng npm:
npm i --save-dev karma karma-chrome-launcher karma-mocha karma-chai
npm i --save-dev mocha chai
Tôi đang dùng Mocha và Chai trong bài đăng này, nhưng nếu bạn không phải là người hâm mộ, hãy chọn thư viện câu nhận định yêu thích và hoạt động được trong trình duyệt.
Định cấu hình Karma
Tạo tệp karma.conf.js sử dụng trình chạy 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
})
}
Viết thử nghiệm
Tạo chương trình kiểm thử trong /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));
});
});
});
Chạy kiểm thử
Thêm tập lệnh test trong package.json chạy Karma với các chế độ cài đặt của chúng ta.
package.json
"scripts": {
"test": "karma start --single-run --browsers ChromeHeadless karma.conf.js"
}
Khi bạn chạy kiểm thử (yarn test), Chrome không có giao diện người dùng sẽ kích hoạt và xuất kết quả ra thiết bị đầu cuối:
Tạo trình chạy Chrome không có giao diện người dùng của riêng bạn
Trình chạy ChromeHeadless rất tuyệt vì nó hoạt động ngay từ đầu để kiểm thử trên Chrome không có giao diện người dùng. Phiên bản này bao gồm các cờ Chrome thích hợp cho bạn và khởi chạy phiên bản gỡ lỗi từ xa của Chrome trên cổng 9222.
Tuy nhiên, đôi khi bạn có thể muốn chuyển cờ tuỳ chỉnh đến Chrome hoặc thay đổi cổng gỡ lỗi từ xa mà trình chạy sử dụng. Để làm việc đó, hãy tạo một trường customLaunchers mở rộng trình chạy ChromeHeadless cơ sở:
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']
}
},
}
};
Chạy tất cả trên Travis CI
Phần khó khăn là định cấu hình Karma để chạy kiểm thử trong Chrome không có giao diện người dùng. Chỉ cần vài dòng nữa là bạn có thể tích hợp liên tục trong Travis!
Để chạy kiểm thử trong Travis, hãy sử dụng dist: trusty và cài đặt tiện ích bổ sung ổn định của 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