Mở đầu

Trong quá trình kiểm thử một trang web hay một ứng dụng, việc kiểm tra API là rất cần thiết. Chúng ta phải check xem trang web hay ứng dụng đó đã gọi API nào hay API nào gọi trước hoặc muốn kiểm tra dữ liệu truyền đi hoặc trả về có đúng mong đợi không Trên web chúng ta có thể thực hiện thao tác inspect để check api, nhưng trên ứng dụng thì lại không. Để check được api chúng ta phải nhờ dev debug để check log. Việc này rất mất thời gian và đôi khi không đảm bảo được chính xác. Mấy hôm trước được một chị QA khai sáng thêm một phương pháp để check api trên ứng dụng, đó là dùng công cụ Charles Proxy. Sau khi tìm hiểu mình muốn chia sẻ về cách cài đặt cũng như cách sử dụng tool này đến với những bạn tester nhờ đó đội QA không làm phiền đến các anh dev để các anh có thể tập trung vào việc coding cũng như fix bug ạ ^^

1. Giới thiệu về Charles

1.1. Charles là gì ?

• Charles là một web proxy chạy trên máy tính của bạn, hữu ích cho việc debug hoặc test với các app/ứng dụng mô hình client - server.
• Charles proxy cho phép lập trình viên/tester có thể theo dõi toàn bộ thông tin HTTP và SSL/HTTPS giữa thiết bị như browser/mobile tới Internet, bao gồm request, response và HTTP headers (bao gồm cả cookie và cache). Tình huống mình nghĩ đến là sẽ là thiết lập một kết nối giữa điện thoại mình - thiết bị test ứng dụng WSM-android và máy tính windows thông qua Charles
• Nói một cách dễ hiểu hơn là chúng ta có thể cài đặt để web browser hoặc device bên ngoài truy cập vào internet thông qua máy tính của bạn. Charles có thể theo dõi và hiển thị dữ liệu gửi đi và nhận về các request

1.2. Một số chức năng chính của Charles tool:

• SSL Proxying – xem SSL requests and responses
• Bandwidth Throttling – dùng để test với những đường truyền khác nhau (giới hạn tốc độ đường truyền)
• AJAX debugging – xem XML and JSON requests and responses theo dạng cây thư mục hoặc dạng text
• Repeat requests to test thay đổi back-end
• Edit requests – để test nhiều inputs
• Breakpoints để chỉnh sửa requests và responses

Ở phần sau sẽ chỉ đề cập đến những chức năng QA hay dùng và hướng dẫn lấy log với Charles.

2. Cách cài đặt Charles

2.1. Cài đặt ứng dụng Charles trên máy tính

Ứng dụng charles , hiện đang có cả 3 hệ điều hành mac, linux, windows. Các bạn có thể tải về tại địa chỉ https://www.charlesproxy.com/download/. Hiện tại charles mất phí nhưng có thể dùng thử trong 1 tháng đủ để để chúng ta sử dụng trong quá trình phát triển dự án Sau đây là những bước cài đặt Charles trên windows:

• Bước 1: Trên trình duyệt vào địa chỉ web https://www.charlesproxy.com/download/
• Bước 2: Thực hiện tải phiên bản tương ứng với hệ điều hành của máy tính
• Bước 3: Sau khi tải xong tiến hành cài đặt tương tự như các ứng dụng khác
• Bước 4: Thực hiện xem IP máy tính của bạn: bằng cách vào command line gõ ipconfig hoặc xem ngay tại Charles vừa cài đặt với các thao tác sau:

2.2. Cài đặt cho thiết bị

Dưới đây mình sẽ điện thoại iphone 11 - ios 14.8 Tiền đề: Máy tính để xem api với điện thoại phải dùng chung 1 mạng

• Bước 1:Ở màn hình home > Chọn setting > Chọn wifi > Tap vào wifi đang sử dụng > Chọn Configure proxy >Chọn manual > Thực hiện nhập ip và port máy tính của bạn tương ứng với server và port:

Lưu ý: Khi các bạn thực hiện lưu IP và Port máy tính trên thiết bị di động, khi đó ở app Charles trên máy tính cũng hiển thị màn hình thông báo đã có kết nối từ thiết bị di động của bạn và hỏi bạn cho phép truy cần hay không. Và nhớ rằng chọn Đồng ý để cho phép thiết bị của bạn được kết nối với charles proxy của máy tính bạn nhé.

• Bước 2: Thực hiện tải SSL Certificate: đối với iOS, mở trình duyệt Safari (hoặc Android Browser, Chrome đối với Android), truy cập vào địa chỉ https://charlesproxy.com/getssl. Lúc này hệ thống sẽ hỏi bạn có muốn tải xuống không. Thực hiện tải xuống file SSL Certificate.

• Bước 3: Sau khi tải thành công SSL Certificate, thực hiện cài đặt Charles proxy: Tại màn hình home > chọn setting > Chọn Install profile > Thực hiện cài đặt Charles proxy

• Bước 4:Thực hiện cài tin cậy với charles proxy : Tại màn hình home > chọn setting > Chọn cài đặt chung> Chọn giới thiệu > Chọn Cài đặt tin cậy chứng nhận >Thực hiện bật cài đặt tin cậy với Charles proxy

3. Cách sử dụng

Dưới đây mình sẽ đề cập đến hai chức năng và cách sử dụng chức năng trong tool charles mà QA hay dùng. Các bạn có thể tham khảo qua nhé .

3.1. SSL Proxying – xem SSL requests and responses

Sau khi đã hoàn tất các cài đặt trên máy tính và thiết bị điện thoại của bạn lúc này điện thoại của bạn sẽ truy cập internet thông qua charles proxy trên máy tính của bạn. Và tất nhiên khi bạn gửi bất kỳ request nào trên điện thoại máy tính của bạn sẽ đều có đầy đủ thông tin kết nối đó. Ví dụ khi vào một ứng dụng bất kỳ trên điện thoại charles sẽ bắt được request. Xem ảnh dưới đây Lúc này để xem được chi tiết các request và response: Click chuột phải vào URL muốn xem > Click vào SSL Proxying. Thực hiện xóa request đã bắt được, thao tác lại trên device bây giờ ta sẽ xem được request, response ( Thao tác như ảnh dưới) Sau khi có thông tin của request, có thể get log bằng cách chọn File > Save session as > Chọn lưu file dưới format .chls. File này dùng để check thông tin log so với spec của dự án và cũng có thể dùng làm evidence khi có bug.

3.2. Breakpoint – chỉnh sửa request hoặc response

Charles có khả năng thiết lập điểm ngắt (breakpoint cho các cuộc gọi). Breakpoint để chỉnh sửa cho request hoặc response. Cách tạo điểm ngắt Tại list request mà charles proxy bắt được bạn chọn 1 link URL muốn breakpoint > click chuột phải> chọn breakpoints

Cách khác: Tại màn hình của charles proxy > Chọn Proxy> Chọn Breakpoint setting > click button add để thực hiện thêm thông tin mà bạn muốn breakpoint Ở bước này, bạn cũng có thể kiểm tra những thông tin về cuộc gọi đã đặt điểm ngắt trước đó đã có trong list breakpoint chưa Cách hoạt động Khi bạn thực hiện chạy trên device, thì charles proxy sẽ nhảy đến tab breakpoint. Ở đây charles breakpoint request gói tin đó, bạn có thể chỉnh sửa header, body,… thực hiện ấn execute để thực hiện tiếp Tiếp tục charles sẽ breakpoint response, tại đây bạn có thể chỉnh sửa format json trả về trước khi execute Như vậy mình có thể check những case mong muốn.

3.Kết Luận

Trên đây chỉ là sơ bộ về tool charles mà mình tìm hiểu và thao tác ở những chức năng cơ bản nhất để có thể phục vụ dự án của bản thân. Trong một thời gian ngắn tìm hiểu và thao tác mình thấy charles là một công cụ khá hữu ích, các bạn sẽ tiếp tục khám phá Charles để có thể tận dụng chúng trong thử nghiệm của riêng bạn. Cảm ơn các bạn đã đọc bài.