6585e10c6f
## 新增功能 ### 1. 屏幕阅读器兼容性增强（a11y） - 无障碍工具库：src/shared/lib/a11y.ts - aria-live Hook：src/shared/hooks/use-aria-live.ts - a11y 组件：skip-link/visually-hidden/focus-trap/aria-status - 增强 UI：table.tsx 系统性 ARIA role，dialog.tsx aria-modal - 审计文档：docs/accessibility/a11y-audit.md（WCAG 2.1 AA 清单） ### 2. 视觉回归测试 - 测试套件：tests/visual/（homepage + 3 个 dashboard） - 3 视口（desktop/tablet/mobile）× 2 主题（light/dark） - 动态元素遮罩，避免误报 - playwright.config.ts 新增 visual-chromium 项目 - 文档：docs/testing/visual-regression.md ### 3. 短信/微信推送渠道集成 - 新模块：src/modules/notifications/ - 4 个渠道：SMS（阿里云/腾讯云）、WeChat（公众号）、Email（SMTP）、In-App - 分发器按用户偏好并行多渠道发送 - 外部 SDK 动态 import，Mock 模式开发可用 - 文档：docs/notifications/channels.md ### 4. 漏洞扫描 CI 集成 - CI security-scan job：npm audit + Snyk + Trivy FS + OWASP ZAP - 独立工作流 security.yml：每周一深度扫描 + 容器镜像扫描 - 配置：suppressions.json + .trivyignore - 本地脚本：security-scan.sh/ps1 - 文档：docs/security/scanning.md（SLA 分级） ### 5. 灾备方案 - 脚本：backup-verify/backup-offsite-sync/dr-drill/failover/health-check - CI 增强：备份后校验+异地同步，每周灾备演练 - 独立工作流 dr-drill.yml：每周一凌晨 4 点自动演练 - 文档：docs/dr/dr-plan.md（RTO 4h/RPO 24h）+ dr-runbook.md（6 故障场景） ## 验证 - npx tsc --noEmit：0 错误 - npm run lint：0 错误 0 警告
105 lines
3.1 KiB
TypeScript
105 lines
3.1 KiB
TypeScript
/**
|
|
* 视觉测试通用辅助
|
|
*
|
|
* 提供视口切换、主题切换、页面就绪等待以及动态元素遮罩能力,
|
|
* 用于消除视觉快照中的误报。
|
|
*/
|
|
import type { Locator, Page } from "@playwright/test"
|
|
import { VIEWPORTS, type ThemeName, type ViewportSize } from "../visual.config"
|
|
|
|
/**
|
|
* 设置视口尺寸
|
|
* @param page Playwright Page 实例
|
|
* @param size 视口标识 desktop | tablet | mobile
|
|
*/
|
|
export async function setViewport(page: Page, size: ViewportSize): Promise<void> {
|
|
const viewport = VIEWPORTS[size]
|
|
await page.setViewportSize({ width: viewport.width, height: viewport.height })
|
|
}
|
|
|
|
/**
|
|
* 设置主题
|
|
*
|
|
* 项目使用 next-themes(attribute="class"),通过在 <html> 上切换 class 实现。
|
|
* 这里直接操作 localStorage 与 DOM,避免依赖主题切换 UI。
|
|
*
|
|
* @param page Playwright Page 实例
|
|
* @param theme 主题 light | dark
|
|
*/
|
|
export async function setTheme(page: Page, theme: ThemeName): Promise<void> {
|
|
// next-themes 默认将主题持久化在 localStorage 的 "theme" key
|
|
await page.addInitScript((themeValue) => {
|
|
try {
|
|
window.localStorage.setItem("theme", themeValue)
|
|
} catch {
|
|
// 忽略 localStorage 不可用的情况
|
|
}
|
|
}, theme)
|
|
// 若页面已加载,同步切换 DOM class
|
|
const htmlClass = await page.evaluate(() => document.documentElement.className)
|
|
const nextClass = theme === "dark" ? `${htmlClass} dark` : htmlClass.replace(/\bdark\b/g, "").trim()
|
|
await page.evaluate((cls) => {
|
|
document.documentElement.className = cls
|
|
}, nextClass)
|
|
}
|
|
|
|
/**
|
|
* 等待页面就绪
|
|
*
|
|
* 等待 networkidle、字体加载以及主内容渲染完成,
|
|
* 确保快照稳定。
|
|
*/
|
|
export async function waitForPageReady(page: Page): Promise<void> {
|
|
await page.waitForLoadState("networkidle")
|
|
// 等待字体加载完成,避免文字位移
|
|
await page.evaluate(() => document.fonts.ready)
|
|
// 给 React hydration 一点缓冲
|
|
await page.waitForTimeout(300)
|
|
}
|
|
|
|
/**
|
|
* 默认需要遮罩的动态元素选择器
|
|
* - 时间戳
|
|
* - 用户头像/用户名
|
|
* - 实时数据
|
|
*/
|
|
const DEFAULT_DYNAMIC_SELECTORS = [
|
|
"[data-testid='timestamp']",
|
|
"[data-testid='current-time']",
|
|
"[data-testid='user-avatar']",
|
|
"[data-testid='user-name']",
|
|
"time",
|
|
"[data-visual-dynamic]",
|
|
]
|
|
|
|
/**
|
|
* 遮罩动态元素
|
|
*
|
|
* 将指定选择器匹配的元素用纯色块覆盖,
|
|
* 避免时间戳、用户名等动态内容导致快照误报。
|
|
*
|
|
* @param page Playwright Page 实例
|
|
* @param selectors 额外需要遮罩的选择器(会与默认列表合并)
|
|
*/
|
|
export async function maskDynamicElements(page: Page, selectors: string[] = []): Promise<Locator[]> {
|
|
const allSelectors = [...new Set([...DEFAULT_DYNAMIC_SELECTORS, ...selectors])]
|
|
const masks: Locator[] = []
|
|
for (const selector of allSelectors) {
|
|
const locator = page.locator(selector)
|
|
const count = await locator.count()
|
|
if (count > 0) {
|
|
masks.push(locator)
|
|
}
|
|
}
|
|
return masks
|
|
}
|
|
|
|
/**
|
|
* 生成 toHaveScreenshot 的 mask 选项
|
|
*
|
|
* 配合 maskDynamicElements 使用,将动态元素从对比中遮罩。
|
|
*/
|
|
export function buildMaskOption(masks: Locator[]) {
|
|
return masks.length > 0 ? { mask: masks } : {}
|
|
}
|