Configure MCP with Playwright for Cursor: Essential Setup and Powerful Prompts

mcp-playwright-server/
├── src/
│   └── index.ts
├── dist/
│   └── index.js
├── package.json
├── tsconfig.json
└── node_modules/

$ cd /path/to/your/mcp-playwright-server
$ npm run build
$ node dist/index.js
# Should output: "MCP Playwright server running on stdio"

{
  "name": "playwright-automation",
  "command": "node",
  "args": ["/absolute/path/to/your/mcp-playwright-server/dist/index.js"],
  "env": {
    "NODE_ENV": "development"
  }
}

{
  "mcp.servers": {
    "playwright-automation": {
      "command": "node",
      "args": ["/absolute/path/to/your/mcp-playwright-server/dist/index.js"],
      "env": {
        "NODE_ENV": "development"
      }
    }
  }
}

Human: Navigate to https://example.com and take a screenshot

Cursor AI: I'll navigate to example.com and take a screenshot for you.

[Uses navigate_to_url tool]
[Uses take_screenshot tool]
[Shows the screenshot in chat]

Test the contact form on [website URL]. Try these scenarios:
1. Submit with all fields empty (check error messages)
2. Submit with invalid email format
3. Submit with valid data
4. Take screenshots of each state
Tell me what validation errors appear and if the form behavior is correct.

Starting from the homepage of [website], navigate through this user journey:
1. Click on "Products" in the main menu
2. Select the first product
3. Add it to cart
4. Go to checkout
Take a screenshot at each step and tell me if any links are broken or pages fail to load.

Visit [website URL] and check how it looks on mobile. 
Change the viewport to 375x667 (iPhone size), navigate to the main sections, 
and take screenshots. Tell me if there are any layout issues or elements 
that don't fit properly.

Go to [competitor website] and extract:
1. All product names from their main catalog page
2. Pricing information if visible
3. Main navigation menu items
4. Footer links
Organize this data in a structured format for competitive analysis.

Visit [news website] and extract all article headlines from the homepage. 
For each headline, also get the publication time if available. 
Format the results as a daily digest with timestamps.

Analyze the SEO elements of [website URL]:
1. Extract the page title and meta description
2. Check if there are any broken images (alt text missing)
3. List all the H1, H2, and H3 headings
4. Take a screenshot for visual reference
Tell me if there are any obvious SEO issues.

I just deployed a new feature on [staging URL]. Please test this workflow:
1. Login with username "testuser" and password "testpass123"
2. Navigate to the new dashboard section
3. Try creating a new project with name "Test Project"
4. Verify the project appears in the project list
Document any errors or unexpected behavior you encounter.

Help me reproduce this bug: "Users can't submit the feedback form on mobile."
1. Navigate to [website]/feedback
2. Set viewport to mobile size (375x667)
3. Fill out the form with test data
4. Try to submit and capture any error messages
5. Take screenshots of the process
Tell me exactly what happens when you try to submit.

Visit [website URL] and help me gather performance data:
1. Navigate to the main page and time how long it takes to load
2. Check if all images load properly
3. Try interacting with any dynamic elements (dropdowns, modals)
4. Take screenshots if any elements appear broken or slow to load
Report any performance issues you notice.

Test the complete purchase flow on [e-commerce site]:
1. Browse to a product page
2. Add item to cart
3. Proceed to checkout
4. Fill out shipping information (use fake but valid format data)
5. Stop before payment (don't actually purchase)
Document each step and identify any friction points or errors.

Check product availability on [website]:
1. Search for "[product name]"
2. Check if it's in stock
3. Extract the current price
4. Look for any sale/discount badges
5. Take a screenshot of the product page
Report the current status and pricing.

Help me test this complex workflow on [application URL]:

1. If the login page appears, log in with [credentials]
2. Navigate to the user dashboard
3. If there's a "New User" popup, dismiss it
4. Look for a "Create New" button and click it
5. Fill out the form with these details: [provide details]
6. Submit and verify success message appears

Handle any unexpected popups or errors gracefully and report what happens.

Extract all product information from [catalog URL]:
1. Start on page 1 of the product catalog
2. Extract product names, prices, and availability for current page
3. If there's a "Next" button, click it and repeat
4. Continue until you reach the last page
5. Compile all data into a structured list

Stop if you encounter more than 50 products to avoid excessive automation.

Set up monitoring for [news/blog website]:
1. Visit the homepage
2. Extract all article titles published today
3. For each article, get the publication time and author
4. Take a screenshot of the current homepage layout
5. Save this as a baseline for comparison

This will help me track when new content is published.

Looking at my React component in /src/components/ContactForm.tsx, 
please test the live version on [staging URL]:
1. Navigate to the contact page
2. Test all the form fields I've defined in the component
3. Verify that validation messages match what's in my code
4. Check if the styling looks correct compared to my CSS

Compare the live behavior with my component implementation.

I'm seeing an error in my browser console when users click the submit button. 
Can you reproduce this on [website URL]?
1. Open the contact form
2. Fill it out normally
3. Click submit and watch for any JavaScript errors
4. Try different input combinations

Help me understand when this error occurs by testing various scenarios.

✅ Good: "Navigate to the login page, enter 'test@example.com' and 'password123', 
click login, and tell me if you see a dashboard or an error message."

❌ Vague: "Test the login functionality."

✅ Good: "I'm testing a new checkout flow. Please go through the purchase process 
but stop before entering real payment details. Focus on identifying any confusing 
steps or unclear messaging."

❌ Unclear: "Test the checkout."

✅ Good: "Please test these three scenarios on [URL]: 
1. [Specific scenario with expected outcome]
2. [Specific scenario with expected outcome] 
3. [Specific scenario with expected outcome]
Compare results and highlight any inconsistencies."

❌ Overwhelming: "Test everything on this website."

# Test server manually
$ cd /path/to/mcp-playwright-server
$ node dist/index.js
# Should start without errors

# Linux users may need these dependencies
$ sudo apt-get install -y libnss3 libnspr4 libatk-bridge2.0-0 libdrm2 libxkbcommon0

// Add to your MCP server for better performance
private async initializeBrowser() {
  this.browser = await chromium.launch({ 
    headless: process.env.HEADLESS !== 'false',
    args: ['--no-sandbox', '--disable-dev-shm-usage'] // Helps with memory
  });
}

// Add periodic cleanup to your server
private async cleanupPeriodically() {
  setInterval(async () => {
    const pages = await this.browser?.pages() || [];
    // Close old pages (keep only the most recent)
    for (const page of pages.slice(0, -1)) {
      await page.close();
    }
  }, 300000); // Every 5 minutes
}

When testing [SPA URL], please:
1. Navigate to the page
2. Wait for the loading spinner to disappear
3. Wait an additional 2 seconds for dynamic content to load
4. Then proceed with the actual testing

This ensures all JavaScript has finished executing.

While testing [website], if any popups or cookie banners appear:
1. Try to dismiss them first (look for X, Close, or Accept buttons)
2. If dismissal fails, take a screenshot and note the popup content
3. Continue with testing around the popup if possible

Focus on the main functionality even if popups interfere.

{
  "mcp.servers": {
    "playwright-dev": {
      "command": "node",
      "args": ["/path/to/mcp-playwright-server/dist/index.js"],
      "env": {
        "NODE_ENV": "development",
        "HEADLESS": "false",
        "SLOW_MO": "100"
      }
    },
    "playwright-prod": {
      "command": "node", 
      "args": ["/path/to/mcp-playwright-server/dist/index.js"],
      "env": {
        "NODE_ENV": "production",
        "HEADLESS": "true"
      }
    }
  }
}

// Add to your MCP server for common patterns
{
  name: 'test_form_validation',
  description: 'Test form validation with common invalid inputs',
  inputSchema: {
    type: 'object',
    properties: {
      formSelector: { type: 'string' },
      fields: {
        type: 'array',
        items: {
          type: 'object',
          properties: {
            selector: { type: 'string' },
            invalidValues: { type: 'array', items: { type: 'string' } }
          }
        }
      }
    }
  }
}

# Web Automation Checklist

## Pre-deployment Testing
- [ ] Login flow validation
- [ ] Core user journeys 
- [ ] Form submission testing
- [ ] Mobile responsiveness check

## Post-deployment Verification  
- [ ] Production smoke tests
- [ ] Performance checks
- [ ] SEO element validation
- [ ] Analytics tracking verification

<!-- .cursor-prompts/form-testing.md -->
# Form Testing Template

Test the [FORM_NAME] form on [URL]:
1. Submit with empty fields (verify required field validation)
2. Submit with invalid email format (verify email validation)  
3. Submit with valid data (verify success flow)
4. Take screenshots of validation states

Report any UX issues or inconsistent messaging.

I just updated the validation logic in /src/utils/formValidation.js. 
Can you test the contact form on [staging URL] to verify:
1. Email validation works with my new regex pattern
2. Phone number validation accepts the formats I specified
3. Error messages match the ones I defined in the code

Compare the live behavior with my implementation.

Help me document test cases for our CI pipeline. 
Test these scenarios on [staging URL] and create a test specification:
1. [User journey 1]
2. [User journey 2]  
3. [Error case 1]
4. [Error case 2]

For each scenario, document the steps, expected outcomes, and any assertions needed.