设置
步骤
- 安装剧作家：
- 按照\[Visual Studio代码安装（macOS）\]中的说明进行操作
npm init playwright@latest- 检查安装是否正确：
npx playwright --helpnpx剧作家测试 npx剧作家节目报道 npx剧作家测试
命名约定——最佳实践
16.2文件和代码命名约定
| 物品 | 公约 | 示例 |
|---|---|---|
| 文件夹/文件 | 烤肉串箱 | page-objects/, file-helper.ts |
| 页面和规范文件 | 点分隔 | nopcommerce.home.page.ts, nopcommerce.e2e.spec.ts |
| 类名称 | PascalCase（每个单词大写） | LoginPage, DashboardActions |
| 变量 | camelCase | loginButton, userNameInput |
| 常量 | UPPER_SNAKE_CASE | BASE_URL, API_TIMEOUT_MS |
______________________________________________________________________
🎯 一致的命名提高了可读性，减少了团队之间的混淆。
______________________________________________________________________
💡 其他提示
- 在整个项目中坚持一个惯例。
- 避免缩写，除非它们被普遍理解。
- 在每个名字中清楚地反映目的——例如。，
loginHelper.ts而不是lh.ts. - 保持名字简短但有意义。
______________________________________________________________________
文件夹结构设置
让我们创建以下文件夹结构：
PLAYWRIGHT-E2E-TESTS/
├── .github/ # CI Config folder
├── .vscode/ # Editor-specific settings
│ └── mcp.json # MCP server config for VS Code
├── config/ # Environment-specific config files
├── data/ # Static data and constants
│ └── constants.json # Common constants used in tests
├── debug/ # Optional: Debug-related outputs/logs
├── logs/ # Application/test logs
├── node_modules/ # Auto-generated dependencies
├── playwright-report/ # Playwright HTML test report output
├── resources/ # Misc test resources (e.g. images, files)
├── tests/ # All organized test files
│ ├── api/ # API test specs
│ ├── demo/ # Demo-related test specs
│ ├── devices/ # Device related scenarios
│ ├── e2e/ # End-to-end test specs
│ ├── functional/ # Functional test cases
│ ├── helpers/ # Utility functions for tests
│ ├── page-objects/ # Page Object Model files
├── tests-examples/ # Auto-generated sample test scenarios
├── .env.example # Template for environment files
├── .env # Template for environment files
├── .gitignore # Git ignored files and folders
├── package-lock.json # Dependency lock file
├── package.json # Project metadata and scripts
├── playwright.config.ts # Playwright configuration file
├── README.md # Project overview and instructions______________________________________________________________________
快速检查
- 在
playwright.config.ts文件，注释掉所有其他浏览器，仅确保chromium已启用。
- 运行以下命令以验证一切是否正常：
npx playwright test --headed如果测试成功执行，则一切就绪！
🎯 目标项目结构现已建立。让我们继续前进。.. 🚀
______________________________________________________________________
推荐的VS代码扩展
- vscode图标
- Pretier-代码格式化程序
- 路径智能感知
- npm智能感知
- Dotenv。
- JavaScript（ES6）代码片段
- .gitignore生成器
______________________________________________________________________
从VS代码扩展市场安装这些扩展，以实现更流畅、更高效的工作流程。