Skip to main content

Setting Up Charles Proxy Through LambdaTest Tunnel


This article will guide you on how to setup Charles Proxy for the tests run on LambdaTest platform through LambdaTest Tunnel.

Objective


By the end of this article, you will be able to :

  • Configure LambdaTest Tunnel and setup Charles Proxy for your tests through the created tunnel.
  • View Network Logs of the tests run on the LambdaTest Cloud Platform on Charles Interface.
  • Manipulate the Network Requests of the tests through SSL Proxying on Charles.

What is Charles Proxy?


Charles proxy is an interactive web debugging tool which acts as an intermediate between a client (mobile or web app) and the internet. It enables the users in configuring the client environment to pass all the networking requests and responses through Charles proxy so that they can inspect and even change the data midstream to test how a app responds.

In Web and Internet development we are unable to see what is being sent and received between the client and the server. So, it is difficult to determine exactly where the fault is. By using Charles, users can get the idea of what is happening to quickly diagnose and fix problems.

Pre-requisites


Before getting started with the setup, you would have to follow these steps:

  1. Download Charles Proxy software from the official website and install it. You can also download from the links below.

  2. Download the LambdaTest Tunnel binary file and extract it to setup the tunnel.

  3. Or you can download the GUI tunnel application Underpass to setup the tunnel easily without using terminal.

Installing Charles Root Certificate


  • Once you install Charles, you would have to navigate to "Install Charles Root Certificate" under Help section.

    cmd
  • On clicking, you need to grant the access to install the certificate to your system. Then you will be able to view the certificate in Mac's Keychain Access as shown

    cmd
  • Now you need to open the installed certificate and select "Always Trust" option under the Trust section. This gives permission to the Charles Proxy to access the network resources from the system. Here you would have to grant the access again to save the modified settings.

    cmd

Getting the Port Number


Now, navigate to the Proxy Settings on Charles to view the Port Number used by the Charles Proxy in your system.

cmd

In this case the Port number which is in use is 8888. We will be using it to configure the LambdaTest Tunnel.

Configuring The LambdaTest Tunnel


Now you need to setup and configure the LambdaTest Tunnel through which you will be able to route the traffic of your tests run using Charles Proxy. You can configure a LambdaTest Tunnel by using the tunnel binary file or by downloading the GUI application Underpass by LambdaTest.

Through The Binary File


To configure the tunnel, you need to download the LambdaTest's Tunnel Binary File following the steps mentioned in the pre-requisites before. You can find the shell command in the LambdaTest Dashboard to setup a basic tunnel.

cmd

But here we need to add the Charles proxy server through which we want to route the traffic of the tunnel. We can do that by appending the --proxy-host (localhost) and --proxy-port (8888 in this case) options to the above command. The format of the command would be:

./LT -user {user’s login email} -key {user’s access key} \
--proxy-host localhost \
--proxy-port 8888

You can get your LambdaTest Access Key from the LambdaTest Automation Dashboard.

You need to run the above command from the terminal in the directory where you have extracted the LT binary file as shown. Make sure that Charles Proxy Session is up and running before you can start the tunnel. Now once the tunnel is setup, you will be able to see "You can start testing now" in the terminal as shown.

cmd

Through Underpass


Before you can configure and setup the tunnel, you need to download the Underpass application as mentioned in the pre-requisites before. For more info about Underpass, refer this. Once you install Underpass, you need to pass your LambdaTest authentication credentials as shown below.

cmd

Now to configure the tunnel with Charles Proxy, we need to add proxy to the tunnel. The proxy host (localhost) and port (8888) can be set using "Show Advanced Configuration option" in Underpass. You can set more advanced options through this if necessary.

cmd

On clicking the Launch button, you will be able to start the tunnel with the configured proxy setup. Make sure you are running the Charles Software before launching the tunnel using Charles Proxy Port. You will be able to see the status as "running" once the tunnel is launched successfully.

cmd

Viewing Network Logs Through Charles


Here we will be demonstrating using our python-selenium-sample project for running the tests. We are running a sample demo script on stage-demo.lambdatest.com in this case. So this host has to be enabled the SSL proxying to get the network logs of the tests run on this site. We can enable SSL proxying by following the steps shown:

  • Navigate to SSL Proxying Settings under Proxy section.

    cmd
  • Then you need to add the host of the site stage-demo.lambdatest.com under Include to enable SSH Proxying.

    There is no need to mention the port number here as it will be allocated by default on adding.

    cmd
  • Now before you can run the tests on LambdaTest platform, you need to ensure that the capabilities network and tunnel are passed as true to successfully get the network logs on Charles. On running the tests, you will be able to see the host in Structure panel with the Notes - "SSL Proxying enabled for this host".

    cmd

    And also in the Sequence panel you will be able to view all the network logs of the test run on LambdaTest as shown below. Here you can select each log to get more information about the request.

    cmd

That’s all! In case you have any questions or need any additional information, you could reach out at our [24X7 Chat Support] or mail us directly at [email protected].