+2

Charles là gì - Ứng dụng công cụ Charles vào kiểm thử

Mở đầu.

Đối với việc kiểm thử ứng dụng hay app, khi muốn check việc gọi API xem ứng dụng đó gọi API nào hay API nào được gọi trước hoặc là muốn kiểm tra dữ liệu truyền đi / trả về có đúng với mong đợi không?

Thường những việc như vậy chúng cần phải nhờ dev debug để check logs để kiểm tra các request, gọi api, response và HTTP headers ,....

Hôm nay được “một chị QA pro” khai sáng thêm được một phương pháp. Đó là dùng Charles Proxy, sau tìm hiểu mình muốn chia sẻ và demo lại cách cài đặt cũng như sử dụng công cụ này để đội QA đỡ phiền các anh dev.

Charles là gì?

Charles là một web proxy (HTTP Proxy / HTTP Monitor) 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. Một số chức năng chính mà QA thường sử dụng 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

Cách cài đặt charles

Ứng dụng Charles hiện có trên cả 3 nền tảng Mac, Linux, Windows, các bạn có thể tải về tại địa chỉ: https://www.charlesproxy.com/download/.

Ở đây mình đang cài đặt và sử dụng charles trên windows.

Cách cài đặt charles vô cùng đơn giản, như các phần mềm thông dụng khác. các bạn thực hiện theo các hình bên dưới này là được:

Tới đây thì các bạn đã hoàn thành xong việc cài đặt charles rồi đó.

Sử dụng charles như thế nào ?

Sau khi các bạn đã cài đặt thành công, khi mở ứng dụng các bạn sẽ thấy được giao diện trên máy tính là như thế này :

Vô tình để lộ dàn cực phẩm của Sun * =))

Bước 1: Mở Charles sau đó chọn Proxy -> Proxy Settings

Bước 2: Trong tab Proxies, nhập 8888 trong phần HTTP Proxy Port

Bước 3: Bạn chọn Proxy -> SSL Proxying Settings

Bước 4: Click vào tab [SSL Proxying] và check vào [Enable SSL Proxying] để cài đặt web domain bạn muốn test. Sau đó nhấn vào nút [Add].

Vậy là chúng ta đã hoàn thành xong phần thiết lập trên máy tính :

Setup cho thiết bị hoặc device

Ở đây mình sẽ setup cho điện thoại coloros 6 - android 9

Bước 1: Lấy Ip của máy tính: Trước hết bạn cần kiểm tra ip máy tính bằng cách vào command line gõ ipconfig hoặc đi đến Network and Internet sharing để lấy Ip4 của máy bạn., IP này sẽ sử dụng ở phần setting tiếp theo của Mobile.

Nếu các bạn chưa biết cách lấy IP máy có thể xem qua các link hướng dẫn lấy IP này nhé: Windows : https://quantrimang.com/huong-dan-cach-xac-dinh-dia-chi-ip-tren-may-tinh-88276 Mac : https://www.wikihow.vn/Xác-định-địa-chỉ-IP-trên-máy-tính-Mac Ubuntu : https://thuthuat.taimienphi.vn/cach-check-dia-chi-ip-tren-linux-30151n.aspx

Bước 2: Vào wifi mình đang kết nối (GIAO THUY). Sau đó Modify network/Chi tiết.

Bước 3: Tiếp đến Advanced Options/Nâng cao, cuộn xuống Proxy rồi chọn Manual/Thủ công

Bước 4: Thêm Proxy

  • Ở ô Proxy Hostname chọn IP của máy tính đã lấy ở trên. Ở đây là 192.168.1.168
  • Ở ô Proxy port là 8888

Bước 5: Sau đó Save lại. Sẽ có một popup thông báo có một kết nối từ điện thoại của bạn tới Charles. Mình Allow là được.

Muốn kiểm tra đã kết nối hay chưa vào Proxy -> Access Control Settings

Ví dụ điện thoại mình vừa thêm có IP là 192.168.1.22

Tuy nhiên, Vì dữ liệu truyền qua HTTPS đều đã được mã hóa, nên để Charles có thể theo dõi và đọc được các kết nối HTTPS, client cần phải cài đặt và trust CA Certificate từ Charles cho phép quyền

Cài đặt SSL Certificate

Bước 1: Bạn vào trình duyệt trên điện thoại sau đó nhập địa chỉ chls.pro/ssl hoặc http://charlesproxy.com/getssl và download SSL certificate về.

Bước 2: Sau khi download xong certificate, click vào để mở file đó. Android sẽ hiển thị một dialog để bạn cài đặt file này, nhập tên chứng chỉ sau đó nhấn OK. Tên chứng chỉ bạn nhập bất kì

Nếu có yêu cầu tạo mật khẩu bạn cứ tạo bình thường. Và đây là kết quả trên màn hình charles khi truy cập từ điện thoại mình đã cấu hình: Kết quả trả về có thể kiểm tra được 1 số thông tin cơ bản như Status (Complete), protocol(1.1), response code trả về (200 OK), phương thức (GET.)....

Kết luận

Để phục vụ cho 1 số dự án mobile nên mình tìm hiểu sơ bộ và giới thiệu lại ứng dụng này, ở mức “Giới thiệu” bạn thao tác để khám phá thêm nhé!

Ngoài ra chúng ta còn có thể có các app khác như proxyman - 1 featured app trên Product Hunt (https://www.producthunt.com/posts/proxyman). Các bạn có thể khám phá thêm.

Tham khảo

https://viblo.asia/p/charles-ung-dung-cong-cu-charles-vao-kiem-thu-Qbq5Q1A45D8

https://www.charlesproxy.com/

https://medium.com/@hackupstate/using-charles-proxy-to-debug-android-ssl-traffic-e61fc38760f7


All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.