January 21, 2016

Using the Charles Proxy to Identify API Calls in Mobile Apps

One of the mobile applications that we are working on is a hybrid mobile application. Hybrid apps provide the best of both worlds - native code and HTML5 - and are built with a combination of web technologies like HTML, CSS, and JavaScript. Hybrid apps are hosted inside of a native application that utilizes a mobile platform’s WebView. The wrapper native app uses the OS API’s to create an embedded HTML rendering engine that provides a bridge between the browser and device APIs.

As a part of a QA team, we need to perform load tests to see how our system behaves as the popularity grows and more users start connecting to the back‐end servers. After doing some research, we determined that JMeter with Redline13 cloud would perform the load test.

Problem Statement

To get started with the load test, the first challenge is to identify the critical business transactions from the end users’ point of view and then to identify the API calls behind-the-scenes against each transaction. There may be multiple API calls made with each business transaction.

Below are a few steps that we followed to complete the load test with the help of the Charles Proxy tool:

Identify Scenarios/Critical Transactions as per usage pattern

The first step is to list all of the scenarios on which you need to perform load tests. All of the critical business transactions need to be identified as per usage. For example, in our hybrid mobille app, we identified the following business scenarios:

  • My Colleges list
  • College Details page
  • Applicant College Details page
  • Applicant Details
  • All College list page

Identify the API calls behind the scenarios you have listed

To identify API calls behind the scenarios, we need to record the application requests. To do this, we need to do the following:

  1. Set up a proxy
  2. Connect device to proxy
  3. Identify API calls behind the scenarios
  4. Identify API calls for HTTPS requests

Below is a detailed outline of each step in identifying API calls.

Set up a proxy

  • Make your workstation act as a proxy server. To do this, install Charles, which is an HTTP proxy/HTTP monitor/Reverse proxy that enables a developer to view all of the HTTP and SSL/HTTPS traffic between their machine and the internet. This includes requests, responses, and the HTTP headers (which contain the cookies and caching information).
  • Launch the proxy tool

Connect your Device to the Proxy tool

Enable your device to use your workstation as a proxy by going back to your mobile device's wifi connection settings and entering your workstation's network IP address (in Charles: Help > Local IP Address) in the proxy server field, including the port number that you saw in Charles (Proxy > Proxy Settings > Port under HTTP Proxy field).

[caption id="attachment_9770" align="alignnone" width="824"]Port number in Charles Port number in Charles[/caption]

[caption id="attachment_9769" align="alignnone" width="513"]Proxy settings in device wifi Proxy settings in device wifi[/caption]

Identify API calls behind the scenarios

  • Start the recording in Charles: Proxy > Start Recording
  • Launch the mobile application. Now all traffic from your device to the internet will be relayed through your workstation, allowing Charles to record all of the end-points of scenarios. For example, once you launch your mobile application, the corresponding API call will be recorded in Charles. In the snapshot below, we have captured the API call. You can see the API call in the Request tab. In the Response tab, we can see the response corresponding to every request.

[caption id="attachment_9767" align="alignnone" width="946"]Recording transaction of app and identifying API calls behind the transaction Recording transaction of app and identifying API calls behind the transaction[/caption]

[caption id="attachment_9768" align="alignnone" width="938"]Recording all the transaction of mobile app and identifying API calls behind those transactions Recording all the transactions of a mobile app and identifying API calls behind those transactions[/caption]

How to identify API calls for HTTPS requests

If you mobile application uses HTTPS/SSL to secure traffic from clients, you need to enable the "Capture HTTPS CONNECTs," Decrypt HTTPS traffic," and "Ignore server certificate errors" on the HTTPS tab. To enable the SSL proxy in Charles, you need to do the following:

  • Go to Proxy > SSL Proxying Settings
  • Click add and enter the host name but leave the port empty
  • On your phone, go to charlesproxy.com/getssl and install the certificate
  • Restart Charles
  • Record the API calls

[caption id="attachment_9765" align="alignnone" width="799"]Setting SSL proxy in Charles Setting SSL proxy in Charles[/caption]

Define the Test Plan in JMeter

  • Open JMeter and add the test plan
  • Add the HTTP Request Default: right click on Test Plan Config Element > HTTP Request Default
  • Fill in the server name and the protocol fields

    [caption id="attachment_9766" align="alignnone" width="924"]Add config element HTTP Request Defaults and set server name and protocol Add config element HTTP Request Defaults and set server name and protocol[/caption]

  • Add the Thread Group: right click on Test plan > Add > Threads (Users) > Thread Group
  • Add the HTTP Request: right click on Thread Group > Sampler > HTTP Request
  • Now add the API path, which you have identified from Charles by recording requests, in the Path field of the HTTP Request sampler

    [caption id="attachment_9764" align="alignnone" width="861"]Add sampler HTTP request and fill the path field by API identified through Charles Add sampler HTTP request and fill the path field by API identified through Charles[/caption]

  • Add all of the HTTP Requests of scenarios that you identified earlier

    [caption id="attachment_9763" align="alignnone" width="866"]Add sampler HTTP requests for all APIs identified through Charles Add sampler HTTP requests for all APIs identified through Charles[/caption]

Execute the Test Plan

After preparing the test plan, execute it with varying numbers of users and then analyze the results with the help of listeners. To add listeners: right click on Test Plan > Lister > Aggregate Report. Use the Aggregate Report to analyze the performance of all of the requests made during the test and create an individual row for each named request in your test.