Pretty, raw, and preview views in Postman - Test Execution Trace

Test Overview

This test checks that the Postman response viewer correctly switches between Pretty, Raw, and Preview views and displays the response content accordingly.

Test Code - Selenium

Postman

import unittest
from selenium import webdriver
from selenium.webdriver.common.by import By
from selenium.webdriver.support.ui import WebDriverWait
from selenium.webdriver.support import expected_conditions as EC

class TestPostmanResponseViews(unittest.TestCase):
    def setUp(self):
        self.driver = webdriver.Chrome()
        self.driver.get('https://web.postman.co/workspace')
        # Assume user is logged in and a request is ready to send

    def test_response_views(self):
        driver = self.driver
        wait = WebDriverWait(driver, 10)

        # Click Send button to get response
        send_button = wait.until(EC.element_to_be_clickable((By.CSS_SELECTOR, 'button[data-testid="send-button"]')))
        send_button.click()

        # Wait for response to appear
        wait.until(EC.presence_of_element_located((By.CSS_SELECTOR, 'div.response-body')))

        # Select Pretty view
        pretty_tab = driver.find_element(By.CSS_SELECTOR, 'button[aria-label="Pretty"]')
        pretty_tab.click()
        # Assert Pretty view content is visible
        pretty_content = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, 'div.response-body.pretty')))
        self.assertTrue(pretty_content.is_displayed())

        # Select Raw view
        raw_tab = driver.find_element(By.CSS_SELECTOR, 'button[aria-label="Raw"]')
        raw_tab.click()
        # Assert Raw view content is visible
        raw_content = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, 'div.response-body.raw')))
        self.assertTrue(raw_content.is_displayed())

        # Select Preview view
        preview_tab = driver.find_element(By.CSS_SELECTOR, 'button[aria-label="Preview"]')
        preview_tab.click()
        # Assert Preview view content is visible
        preview_content = wait.until(EC.visibility_of_element_located((By.CSS_SELECTOR, 'div.response-body.preview')))
        self.assertTrue(preview_content.is_displayed())

    def tearDown(self):
        self.driver.quit()

if __name__ == '__main__':
    unittest.main()

Execution Trace - 7 Steps

Step	Action	System State	Assertion	Result
1	Open Chrome browser and navigate to Postman web workspace	Postman workspace page is loaded, user is logged in, request ready	—	PASS
2	Click the Send button to send the API request	Request sent, waiting for response to appear	—	PASS
3	Wait until response body is present in the UI	Response body is displayed in the response panel	Response body element is present	PASS
4	Click the Pretty tab to view response in Pretty format	Pretty view tab is active, response formatted and shown prettily	Pretty response content is visible	PASS
5	Click the Raw tab to view raw response text	Raw view tab is active, raw response text displayed	Raw response content is visible	PASS
6	Click the Preview tab to view rendered response (e.g., HTML)	Preview view tab is active, rendered response displayed	Preview response content is visible	PASS
7	Close the browser	Browser closed, test ends	—	PASS

Failure Scenario

Failing Condition: Response body does not appear after sending request or view tabs do not switch correctly

Execution Trace Quiz - 3 Questions

What does the test verify after clicking the Pretty tab?

A That the raw response text is shown

B That the response is formatted and displayed prettily

C That the response is rendered as HTML

D That the request is sent again

Key Result

Always wait explicitly for UI elements to appear before interacting or asserting, especially in dynamic web apps like Postman.

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