Expect性能与安全检查内核探秘：Core Web Vitals、LoAF、CSRF攻击与WCAG审计如何自动化

Expect性能与安全检查内核探秘Core Web Vitals、LoAF、CSRF攻击与WCAG审计如何自动化【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expectExpect是一个让 AI 编码代理在真实浏览器中测试代码的技能Skill。它会读取你的 git 变更、生成测试计划并调用 Playwright 驱动浏览器自动检查性能Core Web Vitals、LoAF 长动画帧、安全CSRF 攻击、依赖漏洞、设计缺陷与应用完整性。本文深入 Expect 的检查内核带你看看性能指标采集、长动画帧归因、跨站请求伪造检测与 WCAG 无障碍审计是如何被自动化的。检查内核总览四大自动化能力Expect 把人工 QA 要反复做的事变成了可重复执行的自动化流程检查维度检查什么实现位置性能FCP / LCP / CLS / INP、LoAF、资源瀑布performance.ts安全CSRF、XSS、Cookie 安全、CSP/CORSsecurity 规则目录无障碍WCAG 2.1/2.2 AA、ARIA、键盘导航accessibility.ts报告按严重度排序的违规清单performance-trace.tsCore Web Vitals四项核心指标自动采集与评级Expect 注入到页面的运行时脚本会监听浏览器原生的PerformanceObserver无需任何第三方 SDKFCP首次内容绘制好 1.8s差 3sLCP最大内容绘制好 2.5s差 4sCLS累积布局偏移好 0.1差 0.25INP交互到下一帧好 200ms差 500ms阈值与评级逻辑集中定义在 performance.ts 中并通过 ratePerformanceMetric 把数值映射为 good / needs-improvement / poor 三档。LCP 采集还会刻意忽略 Expect 自己注入的覆盖层元素避免工具污染指标——这是一个很细节也很聪明的设计。性能规则库还给出了一份可直接对照的清单页面总重量 1.5MB、JS 300KB、用流式渲染取代加载转圈等见 performance/rule.md。LoAF 长动画帧精确到函数名的卡顿归因页面卡是玄学LoAFLong Animation Frames让它变成精确到毫秒和函数名的事实。Expect 的运行时会缓冲最多 50 条 LoAF 条目见 performance.ts 中的LoafEntry结构与LOAF_BUFFER_LIMIT每条记录帧时长、阻塞时长blockingDuration、渲染起点以及这一帧里每个脚本的函数名、调用方和源码位置。报告生成在 performance-trace.ts阻塞时长超过150ms的帧直接标记⚠ POOR阈值见 BLOCKING_DURATION_POOR_MS由用户交互触发的帧会标注[user interaction]脚本强制回流超过 30ms 会追加⚠ forced layout警告也就是说当 AI 代理拿到测试报告时它看到的不是页面卡而是函数 X 在文件 Y 阻塞了主线程 230ms——修复路径一目了然。CSRF 跨站请求伪造攻击原理 高置信度判定CSRF跨站请求伪造的本质是浏览器会自动带上登录 Cookie攻击者借此借你的身份发起请求。Expect 的安全规则库把这条攻击链完整写成了检查知识用户登录 example.com浏览器存有会话 Cookie用户访问 evil.comevil.com 向 example.com 发起请求表单 / 图片标签 / fetch浏览器自动附上 Cookie请求被当作用户本意处理这套原理与判定边界在 csrf.md 中讲得很清楚——尤其是什么时候才算 CSRF 风险状态变更请求 Cookie 鉴权 可跨源触发三者同时成立才值得报告而 Bearer Token、CORS 预检、SameSite 属性都天然免疫。文末还附了一份五问验证清单Verification Checklist。更关键的是 security/rule.md 中的约束只报告高置信度发现。代理必须先追踪数据流、确认攻击者可控的输入真的到达了危险接收点并排除框架自带的防护如 React 自动转义理论性的低置信度问题一律不报——避免浪费开发者时间。WCAG 无障碍审计双引擎并行 去重排序无障碍检查是 Expect 内核里工程含量最高的部分核心实现是 accessibility.ts双引擎并行同时运行 axe-core默认标签wcag2a/wcag2aa/wcag21a/wcag21aa见 DEFAULT_WCAG_TAGS与 IBM Equal AccessACE引擎后者专门覆盖 WCAG 2.2 新增标准如焦点不被遮挡、24×24px 最小触控目标、可无障碍的登录方式结果去重IBM 引擎只保留 axe-core 未覆盖的违规项去重逻辑严重度归一与排序两引擎的严重级别统一映射为 critical / serious / moderate / minor按危害程度排序输出排序与汇总单引擎失败不致命任一引擎报错只记录警告不中断整个审计流程配套的修复规则库accessibility/rule.md则教代理怎么修优先用原生 HTML 而非 ARIA、触控目标 44×44px、对比度 ≥ 4.5:1并且每次修复后重跑accessibility_audit验证——形成检查 → 修复 → 复检的闭环。总结为什么这些检查值得自动化痛点Expect 的自动化答案性能指标要开 Lighthouse 手工跑注入原生 PerformanceObserver随测试自动采集页面卡说不清哪里卡LoAF 归因到函数名与源码位置安全审查依赖资深工程师高置信度数据流追踪拒绝理论性误报无障碍合规门槛高双引擎审计 严重度排序 修复复检闭环所有检查结果最终都会回流给你的 AI 代理由它完成修复并重新运行验证。对新手而言你不需要手写选择器、不需要配置断言——让代理执行一次测试剩下的交给 Expect 的内核。【免费下载链接】expectExpect tests your agents code in a real browser项目地址: https://gitcode.com/gh_mirrors/expect6/expect创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考