Tester’s Month Story – A Complete Guide To Set Up Charles Proxy In Any QA Environment

Charles is an HTTP proxy monitor that allows a tester to view all of the HTTP and SSL/HTTPS traffic between their machine and the Internet 🌐 This includes requests, responses, and HTTP headers. It is a great way to know what request or response was sent between the application and the server.

It helps testers in verifying the responses and validating that the request’s structure is valid. In this article, I will share some tips and tricks for testers on how to leverage Charles proxy in QA testing.

Table of Contents

• Setting Up Charles Proxy
• What Charles Proxy Can Be Used for
• Set Up Charles Proxy on iOS Simulator from Scratch
• Android Auto Config
• Conclusion

Setting Up Charles Proxy

1. Download Charles on your PC.
2. Use the license registered to your company.
3. Connect your phone to Charles to see the traffic:
   • Connect your mobile device using a local IP address-
     1. Check what’s your current local IP address (Charles → Help → Local IP Address).
     2. On your mobile, navigate to Settings → Wi-Fi → Choose the common Wi-Fi connection for both phone and System → Modify Network → Show Advance Settings → Proxy=Manual → Proxy Hostname=Local IP address → Port=8888 and save.
   • A prompt will be displayed on Charles to allow the connection to the phone. Select ‘Allow’.
   • Set up the SSL Certificate – Open a browser on your mobile device, go to ‘Charles SSL‘, and download the SSL certificate. Install this certificate on your phone.
     1. On Android, choose to install it for ‘Apps & VPN’, otherwise it won’t work for APIs.
     2. On iOS, be sure to enable full trust for the certificate in Settings → General → About → Certificate trust settings.
   • You might see the ‘Network maybe monitored’ message in the notifications bar on your phone.

4. Optional set-up steps to improve the Charles experience for specific traffic:
   • Disable macOS proxy.
     1. on Charles, go to Proxy → Proxy settings → macOS tab. Disable macOS proxy and disable auto-enable at launch.

• • Setup Charles to only proxy the locations you want. Get the hostname of your application, say xyz.
    1. Go to Proxy → SSL Proxying settings → SSL proxying tab. Add the location with host ‘xyz‘ to only listen to/mock traffic that matches this host.
  • Setup Charles to only log/record the xyz locations.
    1. Go to Proxy → Recording settings → Include tab. Add a location with host ‘xyz‘ to only log/record traffic that matches this host.

What Charles Proxy Can Be Used for

Once Charles is set up, you can use it for various network-related tasks like:

💡 Read headers and body for requests/responses.

💡 Redirect requests to alternative servers or local files.

💡 Put breakpoints to modify requests/responses manually.

Set Up Charles Proxy on iOS Simulator from Scratch

1. Build the test app and launch the simulator as normal on Xcode.
2. Under Charles → Help → SSL Proxying, select ‘Install Charles root certificate on iOS simulators’.
3. Under Charles → Proxy, enable ‘MacOsProxy’.
4. Within the iOS simulator go to Settings → General → About → Certificate trust settings and toggle the installed certificate to enabled.
5. Under Charles → Proxy → SSL proxying settings, select ‘Enable SSL Proxying’.
6. In the same screen from the above step, click the add button, and enter the host you want to enable the proxy eg: *xyz.com*. Now Charles will listen to all traffic that contains xyz.com anywhere in the name.
7. Under Charles → Proxy → Recording settings select the ‘Include’ tab centered at the top of the screen.
8. Add the same hosts as before i.e., com to start recording the traffic from only the mentioned host.

Troubleshooting Most Common Issues

If you encounter an error while following the steps above, or if after following them you can’t read any traffic, try the below methods:

💡 Disable any VPN or firewall on your computer.

💡 Disable macOS Proxy in Charles → Proxy.

💡 Turn the device’s Wi-Fi off and on again. Make sure both PC and mobile devices are on the same Wi-Fi.

💡 In your phone’s security settings, check that the certificate hasn’t been blocked.

💡 In order to read traffic from any live app on an Android device, you need to be on Android 6 or less. Starting from Android 7, there are new security features that prevent Charles from reading traffic unless the app specifically allows it.

💡 If your concern is “I’m trying to download the certificate from pro/SSL but nothing happens”, try a different browser app on your device.

💡 Charles cannot configure your proxy settings while it is on a read-only volume. If you are running Charles from the disk image, copy it to the Applications folder and run it again. Otherwise please ensure that Charles is running on a volume that is read-write and try again.

💡 Sometimes re-installing and granting permissions again also works.

Map Remote: Redirect Traffic to a Non-Prod Environment

How to direct the Charles Proxy to various host environments:

1. Specify the environment to point to.
   • Go to Charles → Tools → Map Remote.
   • Check ‘Enable Map Remote’.
   • Update the ‘To’ Fields to point to whichever environment you want to point to (Mostly the prod URLs have similar QA/Sand URLs. Changing those should redirect to the needed environment).

📍 This will enable you to use PROD apps to point to environments like QA, DEV, etc..

Map Local: Use Mock Responses

Sometimes when the application you want to test is still in the developing stage or not up and running, mocking the responses with local JSON files comes in handy to test the behavior of the requests and the server’s ability to handle those requests ✅

1. First, create or download a JSON response to your PC.
2. Map Charles to where the file is stored: Open Tools → Map Local → Enable Map Local → Add.
3. Set the local path to where the file is stored.

4. Add the host response URL in the Location field.

5. Re-install the test app on your mobile or simulator.

📍 This should allow you to see the responses from the local SON file every time you run the request from mobile.

Android Auto Config

Purpose: configure static IP addresses and auto-config (Android) to prevent having to check IP every time.

Set the Static IP Address for MAC

1. Open macOS ‘Network’ Settings -> choose your preferred Wi-Fi for testing from the dropdown -> select ‘Advanced..’ button -> ‘TCP/IP’ tab.
2. Select ‘Configure IPv4’ and set to ‘Using DHCP with manual address’, this will essentially force the DHCP request that macOS makes to the router to set the IP as whatever you enter into the ‘IPv4 Address’ field. This setting may not work on REALLY old routers.
3. Set your IPv4 to an IP address available in the range set by your router (E.g. 192.168.10.123), and use it. It will reserve the IP for your machine (MAC address) for a certain amount of time ⏳ If another device uses this IP address, your device will not be able to use the network. To avoid this you can modify your router settings by removing the IP from the automatic configuration list.
4. Save your settings. This may trigger a Wi-Fi reboot so wait a minute for the changes to take.

Configure Android ‘Proxy Auto-Config’

1. This path will depend on the phone. Select Android ‘Settings’ -> ‘Network & Internet’ -> ‘Wi-Fi’ -> long-press your choice of Wi-Fi -> ‘Modify network’.
2. Now select advanced options, this should display a proxy option. Select ‘Proxy Auto-Config’. This setting essentially says “proxy is available? use proxy: ignore proxy”.
3. Enter the ‘PAC URL’ as https://chls.pro/X.X.X.X.pac, where ‘X.X.X.X’ is the static IP for the host (the IP we entered earlier for macOS). More information can be found here. Essentially, this serves as a file locally that can be used to configure devices for use with Charles.

4. For ‘IP settings’, select ‘Static’ and enter a default IP address. This should look very similar to the IP entered for macOS. As long as it is not taken and it is in the range set by your router, the IP will work. Save this IP address for the next section 💾 If you would like to reserve your phone IP, set a static MAC address in your Android settings, and remove the selected IP from the generated IP range in your router settings.

5. The rest of the details should auto-fill based on the network configuration. It should look something like this:

6. Save your settings by selecting ‘Save’.

Configure Charles Proxy Access Control for Devices

1. In Charles, select the ‘Settings’ gear -> ‘Access Control Settings’.
2. From here, select ‘Add’. Enter the static IP address set previously in the Android Wi-Fi Settings.
3. Make sure to select the ADD button again, then click ‘OK’.
4. Charles may require a restart.
   NOTE: It is possible to allow all connections locally to your proxy. However, this is considered dangerous as it opens your device to man-in-the-middle attacks.

Simulate Latency for Requests

Charles allows a user to increase latency for any request. This allows the user to simulate high latency connections.

1. In Charles, select ‘Proxy’ from the menu bar.
2. Select ‘Throttle Settings…’.
3. Check ‘Enable Throttling’.
4. Select the ‘Throttle preset’ dropdown and select which preset you would like to simulate.
5. Alter Round-trip latency to further refine the amount of latency. NOTE: To simulate Southeast Asia this setting should be set to 200ms.

Optional Settings

1. Check the box ‘Only for selected hosts’ under ‘Enable Throttling’ to further refine what services are throttled. This prevents other requests on your machine from being throttled.
2. Select the ‘Add’ button and enter any hosts you would like to throttle.

Conclusion

In today’s web and Internet development, it can be hard to see what is being sent and received between the client and the server. Without this visibility, it is difficult and time-consuming to determine exactly where the fault lies. Charles makes it easy to see what is happening, so you can quickly diagnose and fix problems.

I hope these steps make it easier to do advanced debugging, saving you time and frustration! 💫