Playwright AI测试自动化框架

┌─────────────────────────────────────────────────────────────────┐
│                    AI / LLM Client                              │
│  (GitHub Copilot, Claude, GPT, Chatmode prompts)               │
└────────────────────────┬────────────────────────────────────────┘
                         │  JSON-RPC (MCP protocol)
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                    mcp-server.ts                                │
│  Tools: run_tests · get_test_results · analyze_failures         │
│  propose_locator_repair · get_dashboard_metrics                 │
└────────────────────────┬────────────────────────────────────────┘
                         │  spawns / reads / writes
                         ▼
┌─────────────────────────────────────────────────────────────────┐
│                Playwright Test Runner                           │
│  playwright.config.ts  →  multi-browser projects               │
│                         →  AI Reporter (tools/ai-reporter.ts)  │
│                         →  Failure analysis + trace summaries   │
└────────────┬───────────────────────────────────────────────────┘
             │
   ┌─────────▼──────────┐    ┌──────────────────────────────────┐
   │   Test Specs        │    │   Page Objects (tests/pages/)    │
   │   tests/**/*.spec.ts│───▶│   BasePage.ts (base class)       │
   │   14 categories     │    │   WeSendCVPage.ts                │
   └─────────────────────┘    └──────────────────────────────────┘
             │
   ┌─────────▼──────────┐    ┌──────────────────────────────────┐
   │   Failure platform  │    │   Healing + analytics           │
   │   tools/platform/   │    │   tools/platform/healing.ts     │
   │   failure-analysis  │    │   dashboard.ts                  │
   │   trace-summary     │    │   feature-flags.ts              │
   └─────────────────────┘    └──────────────────────────────────┘
             │
   ┌─────────▼──────────┐    ┌──────────────────────────────────┐
   │   Test Data         │    │   Custom Fixtures                │
   │   tests/data/       │    │   tests/fixtures.ts              │
   │   urls · users ·    │    │   apiContext · auto-trace        │
   │   testConfig        │    └──────────────────────────────────┘
   └─────────────────────┘

Playwright-AI-Agent-POM-MCP-Server/
├── mcp-server.ts                  # MCP server — AI tool integration + healing orchestration
├── playwright.config.ts           # Multi-browser config + AI reporter
├── package.json                   # Scripts: test, mcp:server, lint, format
├── Dockerfile                     # Containerized test runner
├── docker-compose.yml             # One-command compose run
├── tests/
│   ├── fixtures.ts                # Custom Playwright fixtures (apiContext, auto-trace)
│   ├── utils.ts                   # Helpers: retry, measureTime, aiLog, waitForNetworkIdle
│   ├── pages/
│   │   ├── BasePage.ts            # Abstract base: retries, logging, perf timing
│   │   └── WeSendCVPage.ts        # WeSendCV page object (extends BasePage)
│   ├── data/
│   │   ├── urls.ts                # Centralized URL constants
│   │   ├── users.ts               # Test user credentials (env-var backed)
│   │   └── testConfig.ts          # All timeouts, thresholds, retry policies
│   ├── unit-tests/
│   │   ├── ai-platform.spec.ts    # Failure-analysis + healing + MCP contract coverage
│   │   └── api.spec.ts
│   ├── integration-tests/
│   │   └── workflow.spec.ts
│   ├── performance-tests/
│   │   └── load-time.spec.ts
│   ├── security-tests/
│   │   ├── auth.spec.ts
│   │   └── xss.spec.ts
│   ├── validation-tests/
│   │   ├── broken-links.spec.ts
│   │   ├── input-validation.spec.ts
│   │   └── invalid-route.spec.ts
│   ├── mock-tests/
│   │   └── api-mocking.spec.ts
│   ├── interop-tests/
│   │   └── compatibility.spec.ts
│   ├── accessibility/
│   │   ├── a11y.spec.ts
│   │   └── keyboard.spec.ts
│   ├── resilience/
│   │   └── resource-failure.spec.ts
│   ├── network-resilience/
│   │   ├── offline.spec.ts
│   │   └── example-network-resilience.spec.ts
│   ├── i18n-tests/
│   │   └── i18n.spec.ts
│   ├── e2e/
│   │   └── e2e.spec.ts
│   ├── chaos-tests/
│   │   └── concurrency.spec.ts
│   ├── contract-tests/
│   │   ├── api-contract.spec.ts
│   │   └── api-response-compare.spec.ts
│   ├── ping-tests/
│   ├── response-code-tests/
│   ├── mobile.spec.ts
│   ├── vibe.spec.ts
│   └── wesendcv.spec.ts
├── tools/
│   ├── ai-reporter.ts             # AI-parseable Playwright reporter
│   └── platform/
│       ├── failure-analysis.ts    # Failure categorization and root-cause scoring
│       ├── trace-summary.ts       # Trace/screenshot/video triage summaries
│       ├── healing.ts             # POM-only locator repairs + validation hooks
│       ├── dashboard.ts           # Historical metrics aggregation
│       ├── analytics.ts           # Event recording for AI QA telemetry
│       ├── feature-flags.ts       # Feature-flag access helpers
│       ├── parallel-executor.ts   # Deterministic parallel sharding runner
│       ├── report-history.ts      # Report archive access helpers
│       ├── schemas.ts             # Shared AI QA schemas
│       ├── secret-redaction.ts    # Secret sanitization for logs
│       ├── test-generator.ts      # Natural-language test preview generation
│       ├── test-selection.ts      # Impact analysis for changed files
│       └── ...
├── .github/
│   ├── copilot-instructions.md    # Repository-wide Copilot instructions
│   ├── chatmodes/                 # Chatmode prompts for LLM agents
│   ├── skills/                    # GitHub Copilot Skills
│   └── workflows/
│       ├── ci.yml                 # GitHub Actions multi-OS pipeline
│       └── code-quality.yml       # ESLint + Prettier quality gate
└── .claude/
    └── skills/playwright-cli/     # Playwright CLI agent references and guides

cd Playwright-AI-Agent-POM-MCP-Server
npm ci
npx playwright install --with-deps

cd C:\Playwright-AI-Agent-POM-MCP-Server
npm ci
npx playwright install --with-deps
npx playwright test --version

npm outdated
npm audit

# Build image
docker build -t playwright-ai-agent-tests:local .

# Run all tests
docker run --rm -it playwright-ai-agent-tests:local

# Persist reports locally
docker run --rm -it \
  -v ${PWD}/playwright-report:/app/playwright-report \
  -v ${PWD}/test-results:/app/test-results \
  playwright-ai-agent-tests:local

# One-command compose run
docker compose up --build
docker compose down

# Full suite (all browsers, all categories)
npm test

# Specific file
npx playwright test tests/wesendcv.spec.ts

# Specific category
npx playwright test tests/performance-tests/
npx playwright test tests/security-tests/

# Headed mode for debugging
npx playwright test tests/wesendcv.spec.ts --headed --project=chromium

# Interactive debugger
npx playwright test --debug

# Show HTML report after run
npm run test:report

# Pixel 5 (Android Chrome)
npx playwright test tests/mobile.spec.ts --project="Mobile Chrome"

# iPhone 12 (Safari)
npx playwright test tests/mobile.spec.ts --project="Mobile Safari"

# Both mobile projects
npx playwright test tests/mobile.spec.ts \
  --project="Mobile Chrome" --project="Mobile Safari"

npm run mcp:server
# or
npx ts-node mcp-server.ts

{
  "servers": {
    "playwright-ai": {
      "type": "stdio",
      "command": "npx",
      "args": ["ts-node", "mcp-server.ts"],
      "cwd": "${workspaceFolder}"
    }
  }
}

{
  "jsonrpc": "2.0",
  "id": 1,
  "method": "tools/call",
  "params": {
    "name": "run_tests",
    "arguments": {
      "filter": "tests/unit-tests/",
      "project": "chromium"
    }
  }
}

{
  "schemaVersion": "2.0.0",
  "runId": "2026-09-27T09:00:00.000Z",
  "generatedAt": "2026-09-27T09:00:01.000Z",
  "summary": {
    "passed": 42,
    "failed": 2,
    "skipped": 1,
    "timedOut": 0,
    "total": 45,
    "durationMs": 123456
  },
  "tests": [
    {
      "title": "WeSendCV smoke checks > homepage loads",
      "file": "/tests/wesendcv.spec.ts",
      "project": "chromium",
      "status": "passed",
      "durationMs": 3210,
      "retries": 0,
      "error": null,
      "aiHint": null
    },
    {
      "title": "WeSendCV smoke checks > first job link has href",
      "file": "/tests/wesendcv.spec.ts",
      "project": "chromium",
      "status": "failed",
      "durationMs": 10001,
      "retries": 1,
      "category": "locator",
      "rootCause": {
        "probableCause": "Locator likely stale or too brittle for current DOM.",
        "confidence": 0.88,
        "category": "locator"
      },
      "artifacts": {
        "trace": "test-results/.../trace.zip",
        "screenshot": "test-results/.../test-failed-1.png"
      },
      "traceSummary": {
        "available": true,
        "summary": "Collected 2 artifact signal(s) for failure triage.",
        "actionableSteps": [
          "Inspect DOM at failure point in trace and update page-object locator to role/data-testid strategy.",
          "Validate updated locator with targeted rerun on impacted spec only."
        ],
        "evidence": ["Trace: trace.zip", "Screenshot: test-failed-1.png"]
      },
      "error": {
        "message": "locator('.tpg-post-link') not found",
        "location": "tests/pages/WeSendCVPage.ts:72"
      },
      "aiHint": "Selector not found. Verify the locator in the Page Object matches current DOM. Use role or data-testid attributes for resilience."
    }
  ]
}

// Retry up to 3 times, delays: 500ms → 1000ms → 2000ms
await this.retryAction(
  () => this.page.click('.submit-btn'),
  'click submit',
  3,
  500
);

const response = await this.measureAction(
  () => this.page.goto('https://wesendcv.com'),
  'goto homepage'
);
// Logs { action: 'goto homepage', status: 'success', durationMs: 1234 }

// Every action is logged; retrieve at end of test:
const summary = page.getAISummary();
// { totalActions: 12, failures: 0, retries: 1, logs: [...] }

const visible = await this.softAssertVisible(locator, 'header');
// Returns false on failure instead of throwing — test continues

// Waits for visible AND positionally stable (no layout shifts)
await this.waitForStable(locator);

import { test, expect } from '../fixtures';

test('API returns valid posts', async ({ apiContext }) => {
  const resp = await apiContext.get('/wp-json/wp/v2/posts');
  expect(resp.status()).toBe(200);
});

import { TEST_CONFIG } from './data/testConfig';

// Use timeouts
await page.goto(url, { timeout: TEST_CONFIG.timeouts.navigation });

// Use performance thresholds
expect(loadTime).toBeLessThan(TEST_CONFIG.performance.maxLoadTimeMs);

// Use retry policy
await retry(action, TEST_CONFIG.retry.networkActions, TEST_CONFIG.retry.baseDelayMs);

node tools/dev-server.js
# Open http://127.0.0.1:3000

# First run — creates baseline
node tools/compare.js demo/baseline.png artifacts/current.png artifacts/diff.png --threshold=0.03

# Subsequent runs — compares against baseline; exits non-zero if diff > 3%
node tools/compare.js demo/baseline.png artifacts/current.png artifacts/diff.png

tests/pages/
├── BasePage.ts          ← Abstract base (retry, logging, timing, soft assert)
└── WeSendCVPage.ts      ← Concrete POM (extends BasePage)

tests/data/
├── urls.ts              ← URL constants
├── users.ts             ← User credentials (env-var backed)
└── testConfig.ts        ← Timeouts, thresholds, retry policy

import { BasePage } from './BasePage';
import { URLS } from '../data/urls';

export class MyPage extends BasePage {
  readonly url = URLS.myPage.base;

  get searchBox() {
    return this.page.locator('[data-testid="search"]');
  }

  async search(query: string): Promise<void> {
    await this.safeFill(this.searchBox, query, 'search box');
    await this.safeClick(this.page.locator('[type="submit"]'), 'search submit');
  }
}

# Run all tests
npm test

# Run specific category
npx playwright test tests/security-tests/

# Run with specific browser
npx playwright test --project=chromium

# Start AI/MCP server
npm run mcp:server

# Lint all TypeScript
npm run lint

# Format all files
npm run format

# Show HTML report
npm run test:report

# Open interactive trace viewer
npx playwright show-trace test-results/<test>/trace.zip

# Show Playwright codegen
npx playwright codegen https://wesendcv.com