How to Read the Payload from Browser-Network Tab and Use it in Postman as Header in Another Request

Reading and copying Payload from the Network tab of a Browser and using it in Postman is a common use case in Software Testing. This approach of testing comes into the picture during software development when application development is in progress. When some APIs have been integrated with the front end, we can test them using the front-end application. To test the remaining APIs, Postman can be used. Also, there might be some cases when APIs depend on each other for input. In this case, we can copy the response from the Network tab of a Browser and paste it into the appropriate request inside Postman. This article explores and explains how it can be done using Google Chrome.

How to Read the Payload from Browser-Network Tab and Use it in Postman as Header in Another Request?

Inside the Network tab, we can see the APIs being called along with their request URL, the request method, status code, request params, request body (if any), and response body.

Step 1: Right-click anywhere on the browser window and select “Inspect”.

Inspect (last option)

Step 2: By default “Element” tab will open. Click on “Network”.

Click on “Network”

Step 3: Here, you will be able to see APIs being called in the “Name” section. Now, click on the functionality which would call the desired API. You would be able to view the APIs called in the network tab as shown below.

APIs being called can be viewed here.

Step 4: From the network tab, click on an API who’s request and response information you would like to view.

API request and response details

1. To copy Payload, click on “Preview”. Here, you can see the response of this API.

2. Click on the first triangular arrow next to where the payload starts. It is used to collapse the object into a compact version.

“Preview”

Step 5: Right click on the object and select “Copy Object”.

“Copy Object”

Step 6: In Postman, open the request you would like to test and paste this copied payload inside the “Headers” section.

Postman – header section of request

This way, we can read and copy payload from the network tab of a browser into postman as Header in another request. We can achieve the desired result through these steps.

Conclusion

Software testers and developers can benefit from knowing how to read the payload from the browser’s Network tab and use it as a header for another request in Postman. This method allows for complete testing of both integrated and independent APIs and it is very helpful when developing applications and integrating APIs with the frontend.