Testing HTTP requests is a crucial part of web development and API testing. Being able to easily send requests like POST directly from the browser can accelerate development workflows.
The browser itself provides several useful options for composing and sending test requests without needing to install any external tools. Developer tools panes, web-based apps, HTML forms, and client-side scripts can all be leveraged for testing POST APIs. Read on to learn a variety of methods for sending test POST requests directly from your browser.
Browser Developer Tools
The developer tools built into most major browsers provide an interface for composing and sending HTTP requests.
Chrome DevTools
Chrome DevTools is a good option for testing POST requests. To send a POST:
- Open DevTools (Ctrl+Shift+I)
- Go to the “Network” tab
- Select the “Fetch/XHR” sub-tab
- Click the “New Request” button
- Enter the URL you want to send the POST request to
- Change the method dropdown from “GET” to “POST”
- Click the “Payload” tab to add the POST body
- Click the “Send” button to execute the request
You can then inspect the request and response details. Chrome DevTools makes it easy to tweak values and resend requests while iterating on an API.
Firefox Developer Tools
The Firefox Developer Tools work similarly for sending POST requests:
- Open the Tools (Ctrl+Shift+I)
- Go to the “Network Monitor” tab
- Click the “+” button to add a new request
- Enter the URL, change the Method to POST
- Add POST data under “Payload”
- Click “Send”
Firefox provides a user interface comparable to Chrome for sending requests and inspecting responses.
Postman Form
Postman is a popular API testing tool that can also be run directly in the browser. To send a POST from Postman’s web form:
- Go to https://web.postman.co/requests
- Change the request method dropdown to POST
- Enter the request URL
- Go to the Body tab
- Select raw, JSON, etc to format the body
- Click Send to execute the POST
The Postman form provides a simple interface optimized for testing APIs. It handles request headers and body formatting automatically.
HTML Forms
Standard HTML forms can also submit POST requests:
<form method=”POST” action=”url”>
<input name=”key1″ value=”value1″>
<input type=”submit”>
</form>
This form element will POST the data to the provided URL when submitted. To test it out:
- Save the HTML locally or host it on a server
- Fill out the form and click Submit
- Check the Network request details
HTML form POSTs don’t allow custom headers or raw body formats but can be useful for simple requests.
Client-Side Scripts
POST requests can be constructed and sent from client-side JavaScript in the browser as well:
const data = {key1: “value1”};
fetch(url, {
method: “POST”,
headers: {
“Content-Type”: “application/json”
},
body: JSON.stringify(data)
})
.then(response => {
// inspect response
});
The Fetch API, XMLHttpRequest, and other libraries like Axios can send POST requests and handle responses. Client-side scripts allow complete control when testing APIs.
Tips for Effective Testing
- Use the network tab to inspect all requests/responses
- Check status codes and headers for issues
- Enable preflight OPTIONS requests
- Send invalid data to test error handling
- Try different HTTP verbs like PUT, PATCH, etc
The browser developer tools provide many options for sending test requests and inspecting issues. With the right methodology, most API functionality can be tested directly from the browser.
Tools and Proxy Alternatives
For more advanced HTTP testing from the browser, dedicated tools like Postman and Insomnia provide extra features. Browser extensions like REST Client also allow saving and re-sending requests.
Local proxies like Fiddler and Charles Proxy can intercept traffic for debugging. Self-hosted mock servers can simulate responses during development.
However, the built-in browser capabilities work well for many testing needs. Familiarity with the browser tools is invaluable for web developers and testers.
In Conclusion
While more robust tools like Postman and Charles Proxy have their place, the built-in browser capabilities provide powerful options for HTTP testing that every web developer should know. With techniques like the developer console, HTML forms, and JavaScript requests, you can test and iterate on POST APIs rapidly without leaving your browser.
Understanding how to customize requests, inspect server responses, and tweak parameters helps ensure that an API is functioning as expected before deployment. The browser is perfectly equipped for exploring and experimenting with web APIs during development.
