Fatih Kadir Akın

使用 HTML5、CSS3 和 JavaScript 构建一个正念冥想计时器。创建一个宁静、无干扰的界面，采用自然灵感的设计。实现可自定义的冥想会话，包含准备、冥想和休息间隔。添加环境音选项，包括自然声音、双耳节拍和白噪音。包含带有可自定义语音提示的引导冥想。实现带有音量控制和声音选择的间隔铃声。添加会话历史和统计跟踪。创建带有动画的视觉呼吸引导。作为 PWA 支持离线使用。包含深色模式和多种主题。添加带有提醒的会话安排。

使用Three.js和JavaScript构建一款沉浸式3D太空探索游戏。创建一个包含程序化生成的行星、恒星和星云的广阔宇宙。实现具有牛顿物理的真实航天器控制。添加具有地形生成和大气效果的详细行星表面。创建用于交易和任务的空间站和前哨站。实现资源收集和货物管理系统。添加具有独特行为和互动方式的外星物种。创建恒星系统之间的虫洞旅行效果。包含详细的飞船定制和升级系统。实现采矿和战斗机制以及武器效果。添加包含故事元素和目标的任务系统。

使用 HTML5、CSS3 和 JavaScript 构建一个全面的文本分析工具。创建一个简洁的界面，包含文本输入区域和结果仪表板。实现字数统计、字符统计和阅读时间估算。使用多种算法（Flesch-Kincaid、SMOG、Coleman-Liau）添加可读性评分。包含带可视化的关键词密度分析。实现带情感语调检测的情感分析。添加带建议的语法和拼写检查。包含用于相似度检测的文本比较功能。支持多语言并自动检测。添加分析报告的导出功能。实现文本格式化和清理工具。

使用Three.js和JavaScript开发一款第一人称射击游戏。创建具有逼真动画和效果的详细武器模型。实现精确的命中检测和伤害系统。设计多个具有不同环境和目标的游戏关卡。添加具有寻路和战斗行为的AI敌人。为枪口闪光、撞击和爆炸创建粒子效果。实现具有基于团队目标的多人模式。包含武器拾取和库存系统。添加武器、脚步声和环境音效。创建详细的计分和统计追踪。实现用于击杀回放和比赛精彩集锦的回放系统。

使用 HTML5、CSS3 和 JavaScript 按照时间管理技术创建一个功能全面的番茄钟计时器应用。设计一个优雅的界面，包含一个大型的动画圆形进度指示器，直观地展示当前会话。允许自定义工作间隔（默认 25min）、短休息（默认 5min）和长休息（默认 15min）。集成任务列表，让用户可以将番茄钟会话与特定任务关联。添加可配置的间隔切换声音通知，并支持音量控制。实现详细的统计跟踪，通过可视化图表展示每日/每周生产力。使用 localStorage 在会话之间持久化设置和历史记录。使应用可作为 PWA 安装，支持离线使用和通知。添加快捷键以便快速控制计时器（开始/暂停/重置）。包含多种主题选项，可自定义颜色和字体。添加专注模式，在工作间隔期间屏蔽干扰。

使用 HTML5、CSS3 和 JavaScript 创建一个交互式数独游戏。构建一个简洁、无障碍的游戏棋盘，并配备直观的控件。实现具有适当谜题生成算法的难度级别。添加具有多级辅助功能的提示系统。包含用于候选数字的笔记功能。实现带暂停和恢复功能的计时器。添加错误检查，并提供可选的即时反馈。包含具有多个存档槽的游戏保存和加载功能。创建针对胜利、用时和难度级别的统计跟踪。添加可打印的谜题生成功能。实现键盘控制和无障碍功能。

使用 Go 创建一个高性能 HTTP 基准测试工具。实现可配置线程数的并发请求生成。添加详细统计信息，包括延迟、吞吐量和错误率。包含对 HTTP/1.1、HTTP/2 和 HTTP/3 的支持。实现自定义请求头和 Cookie 管理。添加用于动态内容的请求模板化。包含使用正则表达式和状态码检查的响应验证。实现带证书验证选项的 TLS 配置。添加包含逐步增压和稳态阶段的负载配置。包含带百分位数和直方图的详细报告。实现用于高负载场景的分布式测试模式。

使用 HTML5、CSS3 和 JavaScript 开发一款功能丰富的国际象棋游戏。创建逼真的棋盘，并正确渲染棋子。实现标准国际象棋规则及走法验证。添加走法高亮和棋子移动动画。包含游戏计时器，支持多种时间控制选项。实现棋谱记录并支持 PGN 导出。添加对局分析及走法评估。包含可调节难度级别的 AI 对手。支持通过 WebRTC 或 WebSocket 进行在线对战。添加开局库和常见模式识别。实现包含对阵表和计分的锦标赛模式。

使用Three.js、HTML5、CSS3和JavaScript以及WebSocket实现实时网络，创建一个沉浸式多人飞机战斗游戏。实现详细的3D飞机模型，具有逼真的飞行动力学，包括俯仰、偏航、滚转和油门控制。添加平滑的相机控制，跟随玩家的飞机，并支持可配置视图（驾驶舱、追逐、环绕）。创建带有动态一天中时间和天气效果的天空盒环境。使用WebSocket实现多人功能，用于实时位置更新、战斗和游戏状态同步。添加武器系统，包括弹道物理、命中检测和伤害模型。包括引擎尾气、武器开火、爆炸和伤害的粒子效果。创建显示速度、高度、航向、雷达、生命值和武器状态的HUD。使用Web Audio API实现引擎、武器、爆炸和环境音效。添加比赛类型，包括死亡竞赛和团队战斗，并带有计分系统。包括可定制的飞机装备，具有不同的武器和能力。创建用于比赛创建和团队分配的大厅系统。实现客户端预测和延迟补偿，以获得流畅的多人体验。添加显示玩家位置和目标的小地图。包括用于比赛回放和精彩片段创建的回放系统。创建响应式控制，支持键盘/鼠标和游戏手柄输入。

使用Three.js和JavaScript创建一个激动人心的3D赛车游戏。实现逼真的车辆物理效果，包括悬挂、轮胎摩擦和空气动力学。创建详细的汽车模型，支持可自定义的喷漆和升级。设计多条赛道，包含多变的地形和障碍物。添加具有不同难度等级和竞速行为的AI对手。实现本地竞速的分屏多人模式。包含一个全面的HUD，显示速度、圈速、排名和小地图。为轮胎烟雾、引擎效果和天气创建粒子效果。添加具有逼真光照的动态昼夜循环。实现计时赛、锦标赛和淘汰赛等竞速模式。包含支持多摄像机角度的回放系统。

使用 HTML5、CSS3、JavaScript 和后端 API 构建一个 URL 短链接服务前端。创建一个简洁的界面，包含醒目的输入框。实现 URL 验证和清理。为短链接添加二维码生成功能。包含点击跟踪和分析仪表板。支持为 URL 创建自定义别名。实现链接的过期日期设置。为敏感 URL 添加密码保护选项。包含带确认的复制到剪贴板功能。为所有设备创建响应式设计。添加短链接历史记录，支持搜索和筛选。

使用 Go 构建高性能文件系统索引器和搜索工具。实现可配置深度的递归目录遍历。添加文件元数据提取，包括大小、日期和权限。包含内容索引，支持可选全文搜索。实现支持布尔运算符和通配符的高级查询语法。添加增量索引以提升性能。包含 JSON 和 CSV 格式的导出功能。实现搜索结果高亮。添加使用校验和的重复文件检测。包含性能统计和进度报告。实现并发处理以利用多核。

用 C 语言开发一个用于分析进程内存使用情况的内存分析工具。实现以最小性能影响附加到进程。添加带分配跟踪的堆分析。包含带堆栈跟踪的内存泄漏检测。实现带详细统计信息的内存使用可视化。添加自定义分配器挂钩以实现详细跟踪。包含多种格式的报告生成。实现用于降低噪声的过滤选项。添加快照之间的比较功能。包含带交互模式的命令行界面。实现信号处理以干净地分离。

使用 HTML5、CSS3 和 JavaScript 开发一个全面的预算跟踪应用程序。创建一个直观的仪表板，显示收入、支出、储蓄和预算状态。实现交易管理，支持分类、标签和定期交易。添加交互式图表和图形，用于按类别和时间段进行支出分析。包含预算目标设定，支持进度跟踪和提醒。支持多个账户以及账户之间的转账。使用设备摄像头实现收据扫描和存储。添加以 CSV and PDF 格式导出报告的功能。创建采用移动优先方法的响应式设计。包含数据备份和恢复功能。添加预测功能，根据当前趋势预测未来财务状况。

使用 HTML5、CSS3 和 JavaScript 构建一个面向开发者的代码片段管理器。创建一个简洁的类 IDE 界面，支持 30 多种编程语言的语法高亮。实现标签和分类系统以组织代码片段。添加强大的搜索功能，支持正则表达式以及按语言/标签筛选。包含带行号、缩进参考线和括号匹配的代码编辑功能。为每个代码片段支持公开/私有可见性设置。实现 JSON 和 Gist 格式的导出/导入功能。为常用操作添加键盘快捷键。创建在所有设备上都能良好运行的响应式设计。包含带版本历史的自动保存功能。添加保留语法格式的复制到剪贴板功能。

使用 HTML5、CSS3、JavaScript 和一个食物 API 创建一个食谱查找应用程序。构建一个视觉上吸引人的界面，包含食物摄影和直观的导航。实现高级搜索，支持按食材、菜系、饮食限制和准备时间进行筛选。添加用户评分和评论，采用星级系统。包含详细的营养信息，并用可视化指示器显示卡路里、宏量营养素和过敏原。支持食谱保存并分类到收藏集中。实现一个膳食计划日历，具有拖放功能。添加自动份量调整，并重新计算数量。包含烹饪模式，提供分步说明和计时器。支持离线访问已保存的食谱。为喜爱的食谱添加社交分享功能。

使用 HTML5、CSS3 和 JavaScript 开发一款记忆配对卡牌游戏。创建具有翻转动画的美观卡牌设计。实现具有不同网格尺寸和卡牌数量的难度级别。添加计时器和步数计数器用于计分。包含卡牌翻转和配对成功的音效。实现带有分数持久化的排行榜。添加具有不同卡牌设计的主题选择。包含用于竞技对战的多人模式。创建可适应屏幕尺寸的响应式布局。添加键盘导航的无障碍功能。实现游戏过程中的渐进式难度提升。

使用 HTML5、CSS3 和 JavaScript 为设计师和开发者构建一个专业级颜色工具。创建一个直观的界面，提供多种选择方式，包括吸管、色轮、滑块和输入字段。实现颜色格式（RGB、RGBA、HSL、HSLA、HEX、CMYK）之间的实时转换，并支持复制功能。添加调色板生成器，支持互补色、类似色、三角色、四角色和单色配色方案。包含收藏系统，支持命名集合和导出选项。实现色彩和谐规则可视化，并支持交互式调整。创建一个渐变生成器，支持线性、径向和锥形渐变，并可添加多个色标。添加无障碍检查器，用于 WCAG 合规性检查，包括对比度和色盲模拟。实现 CSS、SCSS 和 SVG 代码片段的一键复制。包含颜色命名算法，为所选颜色推荐名称。支持将调色板导出为多种格式（Adobe ASE、JSON、CSS 变量、SCSS）。

使用 HTML5、CSS3、JavaScript 和 Web Audio API 开发一个基于网页的音乐播放器。创建具有专辑封面显示和可视化的现代界面。实现支持拖拽重新排序的播放列表管理。添加音频控制功能，包括播放/暂停、跳过、跳转、音量和播放速度。包含随机播放和重复模式，并提供视觉指示。支持多种音频格式及回退方案。实现带预设的 10 段均衡器。添加从音频文件中提取和显示元数据的功能。创建适用于所有设备的响应式设计。包含用于播放控制的键盘快捷键。通过 Media Session API 集成支持后台播放。

---
name: web-application-testing-skill
description: 使用 Playwright 与本地 Web 应用交互并进行测试的工具包。
---

# Web 应用测试

此技能使用 Playwright 自动化实现对本地 Web 应用的全面测试和调试。

## 何时使用此技能

在您需要以下操作时使用此技能：
- 在真实浏览器中测试前端功能
- 验证 UI 行为和交互
- 调试 Web 应用问题
- 捕获截图用于文档或调试
- 检查浏览器控制台日志
- 验证表单提交和用户流程
- 检查跨视口的响应式设计

## 先决条件

- 系统上已安装 Node.js
- 本地运行的 Web 应用（或可访问的 URL）
- 如果未安装，Playwright 将自动安装

## 核心能力

### 1. 浏览器自动化
- 导航到 URL
- 点击按钮和链接
- 填写表单字段
- 选择下拉菜单
- 处理对话框和警报

### 2. 验证
- 断言元素存在
- 验证文本内容
- 检查元素可见性
- 验证 URL
- 测试响应式行为

### 3. 调试
- 捕获截图
- 查看控制台日志
- 检查网络请求
- 调试失败的测试

## 使用示例

### 示例 1：基本导航测试
```javascript
// 导航到页面并验证标题
await page.goto('http://localhost:3000');
const title = await page.title();
console.log('Page title:', title);
```

### 示例 2：表单交互
```javascript
// 填写并提交表单
await page.fill('#username', 'testuser');
await page.fill('#password', 'password123');
await page.click('button[type="submit"]');
await page.waitForURL('**/dashboard');
```

### 示例 3：截图捕获
```javascript
// 捕获截图用于调试
await page.screenshot({ path: 'debug.png', fullPage: true });
```

## 指南

1. **始终验证应用正在运行** - 在运行测试前检查本地服务器是否可访问
2. **使用显式等待** - 在交互前等待元素或导航完成
3. **失败时捕获截图** - 截图以帮助调试问题
4. **清理资源** - 完成后始终关闭浏览器
5. **优雅处理超时** - 为慢速操作设置合理的超时时间
6. **增量测试** - 从简单交互开始，再逐步进行复杂流程
7. **明智使用选择器** - 优先使用 data-testid 或基于角色的选择器，而非 CSS 类

## 常见模式

### 模式：等待元素
```javascript
await page.waitForSelector('#element-id', { state: 'visible' });
```

### 模式：检查元素是否存在
```javascript
const exists = await page.locator('#element-id').count() > 0;
```

### 模式：获取控制台日志
```javascript
page.on('console', msg => console.log('Browser log:', msg.text()));
```

### 模式：处理错误
```javascript
try {
  await page.click('#button');
} catch (error) {
  await page.screenshot({ path: 'error.png' });
  throw error;
}
```

## 限制

- 需要 Node.js 环境
- 无法测试原生移动应用（请改用 React Native Testing Library）
- 可能在复杂身份验证流程中存在问题
- 某些现代框架可能需要特定配置