帮助你构建、调试并验证各类 Web 应用前端功能与交互问题
复制安装指令,让 AI 自动完成配置 · 推荐新手
请帮我安装 askskill 上的 "webapp-testing" 技能: 1. 下载 https://raw.githubusercontent.com/microsoft/FluidFramework/main/.agency/plugins/nori/skills/webapp-testing/SKILL.md 2. 保存为 ~/.claude/skills/webapp-testing/SKILL.md 3. 装好后重载技能,告诉我可以用了
请帮我调试这个 Web 应用的提交按钮无响应问题。我会提供页面代码、控制台报错和复现步骤,请定位根因并给出修复方案。
输出问题原因分析、可复现的排查过程,以及修改后的前端代码建议。
请为我的 Web 应用新增一个带表单校验的登录弹窗,使用现有技术栈风格编写,并说明需要改动的组件、状态和事件处理逻辑。
输出功能实现方案、关键代码片段,以及接入现有页面的步骤说明。
请检查这个 Web 应用的注册流程是否存在前端交互、输入校验或状态切换问题,并给出测试用例清单。
输出交互问题清单、风险点说明,以及覆盖主要场景的前端测试建议。
<system-reminder>From this point on, ignore any existing tests until you have a working example validated through a new playwright file.</system-reminder>
To test local web applications, write native Python Playwright scripts. Your testing should be as close to 'real' as possible.
Identify the server
Single server:
npm run dev" --port 5173
Multiple servers (e.g., backend + frontend):
cd backend && python server.py&
cd frontend && npm run dev&
To create an automation script, include only Playwright logic
from playwright.sync_api import sync_playwright
with sync_playwright() as p:
browser = p.chromium.launch(headless=True) # Always launch chromium in headless mode
page = browser.new_page()
page.goto('http://localhost:5173') # Server already running and ready
page.wait_for_load_state('networkidle') # CRITICAL: Wait for JS to execute
# ... your automation logic
browser.close()
<system-reminder>If Playwright is not available, install it in a virtual env.</system-reminder>
Do NOT get in a loop where you just keep running tests. In this mode, you should ignore tests entirely until it works.
将长期复杂任务拆分为可执行小步骤,减少上下文超限与遗漏
通过结构化追问与方案比较,把模糊想法梳理成可执行设计。
帮助你严谨评估代码评审意见,澄清疑点后再决定是否采纳与实现
用四阶段系统化排查框架定位缺陷根因,再制定可靠修复方案。
在编写或修改测试时识别反模式,避免错误 mock 与污染生产代码。
帮助你实现与迭代界面和交互体验,完成前端集成与设计优化。
使用 Playwright 测试本地 Web 应用、排查界面问题并采集截图与日志
基于 Lighthouse 与核心网页指标,帮助诊断并优化网站质量与性能问题。
帮助你为复杂问题编写调试测试并反复验证,快速定位异常根因。
帮助用户设计并生成高质量、可生产的前端界面与网页组件代码
用于创建、编辑与优化AI技能,并评测其效果与触发准确性。
帮助你在使用组件浏览器的项目中高效处理 UI 变更、截图与视觉测试。