Testing With Charles Proxy Part 2

2022-01-19

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

The series will cover:

• What is a Proxy server?
• What is Charles Proxy and what can it do?
• How to set things up ready for testing?
• Test ideas using Charles including editing requests and responses, using breakpoints, throttling bandwidth, trigger various error codes and viewing network traffic.

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
• Test ideas using Charles including editing requests and responses

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:

• Remove mandatory fields and see how the backend copes (you can do this by either removing the field altogether or submitting an empty field)
• Exceed maxinum number of characters a field in the UI allows e.g. if you can only enter 15 characters in the UI, edit the request and put
• Enter invalid data for one of the fields e.g. only enter numbers into a name field.

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.

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)

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

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

• Method: POST
• Host: parabank.parasoft.com
• Path: /parabank/register.htm

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

9. You should see something like this:

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

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

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

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

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

15. Click on the Execute button

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

17. 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:

• Remove fields and see how the frontend renders it
• Add in lots of data e.g. for online shopping, if you have the product information, add in either 9999 of the same product or add 20 different products (this could save you time, instead of having to do this through the UI)

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.

In this video there is a brief overview of breakpoints.

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:

• How to throttle bandwidth.
• Test ideas using Charles where you trigger various error codes

_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

#How-To #Popular #Testing