Pretty, raw, and preview views in Postman - Build an Automation Script

Verify Pretty, Raw, and Preview response views in Postman

Preconditions (2)

Step 1: Open Postman and create a new GET request

Step 2: Enter the URL https://jsonplaceholder.typicode.com/posts/1

Step 3: Click the Send button

Step 4: Observe the response section

Step 5: Click the Pretty tab and verify the response is formatted and color-coded

Step 6: Click the Raw tab and verify the response is shown as plain text without formatting

Step 7: Click the Preview tab and verify the response is rendered as a web preview (HTML or JSON rendered)

✅ Expected Result: The Pretty view shows formatted and color-coded JSON, the Raw view shows plain text JSON, and the Preview view renders the response appropriately.

Automation Requirements - Postman test scripts

Assertions Needed:

Response status code is 200

Response body is valid JSON

Pretty view shows formatted JSON (simulated by checking JSON parse success)

Raw view matches the exact response text

Preview view renders content-type correctly (simulate by checking headers)

Best Practices:

Use pm.response API for assertions

Validate response status and body before checking views

Avoid hardcoding response text; use dynamic checks

Keep tests independent and clear

Automated Solution

Postman

pm.test('Status code is 200', () => {
    pm.response.to.have.status(200);
});

pm.test('Response body is valid JSON', () => {
    pm.expect(() => pm.response.json()).not.to.throw();
});

pm.test('Raw response matches response text', () => {
    const rawText = pm.response.text();
    pm.expect(rawText).to.be.a('string').and.not.empty;
});

pm.test('Content-Type header is present for preview', () => {
    pm.response.to.have.header('Content-Type');
    const contentType = pm.response.headers.get('Content-Type');
    pm.expect(contentType).to.match(/application\/json|text\//);
});

The first test checks the HTTP status code is 200, confirming the request succeeded.

The second test tries to parse the response body as JSON to simulate the Pretty view, which formats JSON.

The third test verifies the raw response text is a non-empty string, simulating the Raw view showing plain text.

The fourth test checks the Content-Type header to ensure the Preview view can render the response correctly.

These tests use Postman's pm API for clear, maintainable assertions.

Common Mistakes - 3 Pitfalls

Not checking the response status code before parsing JSON

Hardcoding expected raw response text

Ignoring Content-Type header when verifying preview

Bonus Challenge

Now add data-driven testing with 3 different API endpoints to verify Pretty, Raw, and Preview views for each.

Show Hint

Practice

1. Which Postman view shows the API response formatted with colors and indentation for easy reading?

easy

A. Raw view

B. Pretty view

C. Preview view

D. Headers view

Solution

1. Step 1: Understand the purpose of Pretty view

   The Pretty view formats JSON, XML, or HTML responses with colors and indentation to make them easier to read.

2. Step 2: Compare with other views

   Raw view shows the exact text without formatting, and Preview renders HTML content visually. Headers view shows response headers, not body.

3. Final Answer:

   Pretty view -> Option B

4. Quick Check:

   Formatted response = Pretty view [OK]

Hint: Pretty = formatted and colored response for easy reading [OK]

Common Mistakes:

• Confusing Raw view with Pretty view
• Thinking Preview shows formatted text instead of rendered content
• Mixing Headers view with body views

2. Which of the following is the correct way to switch to the Raw view in Postman after receiving a response?

easy

A. Go to Settings and enable Raw mode

B. Right-click the response and select 'Raw view'

C. Click the 'Raw' tab next to 'Pretty' in the response section

D. Double-click the response body

Solution

1. Step 1: Locate the response view tabs

   In Postman, response views like Pretty, Raw, and Preview appear as tabs above the response body.

2. Step 2: Identify how to switch views

   Clicking the 'Raw' tab directly switches the view to show the exact response text without formatting.

3. Final Answer:

   Click the 'Raw' tab next to 'Pretty' in the response section -> Option C

4. Quick Check:

   Switch views by clicking tabs = Click the 'Raw' tab next to 'Pretty' in the response section [OK]

Hint: Switch views by clicking tabs: Pretty, Raw, Preview [OK]

Common Mistakes:

• Trying to right-click for Raw view (no such option)
• Looking in Settings instead of response tabs
• Double-clicking does not change views

3. Given an HTML API response, what will you see in the Preview view of Postman?

medium

A. A rendered HTML page if the response contains HTML

B. A formatted and colored JSON with indentation

C. The raw JSON text exactly as received

D. Only the response headers without body

Solution

1. Step 1: Understand Preview view purpose

   The Preview view renders HTML content visually, like a browser would, showing the page layout and images.

2. Step 2: Consider JSON response in Preview

   If the response is JSON, Preview does not format or show it as text; it tries to render it, which usually results in a blank or raw display.

3. Final Answer:

   A rendered HTML page if the response contains HTML -> Option A

4. Quick Check:

   Preview = rendered HTML content [OK]

Hint: Preview shows rendered HTML, not raw or formatted JSON [OK]

Common Mistakes:

• Thinking Preview formats JSON like Pretty view
• Confusing Raw view with Preview
• Expecting headers in Preview

4. You switched to the Preview view in Postman but see a blank screen instead of your expected HTML page. What is the most likely reason?

medium

A. The response is JSON, not HTML, so Preview cannot render it

B. You forgot to click the Pretty tab first

C. Postman does not support Preview view

D. The Raw view is disabled in settings

Solution

1. Step 1: Identify response content type

   Preview view renders HTML visually. If the response is JSON or plain text, Preview cannot render it as a page.

2. Step 2: Understand why blank appears

   Since JSON is not HTML, Preview shows blank or raw text, not a formatted page.

3. Final Answer:

   The response is JSON, not HTML, so Preview cannot render it -> Option A

4. Quick Check:

   Preview blank = non-HTML response [OK]

Hint: Preview blank? Check if response is HTML or not [OK]

Common Mistakes:

• Thinking Pretty tab must be clicked first
• Believing Postman lacks Preview support
• Assuming Raw view settings affect Preview

5. You receive an API response with HTML content that includes CSS. Which Postman view should you use to verify the page visually as a user would see it, and why?

hard

A. Pretty view, because it formats HTML with colors and indentation

B. Raw view, because it shows the exact source code including scripts

C. Headers view, because it shows content type and length

D. Preview view, because it renders HTML and CSS like a browser

Solution

1. Step 1: Understand the content type and views

   HTML with JavaScript and CSS needs to be rendered to see the actual page as a user would.

2. Step 2: Identify the view that renders content

   Preview view renders HTML, applies CSS styles, showing the page visually.

3. Step 3: Compare with other views

   Pretty view only formats the source code text, Raw shows unformatted source, Headers show metadata only.

4. Final Answer:

   Preview view, because it renders HTML and CSS like a browser -> Option D

5. Quick Check:

   Visual page check = Preview view [OK]

Hint: Use Preview to see rendered page with CSS and styles [OK]

Common Mistakes:

• Choosing Pretty view expecting visual rendering
• Confusing Raw view with rendered output
• Expecting source code views to show visual layout