Nếu bạn muốn chạy kiểm thử tự động bằng Headless Chrome, hãy tham khảo bài viết này! Bài viết này sẽ hướng dẫn bạn thiết lập mọi thứ bằng cách sử dụng Karma làm trình chạy và Mocha+Chai để tạo kiểm thử.
Những yếu tố này là gì?
Karma, Mocha, Chai, Chrome không có giao diện người dùng, ôi!
Karma là một bộ kiểm thử hoạt động với bất kỳ khung kiểm thử phổ biến nào (Jasmine, Mocha, QUnit).
Chai là một thư viện xác nhận hoạt động với Node và trong trình duyệt. Chúng ta cần cái sau.
Chrome không có giao diện người dùng là một cách để 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 Node) 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 của bạn. Chrome không có giao diện người dùng cung cấp cho bạn ngữ cảnh trình duyệt thực mà không gây hao tổn bộ nhớ khi chạy phiên bản đầy đủ của Chrome.
Thiết lập
Cài đặt
Cài đặt Karma, các trình bổ trợ và trình chạy kiểm thử có liên quan bằ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 sử dụng Mocha và Chai trong bài đăng này, nhưng nếu bạn không thích, hãy chọn thư viện xác nhận mà bạn yêu thích và hoạt động 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 mã kiểm thử
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 chương trình 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), Headless Chrome sẽ khởi động 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ời vì có thể dùng ngay để kiểm thử trên Headless Chrome. Tệp này bao gồm các cờ Chrome phù 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 truyề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
Việc định cấu hình Karma để chạy kiểm thử trong Headless Chrome là phần khó khăn. Bạn chỉ cần thêm vài dòng mã nữa là có thể tích hợp liên tục trong Travis!
Để chạy chương trình 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