App DevelopmentQA and Testing

A quick guide to Charles part 2: an intro to tools

man spraying pesticide on crops

So you’ve read my first blog on Charles, installed it, set up all the necessary web and mobile configurations, and have begun testing. Now what?

Testing with Charles may seem pretty straightforward at first, but there are a lot of seemingly small, but very annoying problems you can run into. Fear not! Charles has you covered.

Charles comes with a load of easy-to-use tools to help overcome some common and annoying problems. Its tools also help test some otherwise hard-to-test scenarios with ease. Below, you can read all about some of the tools commonly used at WillowTree to make our testing experience as pleasant as possible.

No Caching Tool:

Charles operates by displaying the traffic going through the application and server. A problem can occur when the Internet browser automatically caches web addresses. Since the browser is no longer accessing the Internet to receive the page information, Charles doesn’t receive the traffic for those pages.

Internet Explorer (versions 5.5 and later) is an example of a web browser that automatically caches web addresses. These versions of Internet Explorer have a feature called Automatic Proxy Result Cache that automatically caches websites with the purpose of reducing client-side processing. Interestingly enough, Edge, another Windows browser, does not have this feature.

Most browsers have a method of clearing your browser history and cache, but this would have to be done continuously when testing a feature. Luckily for testers, Charles comes with a built-in tool to override this. It’s called No Caching, and when enabled, it prevents browsers from caching web addresses. The No Caching tool can easily be enabled and disabled from the Charles menu under Tools.

Steps for turning on the No Caching tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click No Caching. A settings modal will appear allowing the user to enable No Caching for all websites, or to specify which locations it should be used for. Charles Tools1

Black List/ White List Tools:

Many times, the webpage or app being tested will have images being loaded from another source. When testing these pages, it is faster to load them without having to continuously load the extra images.

Charles’ Black List tool allows testers to block the browser from accessing certain domains. It is beneficial in this situation to select the other domains in Charles, so when the page is accessed, none of the extra images or promotions are loaded.

Charles’s White List tool is a newer feature added in Charles 3.10. It essentially does the exact opposite of the Black List tool. The White List tool blocks access to all domains accept the ones selected. This can be beneficial when testing a page where you do not know the locations of all the other sources on the page.

Steps for turning on the Black List tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click Black List. A settings modal will appear allowing the tester to enable Black List and then to specify which locations it should be used for. Charles Tools2

Steps for turning on the White List tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click White List. A settings modal will appear allowing the tester to enable White List and then to specify which locations it should be used for. Charles Tools3

Breakpoints/Map Remote/Map Local/Rewrite Tools:

When testing web pages which require requests and responses from the server, tools such as Breakpoints, Map Remote, Map Local and Rewrite can be of great use to generate and manipulate data.

Breakpoints are a way to intercept requests and responses before they pass through Charles. The tester can choose to edit, allow or block them. This is the easiest method of manipulating requests and responses, but is only time-efficient if it’s being used a handful of times.

The Map Remote tool changes the request location to that selected by the tester so that the response is served from the new location as if it was the original request. This makes testing fields that require responses quick because the tester can manipulate the response however they desire.

The Map Local tool allows the tester to write their own files locally and then test them as if they were live. This saves the tester time because they do not have to upload the file in order to test it.

The Rewrite tool allows for the creation of rules that modify requests and responses as they pass through Charles. This can be used to add or change items such as text or headers. A rule determines a single rewrite operation and a set is a group of rules the tester wants to use. The tester can then select which rules they want to add to their sets and choose at what points they want to run which sets.

Steps for turning on Breakpoints in Charles are:

  1. Launch the Charles program.
  2. Click the Proxy tab in the top right.
  3. Click Breakpoint Settings. A settings modal will appear allowing the tester to enable Breakpoints.
  4. Clicking Add will allow the tester to specify which requests and responses should be intercepted. Charles Tools4

Steps for turning on the Map Remote tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click Map Remote. A settings modal will appear allowing the tester to enable Map Remote.
  4. Clicking Add will allow the tester to specify which locations it should be mapped from and where it should be mapped to. Charles Tools5

Steps for turning on the Map Local tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click Map Local. A settings modal will appear allowing the tester to enable Map Local.
  4. Clicking Add will allow the tester to specify which locations it should be mapped from and where it should be mapped to. Charles Tools6

Steps for turning on the Rewrite tool in Charles are:

  1. Launch the Charles program.
  2. Click the Tools tab in the top right.
  3. Click Rewrite. A settings modal will appear allowing the tester to enable Rewrite.
  4. Clicking Add will allow the tester to to specify which rules should be added to the set. Charles Tools7

These are just some of the many features of Charles that us testers like to use at WillowTree. Charles has many more, easy to use and time saving tools that we recommend you explore!

Quickstart-Guide-to-Kotlin-Multiplatform

A Quick Start Guide to Kotlin Multiplatform

Kotlin Multiplatform, though still experimental, is a great up-and-coming solution...

Read the article