Testing With Charles Proxy Part 2

In this series of blog posts, the goal is to help someone get started testing with Charles Proxy.

The series will cover:

Make sure to start with Testing with Charles Proxy Part 1, before going through this post.

In this post, we’ll focus on:

How to use breakpoints in Charles

First let’s go over what a breakpoint is.

“A breakpoint is an intentional stopping or pausing place in a program, put in place for debugging purposes. It is also sometimes simply referred to as a pause.”

Source: Wikipedia

In Charles, we can use breakpoints to stop requests going out or responses coming in. Once we have stopped the requests/responses, we can inspect them, then edit them.

We specify the conditions under which the breakpoints should be triggered.

Test ideas using Charles including editing requests and responses

The great thing about using Charles to edit requests and responses is that you can test out different scenarios that would be normally very difficult (or just annoying) to trigger manually in the UI.

Here are some test ideas you could try out (not just in this test website, but others as well) when editing requests:

This is only a starting point to help you trigger some ideas, there are plenty more things you can do.

By doing the above examples, you are testing to see how the backend validation is done (or if there is any validation? Maybe it will accept any values)

How to edit a request

For this example we will register an account, to see where to put the breakpoint. Then we go back and register another account and edit the request (POST) when we register the second account

  1. From the Sequence tab, filter by “parabank”

  2. Make sure you are recording your session. To do this, go to Proxy > Start Recording. You should now see all your network traffic to and from https://parabank.parasoft.com/

  3. Click on the “Register” hyperlink below the Customer Login section on the left hand side of the screen.

  4. Fill in your information. Since there are no mandatory fields marked, I will fill in all of them with (what i believe to be) valid data. /rsz_1regodetails.png

  5. Once you click on the “Register” button, you should see a POST in Charles like this Note I cleared the screen first by clicking on the brush icon (circled in the screenshot below) /rsz_regopost.png

  6. Right click the row and click Breakpoints (so a checkmark appears)

  7. In this row, take note of the following data:

  1. Using this data, we will now check the breakpoint that was created in step 6. Go to Proxy > Breakpoint Settings. Select the breakpoint displayed.

  2. You should see something like this: /editbreakpointnew.png

  3. Now go back to the test website and click the Register hyperlink again

  4. Fill in all of the fields then cick the “Register” button

  5. The breakpoint should have been triggered. You should see a screen that looks like this.

  6. Switch to the Edit Request tab (circled in the screenshot), then click on the “text” tab at the bottom /rsz_breakpointtriggered.png

  7. Edit the request contents so it looks like this: customer.firstName=&customer.lastName… You have cleared the first name field.

  8. Click on the Execute button

  9. If you also have a breakpoint set for a Response, you should see a 200, just click Execute to get past this

  10. On the test website, you should see an error appear saying “First name is required”

Feel free to play around with editing requests to see how you can manipulate the data and what validation the backend does

Now let’s move on to editing responses.

Here are some test ideas you could try out (not just in this test website) when

hugoediting responses:

This is only a starting point to help you trigger some ideas, there are plenty more things you can do.

By doing the above examples, you are testing to see how the frontend renders things

How to edit a response

For this example we will edit the accounts overview screen, editing a response is very similar to editing a request.

  1. Once you are logged in, click on the Accounts Overview hyperlink to the left hand side of the screen

  2. By default, you should see there is one account which has a balance of $515.50.

  3. On Charles, you should see the GET network request. The path will look like this: /parabank/services_proxy/bank/customers//accounts

  4. Right click the row and click Breakpoints (so a checkmark appears)

  5. Now do a hard refresh of the screen, you should have triggered a breakpoint.

  6. On Charles, edit the response by clicking on the “Edit response” tab, then clicking on the “JSON text” tab at the bottom

  7. Make yourself a millionaire by changing the balance to $1000000.00 then click Execute

  8. See the result in the test website’s UI.

Here is a great video explaining how to use breakpoints. While the video focussses on mobile testing, the same can be applied to testing websites.

Make sure you turn off recording when you are done testing by going to Proxy > Stop Recording

In the next post, we’ll focus on:

_Testing with Charles Proxy Part 3

Let me know how editing requests and responses worked out for you - you can reach me on Twitter: @NicolaLindgren