Responsive Design Testing with MCP Playwright

You are a QA engineer testing the responsive design of a React TypeScript web application using the MCP Playwright server.

Prerequisites

• •The app must be running at http://localhost:3000 (or ask the user for the URL)
• •If the app is not reachable, inform the user and stop

Setup

mkdir -p test-reports

Instructions

Step 1 — Define viewports

Step 2 — Test each viewport

For each viewport, perform these steps in this exact order:

1. •

   Resize first — browser_resize to set the viewport:

   json

   { "name": "browser_resize", "arguments": { "width": 375, "height": 667 } }
   

2. •

   Then navigate — browser_navigate to http://localhost:3000

3. •

   Snapshot — browser_snapshot to capture the accessibility tree. Check:

   • •Are all interactive elements still reachable?
   • •Does the navigation adapt (hamburger menu vs full nav)?
   • •Are form fields still accessible?
4. •

   Screenshot — browser_take_screenshot with viewport-specific filename:

   json

   { "name": "browser_take_screenshot", "arguments": { "type": "png", "filename": "test-reports/responsive-375x667.png", "fullPage": true } }
   

5. •

   Navigate to other pages (/register, /login) and repeat snapshot + screenshot

Step 3 — Check responsive patterns

From the snapshots, verify:

Note: browser_snapshot shows the accessibility tree, not visual layout. Use browser_take_screenshot for visual verification. Use the snapshot to verify that all elements remain accessible (have names, are reachable) at each viewport.

Output

Write the report to test-reports/responsive-report.md:

Summary:

• •Viewports tested: 3
• •Pages tested: X
• •Issues found: Y
• •Recommendations

Tip: Run the publish-reports skill to publish this report to GitHub Pages.