Web Automated Testing / Web自动化测试

Overview / 概述

自动化浏览器测试技能。使用 Playwright 进行浏览器交互与 DOM 断言，tesseract.js 做 OCR 截图文字验证。支持冒烟测试、全量测试、截图回归测试。

Automated browser testing Skill. Uses Playwright for browser interaction and DOM assertions, tesseract.js for OCR screenshot text verification. Supports smoke tests, full tests, and screenshot regression testing.

Trigger Conditions

• After code change self-check passes
• User asks to "test", "verify page"
• Need to confirm UI rendering correctness
• Screenshot regression testing

Configuration (read from pipeline.json)

Test Types / 测试类型

1. Smoke Test (fast, always run)

• Page loads successfully
• Key DOM elements exist
• No JS runtime errors

2. Full Test (after major changes)

• All interaction flows
• Form submissions
• Modal/overlay open/close
• Async data loading
• Screenshot comparison

3. OCR Verification (optional, requires tesseract.js)

• Screenshot text recognition
• Key copy verification
• Multi-language support

Workflow

Step 0: Project Type Detection / 项目类型检测（V2.6）

Before running any test, check whether this project actually needs browser testing / 先判断项目是否需要浏览器测试：

1. Check pipeline.json → project.type:
   • web / fullstack / spa / mini-program → Continue to Step 1
   • cli / backend-api / desktop / script → Skip this Skill: report "Web testing skipped — project type is {type}, no browser UI to test"
2. No pipeline.json → check package.json for web frameworks:
   • Contains react/vue/angular/next/nuxt/express with a start or dev script → likely web → continue
   • Otherwise → skip with note: "No web project detected — web-testing skipped"
3. Both files missing → check for .html files in project root:
   • Found → possible static web → continue with caution
   • Not found → skip

Why: Running Playwright on a CLI-only project wastes time and produces confusing errors. / 在纯CLI项目上跑Playwright浪费时间且报错混乱。

Step 1: Prepare

Check test dependencies installed:

npx playwright install chromium

Step 2: Create Test Script

Write test cases to {{pipeline.paths.tests}}smoke-test.cjs:

const { chromium } = require('playwright');
(async () => {
  const browser = await chromium.launch();
  const page = await browser.newPage();
  await page.goto('{{pipeline.project.testUrl}}{{pipeline.project.testPagePath}}');
  await page.waitForLoadState('networkidle');
  
  // DOM assertions
  const el = await page.$('{{pipeline.testing.domSelectors.mainContainer}}');
  if (!el) { console.error('FAIL: Main container not found'); process.exit(1); }
  
  console.log('OK: Page loaded successfully');
  await browser.close();
})().catch(e => { console.error('FAIL:', e.message); process.exit(1); });

Step 3: Execute

node {{pipeline.paths.tests}}smoke-test.cjs

Step 4: Report

Report test results: pass count / fail count, failed item screenshots and reasons.

Dependencies

npm install playwright
npx playwright install chromium
# OCR (optional)
npm install tesseract.js sharp