Frontend Testing và những điều cần chú trọng trong thử nghiệm

Trong mỗi một project, khâu quan trọng mà không ai có thể bỏ qua đó là kiểm tra và chạy thử chương trình. Dành cho những bạn đang nghiên cứu làm web, hãy cùng xem Test frontend thì chúng mình phải làm những gì nhé!

1. Frontend Testing là gì?
Frontend Testing là một thuật ngữ bao gồm nhiều chiến lược thử nghiệm khác nhau. Một người kiểm thử cần hiểu biết tốt về các yêu cầu kinh doanh (business) để thực hiện tốt loại thử nghiệm này.

Vậy Frontend Testing hướng đến việc thử nghiệm những phần nào?

Mọi thứ hiện diện trên màn hình (User Interface)
Đối với một ứng dụng Web, kiểm tra Frontend sẽ bao gồm cả việc kiểm tra các chức năng như Biểu mẫu, Biểu đồ, Menu...cũng như Javascript liên quan.

2. Tại sao cần chú trọng thử nghiệm Frontend?
Bởi vì các trang Web và Ứng dụng ngày càng phức tạp hơn bao giờ hết:
Có nhiều Mã code được viết trên Frontend: Đã có sự sai khác đáng kể về chức năng từ máy chủ (Server) sang máy khách (Client), đặc biệt đối với các Website được xây dựng bởi framworks Angular and React.
Websites tích hợp nhiều dịch vụ hơn: SaaS (Software as a Service) ngày càng phổ biến, điều đó có nghĩa là bạn phải đối phó với các dịch vụ của bên thứ 3 gây ra nhiều vấn đề không tương thích trên Website của bạn.
Các Websites sẽ được sử dụng trên nhiều trình duyệt hơn: Ngoài Desktop, Laptop, các websites còn mong muốn được chạy trơn tru trên nhiều thiết bị và trình duyệt khác như: mobile, TV, Tablet, Car...
Đối tượng và nhu cầu ngày càng đa dạng: Từ trẻ em cho đến người lớn, giao diện người dùng cần được đáp ứng phù hợp.
Bởi vì có rất nhiều lỗi tinh vi có thể xảy ra tại giao diện người dùng:

Những thay đổi nhỏ về CSS cũng có thể làm giao diện người dùng trở nên tồi tệ hơn.
Các thay đổi JavaScript có thể phá vỡ giao diện người dùng.
Các dịch vụ bên thứ 3 không tương thích với nhau.

3. Các công cụ hỗ trợ kiểm thử Frontend
Dưới đây là một số công cụ phổ biến:
Grunt: Grunt là một trình chạy tác vụ JavaScript, cung cấp nhiều Plugin được đóng gói cho các tác vụ thông thường.
Tìm hiểu thêm về Grunt tại đây: https://gruntjs.com/

LiveReload LiveReload là một giao thức Web đơn giản. Nó kích hoạt các sự kiện cho khách hàng bất cứ khi nào các tệp được sửa đổi. Khách hàng cũng có thể xử lý sự kiện này theo cách của họ, ngay cả khi trường hợp sử dụng phổ biến nhất là khi tệp bị sửa đổi.
Tìm hiểu thêm về LiveReload tại đây: http://livereload.com/

Karma Karma là một công cụ chạy thử JavaScript. Nó cho phép bạn thực hiện các bài kiểm tra từ máy chủ (Server) đến Production.
Tìm hiểu thêm về Karma tại đây: https://karma-runner.github.io/latest/index.html

Nguồn: Viblo