Playwright 示例项目教程

Playwright 示例项目教程

demo.playwrightThis repo is used to demo various testing scenarios with Playwright 🎭, using the official test-runner and scripts authored in TypeScript.项目地址:https://gitcode.com/gh_mirrors/de/demo.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

demo.playwrightThis repo is used to demo various testing scenarios with Playwright 🎭, using the official test-runner and scripts authored in TypeScript.项目地址:https://gitcode.com/gh_mirrors/de/demo.playwright