Skip to main content

Automated Website Testing with Playwright MCP

Use the Playwright MCP server (via Docker) to let Claude interactively test the PinpointPOS websites against the local dev environment.

Prerequisites​

  • Docker installed
  • Local dev environment running (./scripts/dev.sh)

1. Start the Dev Environment​

./scripts/dev.sh

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​

The dev script automatically seeds a super admin user:

FieldValue
Emailadmin@peakpos.co
Passwordadmin123
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": "test1234",
    "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 admin123. 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/dev.sh stop

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.