Pretty, raw, and preview views in Postman - Framework Patterns

Framework Mode - Pretty, raw, and preview views

Folder Structure for Postman Test Collections

postman-project/
├── collections/
│   ├── user-api.postman_collection.json
│   ├── product-api.postman_collection.json
│   └── auth-api.postman_collection.json
├── environments/
│   ├── dev.postman_environment.json
│   ├── staging.postman_environment.json
│   └── prod.postman_environment.json
├── tests/
│   ├── user-tests.js
│   ├── product-tests.js
│   └── auth-tests.js
├── reports/
│   └── test-report.html
├── postman.config.json
└── README.md
    

Test Framework Layers in Postman

• Collections Layer: Group of API requests organized by feature or service.
• Environment Layer: Variables for different environments like dev, staging, prod.
• Tests Layer: Scripts written in JavaScript inside Postman to validate responses.
• Pre-request Scripts Layer: Scripts that run before requests to set up data or headers.
• Utilities Layer: External scripts or Newman CLI commands to run collections and generate reports.
• Configuration Layer: Settings for environments, globals, and collection variables.

Configuration Patterns in Postman

• Environment Files: Use separate JSON files for each environment to store URLs, tokens, and credentials.
• Collection Variables: Define variables inside collections for reusable values.
• Global Variables: Use sparingly for values shared across collections.
• Postman Config File: Store metadata and settings like default environment and collection paths.
• Newman CLI: Use command line options to specify environment and data files for running tests automatically.

Test Reporting and CI/CD Integration

• Newman Reports: Generate HTML, JSON, or JUnit reports from Newman test runs.
• CI/CD Integration: Run Newman commands in pipelines (GitHub Actions, Jenkins, GitLab CI) to automate API testing.
• Slack or Email Notifications: Configure pipeline steps to send test results to teams.
• Postman Monitor: Schedule automated runs and get reports inside Postman cloud.

Best Practices for Postman Views and Framework

• Use Pretty View for Readability: When inspecting API responses, use Pretty view to see formatted JSON or XML for easy understanding.
• Use Raw View for Debugging: Raw view shows the exact response bytes, useful for checking headers or binary data.
• Use Preview View for HTML Responses: Preview renders HTML responses as a webpage, helpful for testing web content APIs.
• Organize Collections Clearly: Group requests logically and name them descriptively for easy navigation.
• Keep Environment Variables Updated: Regularly update tokens and URLs to avoid test failures.

Self Check Question

Where in this folder structure would you add a new environment file for testing a new API stage?

Key Result

Postman test frameworks organize API requests into collections, use environment files for configuration, and leverage Pretty, Raw, and Preview views to inspect responses effectively.

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