AI导哈

Playwright自动化框架

基于TypeScript的企业级Playwright自动化框架，提供页面对象模型、组件组合、步骤装饰器和全局环境配置等功能，适用于Web应用测试自动化。

  • by ochako222
  • TypeScript
  • 本地部署
  • 更新于
在 GitHub 查看 ochako222/playwright-mcp-demo

使用说明

Ciklum剧作家演示

Enterprise Playwright+TypeScript自动化框架。将六年AQA实践编纂成最小框架：键入的页面对象、组件组合、夹具链、 @step 报告装饰器和快速故障全局环境层。

特性

  • 具有组件组合的页面对象模型 — AppPage, AppComponent，以及 BasePage 共享之上的抽象类 PageHolder.
  • @step 装饰器 --TypeScript stage-3装饰器将方法封装在 test.step({ box: true }) 因此HTML报告读起来像用户叙述。
  • 固定链 — baseFixture 提供 pages 和 globalEnv；每个功能装置(demoTest等）在不接触基座的情况下延伸它。
  • 键入全局环境 — envalid 验证 process.env 在 globalSetup 并通过序列化将结果传递给工人 process.env.globalEnv 钥匙。
  • Biome+赫斯基预提交门 --每次提交时使用lint和格式化，使用单个二进制工具（没有ESLint+Prettier zoo）。
  • 确定执行 — workers: 1, fullyParallel: false 默认情况下。再现性优先，只有在证明夹具隔离后才能提高平行度。

先决条件

  • Node.js 18+
  • npm
  • 谷歌Chrome浏览器（通过安装 npx playwright install chrome)
    • 在Arch Linux上，通过pacman安装Chromium并设置 PLAYWRIGHT_CHROMIUM_EXECUTABLE_PATH=/usr/bin/chromium （和下降 channel: "chrome" 从 playwright.config.ts 当地）。

快速开始

git clone https://github.com/ochako222/playwright-demo.git
cd playwright-demo
npm install
cp .env.example .env
npx playwright install chrome
npx playwright test

打开HTML报告：

npx playwright show-report

项目结构

.
├── configs/setup/          # Typed global env layer
│   ├── globalTypes.ts      # GlobalVariablesI interface
│   ├── globalHelpers.ts    # envalid validator
│   └── globalSetup.ts      # Playwright globalSetup entry
├── src/
│   ├── app/                # Page Object Model
│   │   ├── abstractClasses.ts  # PageHolder / BasePage / AppPage / AppComponent
│   │   ├── components/         # Reusable widgets (*.component.ts)
│   │   ├── home.page.ts        # Concrete pages (*.page.ts)
│   │   └── index.ts            # AppPages container
│   ├── fixtures/
│   │   ├── index.ts        # baseFixture (globalEnv + pages)
│   │   └── demoTest.ts     # Per-feature fixture
│   ├── misc/
│   │   └── step.ts         # @step decorator
│   └── tests/              # *.spec.ts
├── biome.json
├── playwright.config.ts
└── tsconfig.json

脚本

命令 目的
npm run lint 运行Biome lint+格式检查
npm run format 自动格式化代码库
npx playwright test 运行完整的套件
npx playwright test --ui 启动Playwright UI模式
npx playwright test --grep @regression 仅运行标记的测试 @regression
npx playwright test --debug 与剧作家检查员沟通
npx playwright show-report 打开最后一个HTML报告

环境变量

定义于 .env （复制自 .env.example):

变量 必需 值 目的
BASE_URL 是 任何URL 正在测试的应用程序
ENVIRONMENT 是的 dev qa

验证发生在 configs/setup/globalHelpers.ts --该套件拒绝在缺少或格式错误的值时启动。

编写测试

import { demoTest } from "src/fixtures/demoTest";

demoTest.describe("Cart", { tag: ["@cart", "@regression"] }, () => {
  demoTest("adds item to cart", async ({ pages, globalEnv }) => {
    await pages.homePage.goto(globalEnv.BASE_URL);
    await pages.homePage.expectLoaded();
    // ...
  });
});

仅消耗测试所需的夹具。操作在页面对象上，而不是在规范中。

添加页面

  1. 创建 src/app/newPage.page.ts 延伸 AppPage （或 BasePage).
  2. 实施 expectLoaded().
  3. 将定位器声明为 private 内联字段。
  4. 用以下方式装饰公共方法 @step("...") 为了提高报告的可见性。
  5. 在中注册页面 src/app/index.ts.

添加组件

  1. 创建 src/app/components/<name>.component.ts 延伸 AppComponent.
  2. 在所属页面内实例化它： public foo = new FooComponent(this.page, this.context);

命名规范

种类 惯例 示例
第页 *.page.ts home.page.ts
组件 *.component.ts demo.component.ts
测试规范 *.spec.ts demoTest.spec.ts
接口 PascalCase + I GlobalVariablesI

提交工作流

哈士奇跑 npx @biomejs/biome check --write 在每次承诺之前。修复Biome无法自动修复、重新暂存和再次提交的任何错误。

许可证

国际学生中心

相关 MCP