帮助你构建、调试并验证各类 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.
帮助你严谨评估代码评审意见,澄清疑点后再决定是否采纳与实现
帮助你为复杂问题编写调试测试并反复验证,快速定位异常根因。