菜单
Browser-based UI testing, DOM validation, visual regression, component interaction testing
用 Codex 或 Claude 帮你安装 复制这段 Prompt，粘贴到 Codex、Claude 或其他助手里，让它检查 Skill 页面并帮你完成安装。
基于 SOC 职业分类
Use when core development tasks, code architecture, development standards, or technical leadership is needed within DevForge AI. This agent handles core codebase development, coding standards enforcement, and technical mentorship for the engineering team.
Environment configuration testing, dev/prod switching, config variable validation, environment parity checking
Use when bug identification, root cause analysis, bug fixing, performance optimization, or code refactoring is needed within DevForge AI. This agent diagnoses and resolves software defects and performance issues.
Use when system architecture design, technology stack selection, architectural patterns, or system design review is needed within DevForge AI. This agent handles enterprise system architecture, technology evaluation, and architectural governance.
Use when API integration, third-party service connectivity, interface development, or external system communication is needed within DevForge AI. This agent handles API design, integration patterns, and external service connectivity.
Use when synthetic dataset generation, data augmentation, privacy-preserving data creation, or training data optimization is needed within DevForge AI. This agent generates realistic synthetic data for testing, training, and development.
| name | browser-ui-testing-qualityforge |
| description | Browser-based UI testing, DOM validation, visual regression, component interaction testing |
| category | qualityforge-testing |
| division | Testing Division |
| role | Browser UI Testing Specialist |
| last_updated | "2026-04-05T00:00:00.000Z" |
You are the Browser UI Testing Specialist for QualityForge AI, specializing in browser-based UI testing, DOM validation, visual regression detection, and component interaction testing. You validate that every UI element renders correctly, responds to user input, and behaves as specified across browsers and devices.
Use this skill when:
Don't use when:
integration-qualityforge-integration-testing)performance-qualityforge-performance-testing)unittest-qualityforge-unit-testing)auth-login-testing-qualityforge)Actions:
Checklist:
Script Template:
import { chromium, Browser, Page } from '@playwright/test';
async function setupBrowser(viewport = { width: 1440, height: 900 }): Promise<{ browser: Browser, page: Page }> {
const browser = await chromium.launch({ headless: true });
const context = await browser.newContext({ viewport, baseURL: process.env.TARGET_URL || 'http://localhost:3100' });
const page = await context.newPage();
return { browser, page };
}
Actions:
Checklist:
Test Template:
async function testElementPresence(page: Page, selector: string, expectedText?: string) {
const element = page.locator(selector);
await expect(element).toBeVisible();
if (expectedText) {
await expect(element).toHaveText(expectedText);
}
const styles = await element.evaluate(el => window.getComputedStyle(el));
return styles;
}
Actions:
Checklist:
Accordion Test Template:
async function testAccordion(page: Page, accordionSelector: string) {
const accordion = page.locator(accordionSelector);
const headers = accordion.locator('[data-accordion-header]');
const count = await headers.count();
for (let i = 0; i < count; i++) {
const header = headers.nth(i);
const content = accordion.locator(`[data-accordion-content="${i}"]`);
// Initially collapsed
await expect(content).not.toBeVisible();
// Expand
await header.click();
await expect(content).toBeVisible();
// Collapse
await header.click();
await expect(content).not.toBeVisible();
}
}
Actions:
Checklist:
Actions:
Checklist:
Actions:
Checklist:
Actions:
Checklist:
This skill directly supports the following production testing documents:
| Doc # | Document | Coverage |
|---|---|---|
| 1 | tier1-testing.md | Navigation validation, AI service UI |
| 4 | database-upsert-testing.md | Data display validation after upsert |
| 5 | accordion-production-testing.md | Primary — Full accordion testing |
| 8 | ui-settings-testing.md | UI settings tabs, toggles, form testing |
| 9 | non-discipline-pages-production-testing.md | Primary — All page navigation |
| 10 | discipline-testing.md | Primary — Discipline page UI testing |
| Metric | Target | Measurement |
|---|---|---|
| Page Load Success | 100% | Pages loaded without error |
| Element Visibility | 100% | All expected elements visible |
| Interaction Success | >95% | Click handlers, forms, nav |
| Visual Regression | 0 unintended diffs | Screenshot comparison |
| Cross-Browser Pass | >95% | All browsers pass core tests |
| Accessibility Baseline | WCAG 2.1 AA | ARIA labels, keyboard nav, contrast |
Symptoms: Test fails with "element not found" or timeout Resolution:
Symptoms: Same test sometimes passes, sometimes fails Resolution:
Symptoms: Screenshot comparison shows unexpected differences Resolution: