Skip to main content

Automated Website Testing with Playwright MCP

Use the Playwright MCP server (via Docker) to interactively test the PinpointPOS websites against local validation.

Prerequisites​

  • Docker installed
  • Local validation running (./scripts/local-validation.sh up)

1. Start Local Validation​

./scripts/local-validation.sh up

This starts everything: Spanner emulator, Firebase Auth emulator, all 8 microservices, and the 3 website dev servers.

Dev URLs​

ServiceURL
Customer Portalhttp://localhost:5173
Support Portalhttp://localhost:5174
peakpos.cohttp://localhost:5175
Firebase Emulator UIhttp://localhost:4000

Seeded Test Credentials​

Local validation automatically seeds a super admin user:

FieldValue
Emailadmin@peakpos.co
PasswordLOCAL_SUPPORT_PASSWORD
Rolemgmt_super_admin
Tenantadmin-tenant-local (Support Portal)

The Customer Portal uses tenant user-tenant-local. To test it, create a user via the Firebase Auth emulator UI at http://localhost:4000 with tenant user-tenant-local, or via curl:

curl -s -X POST \
  "http://localhost:9099/identitytoolkit.googleapis.com/v1/accounts:signUp?key=fake-api-key" \
  -H "Content-Type: application/json" \
  -d '{
    "email": "test@example.com",
    "password": "LOCAL_CUSTOMER_PASSWORD",
    "displayName": "Test User",
    "tenantId": "user-tenant-local",
    "returnSecureToken": true
  }'

2. Install the Playwright MCP Server (Docker)​

Run the Playwright MCP server as a persistent service:

docker run -d -i --rm --init --pull=always \
  --network host \
  --entrypoint node \
  --name playwright-mcp \
  mcr.microsoft.com/playwright/mcp \
  cli.js --headless --browser chromium --no-sandbox --port 8931 --host 0.0.0.0

--network host is used so the container can reach the dev servers on localhost ports.

Then configure Claude Code to connect via HTTP:

claude mcp add playwright --transport http http://localhost:8931/mcp

Or add to .claude/settings.json manually:

{
  "mcpServers": {
    "playwright": {
      "url": "http://localhost:8931/mcp"
    }
  }
}

Option B: Spawn-on-demand via Docker​

Add to .claude/settings.json:

{
  "mcpServers": {
    "playwright": {
      "command": "docker",
      "args": ["run", "-i", "--rm", "--init", "--pull=always", "--network", "host", "mcr.microsoft.com/playwright/mcp"]
    }
  }
}

Option C: Direct npx (no Docker)​

If you have Node.js installed:

claude mcp add playwright -- npx @playwright/mcp@latest --headless

3. Test the Websites​

Once the MCP server is connected, ask Claude to test the sites. Example prompts:

Support Portal (admin login)​

Navigate to http://localhost:5174 and log in with email admin@peakpos.co and password LOCAL_SUPPORT_PASSWORD. Verify the dashboard loads.

Customer Portal​

Navigate to http://localhost:5173, check the login page renders, and verify the Firebase auth form is present.

peakpos.co Marketing Site​

Navigate to http://localhost:5175 and verify the landing page loads with correct content.

Smoke test all sites​

Visit each of these URLs and confirm they load without errors:

4. Stop​

# Stop the Playwright MCP container
docker rm -f playwright-mcp

# Stop the dev environment
./scripts/local-validation.sh down

Notes​

  • The Docker Playwright MCP server only supports headless Chromium.
  • Firebase Auth emulator uses fake-api-key as the API key — no real Firebase credentials needed.
  • The admin@peakpos.co user is only valid for the Support Portal (admin tenant). The Customer Portal uses a different tenant.