name: test-responsive description: "Test responsive design across mobile, tablet, and desktop viewports using MCP Playwright. Use this skill when the user wants to verify that a web application adapts correctly to different screen sizes, check navigation collapse, or validate layout at various breakpoints."

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:

   { "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:

   { "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.