Traffic Management with Fiddler

Posted by: Olga Eremenko, QA Engineer

When testing websites or mobile applications, sometimes it becomes necessary not only to catch traffic between the client and the server, but also to modify it to see how it handles the backend and what changes to the UI.
')
In such cases, you can use the Fiddler proxy server - an intermediate link between the client (browser, mobile application, etc.) and the target server. Most likely, this tool is known to you, but usually it is said about it in passing. We will take a look at how to check with Fiddler what is displayed on the UI when a request to the server or a return response is changed.



Suppose there is a site dataart.ru . Its main page displays a block with future events. If there are no events, then the section, respectively, should not be displayed along with the title and auxiliary icons.



But what to do if there is content, but you need to check the case with the absence of future events? One option is to use Fiddler.

So, we model the case when there are no future events on the main page:

1. Run Fiddler. Clean the Web Sessions list on the left.



2. Turn on Capturing in the lower left corner to catch traffic.



3. Update the dataart.ru page in the browser and see the sent requests in the left part of the Fiddler window. We are interested in the GET “/ Umbraco / Api / Events / GetEventsForHomePage? Tags = 8” query, which returns future events for our page. If nothing comes in the answer, then a block with events, heading and auxiliary icons are not displayed.



4. In this case, you can modify either the request before sending it to the server, or the answer to this request before the client receives it.

In Fiddler, this can be implemented using breakpoints. Manual breakpoints can be set via the QuickExec console as follows:

bpu https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8 - create a breakpoint before sending the necessary request to the server.

bp https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8 - create a breakpoint before returning the answer to the client.



Let's consider each option separately.

5. To change the request before sending it to the server, execute the command in the QuickExec console:
bpu https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8

We update the dataart.ru page in the browser (at this time, Capturing should be enabled for Fiddler) and we see that the execution of the request we need is suspended. This is indicated by the red icon opposite the request in the Fiddler interface and the absence of a block with events on the web page itself.



What can be done at this stage? Modify / add / delete headers, cookies, request parameters, etc. In order for the answer to not return anything, we need, for example, in the WebForms tab to specify a value for the tags parameter that should not return any results.

After the necessary changes to the request, all that remains to be done is to click on Run to Completion and look at the result in the browser.



An important point: to disable breakpoints, you need to enter the command “bpu“ or “bpa“ with no argument in QuickExec. Before proceeding to the next option, it is advisable to remove the breakpoint created for the query via “bpu“, respectively.

6. To change the response to the request before returning it to the client, execute the command in the QuickExec console:
bpa https://dataart.ru/Umbraco/Api/Events/GetEventsForHomePage?tags=8

We update the dataart.ru page in the browser (at this time, Capturing should be enabled for Fiddler) and we see that the sending of the answer we need is suspended. This is indicated by the red icon opposite the request in the Fiddler interface and the absence of a block with events on the web page itself.



For our purpose, it is enough to change the body of the answer. Go to the TextView tab and instead of the entire content insert the answer that comes in cases where there are no results - {"items": [], "total": 0}. But do not forget that you can change different data (status code, headers, etc.).

Now all that remains is to click on Run to Completion and look at the result in the browser.



There are other ways to connect breakpoints, read about this in a short article by Eric Lawrence, creator of Fiddler.

Happy testing!