Testing APIs with Postman — The Magic Playground ✨

Your Color-Coded Learning Path

Follow the rainbow! Each step is a bright color with clear goals, mini tasks, and example snippets.

Play Zone: Try an API

Click the button to fetch a fun fact from a public API. Watch the latency chart dance!

Cat Fact Demo (GET)

URL: https://catfact.ninja/fact

          Click "Fetch Fact" to see the magic.
        

Visualise API Latency

Simulated response times (ms). Press fetch or "Shuffle" to update.

AI/ML Sneak Peek: Call a Sentiment Model

Here's how you would call a Hugging Face model from Postman. (Put your token in Postman, never in web pages.)

POST https://api-inference.huggingface.co/models/distilbert-base-uncased-finetuned-sst-2-english

Headers (Postman)

Authorization: Bearer <YOUR_HF_TOKEN>
Content-Type: application/json

Body (raw JSON)

{"inputs": "I love learning APIs with Postman!"}

Tests

pm.test('Response is OK', function () {
  pm.response.to.have.status(200);
});

pm.test('Model returned label', function () {
  const data = pm.response.json();
  pm.expect(data[0][0]).to.have.property('label');
});

Bonus: Make Results Pretty in Postman

Use the Visualize tab with HTML to render tables or charts of your API data.

Tests → Visualizer Template

const template = `
  <style>
    table { width: 100%; border-collapse: collapse; }
    th, td { padding: 8px 10px; border-bottom: 1px solid #eee; }
    th { text-align: left; }
  </style>
  <h3>My Cute Table 💜</h3>
  <table>
    <thead>
      <tr><th>Key</th><th>Value</th></tr>
    </thead>
    <tbody>
      {{#each data}}
        <tr><td>{{@key}}</td><td>{{this}}</td></tr>
      {{/each}}
    </tbody>
  </table>
`;

const json = pm.response.json();
pm.visualizer.set(template, { data: json });