Angular Testing với Headless Chrome

Headless Chrome là một công cụ rất hữu ích cho việc kiểm thử tự động đặc biệt trong cái môi trường mà chúng ta không thể khởi chạy một trình duyệt thực tế ví dụ CI environment.

Cài đặt

Để sử dụng Headless Chrome với Angular, chúng ta cần tới package karma-chrome-launcher. Tuy nhiên bạn có thể kiểm tra trong package.json, nếu gói này đã tồn tại bạn ko cần cài nữa. Ở phiên bản gần đây Angular CLI đã thêm sẵn package này rồi.

Unit Test

Mặc định chúng ta có lệnh ng test dùng để khởi chạy unit testing. Lệnh này sẽ đi kèm tùy chọn watch, theo dõi thay đổi trong code và chạy lại quá trình test. Chúng ta sẽ sửa lại lệnh này chút để unit test hoạt động với Chrome Headless.

"scripts": {
  "test-headless": "ng test --watch=false --browsers=ChromeHeadless"
},

Trong mục scripts trong file package.json, chúng ta sẽ thêm một câu lệnh mở rộng từ lệnh ng test ban đầu. Tùy chọn --watch=false chắc dễ hiểu rồi, tắt chức năng watch, chạy 1 lần thôi. Tùy chọn --browsers=ChromeHeadless cũng dễ hiểu nốt, sử dụng trình duyệt Chrome Headless thay cho trình duyệt mặc định.

Rồi, giờ chạy npm run test-headless thử xem.

E2E

Khi khởi tạo một ứng dụng Angular bằng Angular CLI, mặc định Protractor sẽ được cấu hình làm E2E testing runner của chúng ta.

Để thay đổi cấu hình testing cho Protractor thì phức tạp hơn chút vì Protractor sử dụng file protractor.conf.js. Vì thế chúng ta sẽ chọc vào file này.

Các bạn tìm đến mục capabilities, thêm chromeOptions như sau:

capabilities: {
  chromeOptions: {
    args: [ "--headless" ]
  },
  'browserName': 'chrome'
},

Trong mục args, các bạn có thể thấy chúng ta có 1 argument là --headless giúp khởi động E2E test sử dụng Chrome Headless.

Đến đây chúng ta có thể thử chạy e2e bằng câu lệnh mặc định npm run e2e.

Tham khảo: https://blog.angularindepth.com/angular-testing-with-headless-chrome-d1343b349699