Playwright 示例项目教程
1. 项目的目录结构及介绍
demo.playwright/
├── .github/
│ └── workflows/
│ └── test.yml
├── .vscode/
│ └── settings.json
├── src/
│ ├── accessibility/
│ ├── android/
│ ├── basic/
│ ├── chrome-extension/
│ ├── drag-and-drop/
│ └── utils/
├── .gitignore
├── .npmrc
├── .prettierrc
├── LICENSE
├── README.md
├── package-lock.json
├── package.json
└── tsconfig.json
- .github/workflows/test.yml: GitHub Actions 的工作流程配置文件,用于自动化测试。
- .vscode/settings.json: Visual Studio Code 的配置文件。
- src/: 包含各种测试场景的目录。
- accessibility/: 可访问性测试。
- android/: Android WebView 测试。
- basic/: 基本测试,包括元素选择器、断言、文件上传等。
- chrome-extension/: Chrome 扩展测试。
- drag-and-drop/: 拖放测试。
- utils/: 工具函数。
- .gitignore: Git 忽略文件配置。
- .npmrc: npm 配置文件。
- .prettierrc: Prettier 代码格式化配置。
- LICENSE: 项目许可证。
- README.md: 项目说明文档。
- package-lock.json: npm 依赖锁定文件。
- package.json: 项目依赖和脚本配置。
- tsconfig.json: TypeScript 配置文件。
2. 项目的启动文件介绍
项目的启动文件主要是 package.json
中的脚本配置。以下是一些常用的启动命令:
{
"scripts": {
"test": "playwright test",
"test:accessibility": "playwright test --config src/accessibility/playwright.config.ts",
"test:android": "playwright test --config src/android/playwright.config.ts",
"test:basic": "playwright test --config src/basic/playwright.config.ts",
"test:chrome-extension": "playwright test --config src/chrome-extension/playwright.config.ts",
"test:drag-and-drop": "playwright test --config src/drag-and-drop/playwright.config.ts"
}
}
- test: 运行所有测试。
- test:accessibility: 运行可访问性测试。
- test:android: 运行 Android WebView 测试。
- test:basic: 运行基本测试。
- test:chrome-extension: 运行 Chrome 扩展测试。
- test:drag-and-drop: 运行拖放测试。
3. 项目的配置文件介绍
- playwright.config.ts: Playwright 的配置文件,通常位于每个测试场景的目录中。以下是一个示例配置:
import { PlaywrightTestConfig } from '@playwright/test';
const config: PlaywrightTestConfig = {
testDir: './tests',
timeout: 30 * 1000,
expect: {
timeout: 5000
},
fullyParallel: true,
forbidOnly: !!process.env.CI,
retries: process.env.CI ? 2 : 0,
workers: process.env.CI ? 1 : undefined,
reporter: 'html',
use: {
actionTimeout: 0,
trace: 'on-first-retry',
},
};
export default config;
- tsconfig.json: TypeScript 的配置文件,用于编译 TypeScript 代码。以下是一个示例配置:
{
"compilerOptions": {
"target": "ES2019",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true,
"outDir": "./dist"
},
"include": [
"src/**/*.ts