Playwright MCP Server Cypress Demo

自动化练习赛普拉斯框架

一个全面的Cypress自动化框架，用于测试automation Exercise网站，使用TypeScript构建，遵循页面对象模型（POM）设计模式。

🚀 技术栈

• 柏树：端到端测试框架
• TypeScript：类型安全的JavaScript
• 页面对象模型：更好的测试维护设计模式
• GitHub操作：CI/CD管道

📁 项目结构

automation-exercise-cypress/
├── cypress/
│   ├── e2e/                    # Test files
│   │   ├── register-user.cy.ts # Register new user test
│   │   └── login-user.cy.ts    # Login with existing user test
│   ├── fixtures/               # Test data
│   │   ├── testData.json       # Reusable test data
│   │   └── cypress.env.json    # Credentials and secrets
│   └── support/
│       ├── pages/              # Page Object Model classes
│       │   ├── HomePage.ts
│       │   ├── LoginPage.ts
│       │   └── SignupPage.ts
│       ├── commands.ts         # Custom Cypress commands
│       └── e2e.ts             # Support file
├── .github/
│   └── workflows/
│       └── cypress-tests.yml   # GitHub Actions workflow
├── cypress.config.ts           # Cypress configuration
├── package.json               # Project dependencies
├── tsconfig.json             # TypeScript configuration
├── .gitignore                # Git ignore rules
└── README.md                 # Project documentation

🛠️ 安装

1. 克隆存储库

   git clone 
   cd automation-exercise-cypress

1. 安装依赖项

   npm install

1. 设置环境变量

- 复制 cypress/fixtures/cypress.env.json 并更新您的凭据 - 确保文件在 .gitignore 确保凭据安全

🧪 运行测试

开放式赛普拉斯测试跑道

npm run cypress:open

在无头模式下运行测试

npm run cypress:run

使用Headed Browser运行测试

npm run test:headed

📋 测试场景

场景1：注册新用户

1. 导航到主页
2. 验证主页是否显示
3. 点击“注册/登录”
4. 验证“新用户注册！'可见
5. 输入姓名和电子邮件
6. 点击“注册”
7. 验证“输入帐户信息”是否可见
8. 填写帐户详细信息并创建帐户
9. 验证帐户创建成功
10. 验证用户是否已登录

场景2：使用现有用户登录

1. 导航到主页
2. 验证主页是否可见
3. 点击“注册/登录”
4. 验证“登录到您的帐户”是否可见
5. 输入有效凭据
6. 点击“登录”
7. 验证是否显示“以用户名登录”

🔧 配置

Cypress配置

• 基本URL: https://www.automationexercise.com
• 视口：1280x720
• 默认超时：10秒
• 视频录制：已禁用
• 截图：故障时启用

自定义任务

该框架包括用于详细日志记录的自定义Cypress任务：

• logAction：记录用户操作
• logAssertion：记录测试断言
• log：常规日志记录

🚀 CI/CD管道

该项目包括一个GitHub Actions工作流，该工作流：

• 在向主分支推送时运行
• 安装依赖项
• 在无头模式下运行Cypress测试
• 将屏幕截图和视频作为工件上传
• 使用Ubuntu最新版本和Node.js 18

📊 测试数据管理

夹具

• testData.json：包含可重用的测试数据，包括用户详细信息和预期消息
• cypress.env.json：存储敏感信息，如凭据

环境变量

• validEmail：现有用户登录的电子邮件
• validPassword：现有用户登录密码

🎯 页面对象模型

该框架遵循页面对象模型模式，为以下对象提供单独的类：

• 首页：主页交互
• 登录页面：登录和注册表单交互
• 注册页面：帐户创建表单交互

🔍 自定义命令

• waitForPageLoad()：等待页面完全加载
• clearBrowserData()：清除Cookie、本地存储和会话存储
• takeScreenshot(name)：拍摄带有时间戳的屏幕截图

📝 日志记录

该框架为以下内容提供了详细的控制台日志记录：

• 所有用户操作
• 测试断言
• 测试执行流程
• 错误场景

🛡️ 安全

• 凭据存储在 cypress.env.json （git除外）
• 敏感数据未记录到控制台
• 环境变量用于动态数据

🤝 贡献

1. 分叉存储库
2. 创建要素分支
3. 进行更改
4. 添加新功能的测试
5. 确保所有测试通过
6. 提交拉取请求

📄 许可证

该项目根据MIT许可证获得许可。

🆘 支持

对于问题和疑问：

1. 检查现有的测试用例
2. 查阅Cypress文档
3. 在存储库中创建问题

______________________________________________________________________

备注：此框架是使用Playwright MCP Server生成的，并转换为支持TypeScript的Cypress。