Tập tin HAR là gì?

❦ Tập tin HAR là một định dạng lưu trữ được một số công cụ sử dụng để trích xuất dữ liệu đã thu thập được. HAR viết tắt của cụm từ HTTP Archive – Lưu trữ HTTP. Về cơ bản, định dạng này là một tập tin JSON sử dụng một tập hợp các trường thông tin cụ thể. Lưu ý rằng, không phải mọi trường thông tin trong tập tin HAR đều bắt buộc, trong nhiều trường hợp một số thông tin sẽ không được lưu trong tập tin HAR.

Xem thêm từ nguồn – https://en.wikipedia.org/wiki/HAR

HAR file giúp tester và developer tái hiện được những con bug khó tính một cách hiệu quả nhờ biết được khách hàng (hay người dùng, user) đã gửi thông tin gì lên server và cả thời điểm thực hiện hành động nữa. Giúp điều tra trong logs của hệ thống và so sánh đối chiếu giữa các server hay services khác nhau một cách dễ dàng.

Nguyên gốc tiếng Anh

HAR (HTTP Archive) is a file format used by several HTTP session tools to export the captured data. The format is basically a JSON object with a particular set of fields. Note that not all the fields in the HAR format are mandatory, and in many cases, some information won't be saved to the file.

⚠ Lưu ý

Thường thì tập tin HAR chứa dữ liệu nhạy cảm bao gồm:

• Nội dung của trang web bạn đã tải xuống trong khi tạo file HAR
• Có cả Cookies của bạn, bất kỳ ai có tập tin HAR này đều có thể mạo danh tài khoản của bạn
• Tất cả thông tin bạn đã gửi trong request lúc bạn tạo file HAR như: thông tin cá nhân, mật khẩu, số thẻ tín dụng, v.v…

Vì thế, BẠN NÊN  thay đổi hoặc xóa thông tin nhạy cảm trong tập tin HAR bằng một trình soạn thảo văn bản bất kỳ như Notepad hoặc Sublime Text, trước khi gửi tập tin HAR cho người khác.

Tập tin HAR giúp gì trong kiểm thử

Thường thì mình sẽ cần thông tin này khi tester phát hiện bug nhưng developer không tái hiện được trên máy họ. Tương tự như trường hợp khách hàng cứ báo lỗi mà nhóm phát triển phần mềm thì mãi không tái hiện được. Trường hợp này là khi kiểm thử ứng dụng web, chứ không áp dụng được khi kiểm thử ứng dụng Windows hoặc trên mobile (riêng mobile thì mình sẽ thường quay lại video các bước thao tác). 

Khi phân tích nội dung của file HAR, bạn sẽ thấy được nội dung toàn bộ mọi request (yêu cầu) từ phía trình duyệt được gửi lên máy chủ – server side (hay còn gọi là Back-end side – BE). Nên khi bạn gửi 1 file HAR sang cho dev (lập trình viên) thì họ sẽ xem được mọi thứ giống như đang xem trên trình duyệt của bạn vậy. Như lưu ý ở trên, họ sẽ thấy mọi thông tin bao gồm cookies và mật khẩu, nên bạn cân nhắc thông tin này là thông tin đang được sử dụng để kiểm thử chứ không phải là trên môi trường thật (production).

Chính vì vậy file HAR rất hữu ích trong việc tái hiện lỗi và hỗ trợ khách hàng trên môi trường thực tế (production).

Cách tạo file HAR trên Chrome

Cách tạo file HAR trên trình duyệt Chrome (trên MacOS)

Bước 1: Mở devtool (viết tắt của Developer Tools) bằng cách bấm F12 hoặc Cmd + Option + I (trên macbook) và vào tab “Network”

Lưu ý: Để thu thập được mọi thông tin cần thiết, bạn nên:

• Nút tròn màu đỏ bên trái phải màu ĐỎ (là đang ghi lại các request)
• Check vào checkbox “Preserve log” để trình duyệt ghi lại mọi thông tin của request
• Vào tab “Fetch/XHR” để lọc các request lên server

Bước 2: Thực hiện thao tác trên ứng dụng web mà bạn muốn tạo file HAR

Bước 3: Click chuột phải vào request mà bạn muốn tạo file HAR

Bước 4: Click vào item cuối cùng trong menu “Save all as HAR with content”

Cách tạo file HAR trên Firefox

Tương tự như trên Chrome, bạn cũng có thể tạo file HAR trên Firefox, thực hiện các bước sau:

Bước 1: Mở Devtool trên Firefox, vào tab “Network” (Click vào Menu bên góc phải trên > Developer > Network hoặc bấm Cmd-Option-E trên macbook)

Bước 2: Chọn “Persist logs” bên phải (trong phần devtool)

Bước 3: Thao tác trên web bạn đang kiểm thử (để tái hiện lỗi cần tạo file HAR)

Bước 4: Click phải vào request cần tạo file HAR >> và chọn “Save all as HAR“

Cách tạo file HAR trên MS Edge

Tương tự như trên Chrome và Firefox, bạn cũng có thể tạo file HAR trên MS Edge

Bước 1: Mở Devtool trên MS Edge (Click vào … ở góc phải trên >> Click “More Tools” >> Click “Developer Tools” hoặc bấm Cmd+Option+I trên macbook)

Bước 2: Vào tab “Network”

Bước 3: Chọn “Preserve log” (nhớ để ý nút đỏ vuông bên trái >> đang ghi nhận request)

Bước 4: Chọn “Fetch/XHR” để lọc các request lên server

Bước 5: Tái hiện lỗi cần tạo file HAR

Bước 6: Click phải vào request cần tạo file HAR

Bước 7: Chọn “Save all as HAR with content”

Công cụ xem file HAR

Trên thị trường có nhiều công cụ (tool) giúp bạn xem/đọc được nội dung file HAR nhưng tool mình thích nhất là HAR Analyzer  của Google (https://toolbox.googleapps.com/apps/har_analyzer/).  

Đây là một công cụ trực tuyến nên không cần phải tải về hay cài đặt gì phức tạp, chỉ cần vào link trên là sử dụng được ngay.

Bước 1: Vào HAR Analyzer

Vào link này https://toolbox.googleapps.com/apps/har_analyzer/

Bước 2: Mở file HAR mà bạn đã tạo

Click nút Choose file >> Chọn file HAR muốn xem >> Click nút Open

Kết quả sau khi mở file HAR

Bước 3. Click vào request cần xem chi tiết

Như vậy, bằng cách tạo file HAR và gửi sang cho DEV thì tester có thể giúp dev tái hiện lỗi tốt hơn, tăng khả năng bug của bạn sẽ được fix nhanh hơn ^^

Happy testing!