任务管理应用

初学者应用程序（学习项目）

这是一个你一次就能理解的小任务应用程序。

特性

• 添加任务
• 标记任务完成
• 删除任务
• 清除已完成的任务
• 将数据保存在本地存储中

在本地运行它

从该文件夹：

./start-app.sh

然后打开：

• http://localhost:5501

剧作家MCP集成

该项目通过以下方式连接到Playwright MCP .vscode/mcp.json.

• 服务器id: io.github.microsoft/playwright-mcp
• 命令： playwright-mcp
• 工件文件夹： .playwright-mcp/output
• 启用：跟踪+会话保存

用它

1. 启动应用服务器(./start-app.sh).
2. 在启用MCP的IDE中，启动/连接 io.github.microsoft/playwright-mcp.
3. 运行如下提示：

Use Playwright MCP to open http://localhost:5501 and run a smoke test:
- Add task "Learn Playwright MCP"
- Mark it completed
- Verify count is "1 total, 1 done"
Return pass/fail for each step.

运行后，检查 .playwright-mcp/output 对于文物。

部署（安全GitHub页面）

此仓库包含一个仅部署的工作流 index.html, style.css，以及 app.js 转到GitHub页面。

安全默认值包括：

• HTTPS（GitHub页面）
• 中的限制性内容安全策略 index.html
• 最低权限部署工作流权限

启用部署

1. 在GitHub中，打开 Settings -> Pages.
2. 在“构建和部署”下，设置 Source 到 GitHub Actions.
3. 推至 main （或手动运行工作流）。

您的网站URL将是：

• https://<your-github-username>.github.io/<repo-name>/

项目文件

• index.html -UI结构
• style.css -款式
• app.js -应用程序逻辑/状态

剧作家MCP学习提示

在启用MCP的助手中使用这些提示。

提示1：基本烟雾测试

Use Playwright MCP to test http://localhost:5501.
Steps:
1) Verify page title contains "Starter App".
2) Add task "Learn MCP".
3) Confirm task count becomes "1 total, 0 done".
4) Check the task checkbox.
5) Confirm task count becomes "1 total, 1 done".
Report pass/fail for each step.

提示2：故障导向检查

Use Playwright MCP against http://localhost:5501 and find one bug or UX issue.
Return:
- exact repro steps
- expected result
- actual result
- minimal fix suggestion

提示3：回归循环

Use Playwright MCP to run this regression:
- Add two tasks
- Complete one
- Click "Clear Completed"
- Verify only one active task remains
If anything fails, explain which step failed first.

下一个复杂性步骤（稍后）

1. 添加截止日期和优先级。
2. 添加筛选器（全部/活动/完成）。
3. 为任务添加就地编辑。
4. 添加后端API+数据库。
5. 添加真正的Playwright测试文件和CI。