Browser DevTools as an Essential Tool for API Testing
The DevTools «Network» tab provides almost everything for API testing — from checking responses to making requests.
As a web application test engineer, you need to test integration of backend (APIs) with frontend (UI in a browser). During this activity the DevTools «Network» tab should be opened as a «must have» tool, because of the features described below:
- Network Activity
- Request Details
- Advanced Filters
- Content Search
- Disable Cache
- Preserve Log
- Request Blocking
- Edit and Resend Requests
- Open in New Tab
- Copy as cURL
Of course, the list can go on and on according to the tasks…
All examples are based on the OpenWether web page; the revealed
appid token in some screenshots does not make any security sense.
Depending on the client-server interaction of your web app you may be interested in XHR requests — the most REST API requests are done through it (of course, if your web app is not completely server side rendered).
There are basic filters by types of the requests:
All resources from the network monitor/log can be examined for all the elements of the request in the context of API testing: request/response headers and request/response body.
To my mind Firefox represents details in a nicer format: with text highlighting, filters, raw data view (in Chrome it calls «View source») and references to documentation for each header:
The same for response’s body details — Firefox’s built-in JSON viewer highlights syntax and allows filtering. Chrome has only a basic parser on «Preview» tab:
Contemporary web applications make tens of hundreds requests per page, so it is very important to be able to filter out excess. There are a sufficient number of different parameters available for filtering. For example:
status-code— shows specific HTTP status code —
method— shows specific HTTP method —
domain— shows specific domain —
-— negates the filter’s query string —
-domain:openweathermap.org(shows all resources not from specified domain);
larger-than— shows resources that are larger than the specified size in bytes. You can use suffix
kfor kilobytes (1k = 1024 bytes) and
mfor megabytes —
is:running— shows incomplete requests. This filter is also good to show WebSocket resources (if you forgot to set the filter by type in advance).
Unlike the query filter through requests, «Search» runs a full-text search through headers and content:
Browsers like to cache response to improve performance and efficient traffic utilization (they can be filtered by
is:cached) for the next page load:
Use «Disable Cache» to prevent caching — all resources will be requested as at the first time:
If you have to refresh the page in order for testing or your test page makes redirects or auto refreshes, the network activity is cleared each time the page reloads. Enable «Persist Logs» (in Firefox) or «Preserve Log» (in Chrome) to save all requests across page loads (they will be saved until you disable it).
Blocking requests is more demanded for frontend rather than backend testing, but at least this feature is quite useful — you do not need third-party proxies to do it.
Chrome allows you to block by URL and by domain. In the «Network request blocking» panel you can edit blocking rules by patterns and wildcards (very convenient to block trackers):
All blocked requests will be highlighted and could be easily filtered in both DevTools (Firefox and Chrome).
Edit and Resend Requests (only in Firefox)
This magnificent feature is not sufficiently covered in the documentation, but it is incredibly useful for API testing or debugging. You can take any request (even POST and other methods that modify data), edit it and resend it on behalf of the page!
Open request details on «Headers» tab → Resend → Edit and Resend → [Send] the «New Request» form:
From the same context menu you can also resend requests without modification (maybe if you want to test the handler for idempotence).
- Context menu (Firefox)
Open in New Tab
You can resend any request in a new browser’s tab for further inspection of the body (in case of API requests) or for downloading scripts, fonts, images and other content:
Firefox’s way of showing API requests in a new tab again is nicer than Chrome’s one — there are JSON viewer and info about headers:
Take a closer look at the screenshots: thanks to developers for the [Copy] buttons — it saves time.
Copy as cURL
For testing API through other tools you can copy requests in cURL format exactly the same as browser does:
The result of copying to the clipboard:
curl 'https://openweathermap.org/data/2.5/weather?id=2643743&appid=439d4b804bc8187953eb36d2a8c26a02' -H 'User-Agent: Mozilla/5.0 (Macintosh; Intel Mac OS X 10.15; rv:100.0) Gecko/20100101 Firefox/100.0' -H 'Accept: */*' -H 'Accept-Language: en-US,en;q=0.5' -H 'Accept-Encoding: gzip, deflate, br' -H 'Referer: https://openweathermap.org/city/2643743' -H 'DNT: 1' -H 'Connection: keep-alive' -H 'Cookie: october_session=eyJpdiI6IlpYR1NmbEpJRUk2RDhHZkRsNVVZR2c9PSIsInZhbHVlIjoiRDBxbW9NdmdoSkdtV2FCVmwxUWZDY2hJSkpMcWIrN2xqMW14NXZmSXloTkwwVzdPMXE0UzdhRDg1VThFVWVpMFlna1FIcW9Tb1kzcnJUdHZJZlgxRjNCUHRCRXNDTHRRTjZCNzlRQUZqelVQV0gyOENkenRtVWpjc09ERW11SHEiLCJtYWMiOiI1NDYyM2RiMTM3MTZmNTgxMjJmY2QxMDRhM2Y1MjU2MTgwZWE3ZWIyOGQzMjg2MGE3ZjA3NGExMDMxNDg3OTRlIn0%3D; units=metric; stick-footer-panel=false; cityid=2643743' -H 'Sec-Fetch-Dest: empty' -H 'Sec-Fetch-Mode: cors' -H 'Sec-Fetch-Site: same-origin'
Besides cURL, Chrome has more options for copy:
I hope that the reader knows why he needs a cURL and how to use it:
In the example above I added
-i --output - to cURL’s request to show response headers and binary output.