自动化测试框架

一个使用Playwright和JavaScript的自动化测试框架,采用页面对象模型模式,适用于Web应用的端到端测试。

  • by DasunJayashan
  • JavaScript
  • 本地部署
  • 更新于
在 GitHub 查看 DasunJayashan/Playwright-MCP

使用说明

剧作家自动化-页面对象模型(JavaScript)

一个使用Playwright、JavaScript和页面对象模型模式的全面自动化测试框架。

项目结构

├── pages/                      # Page Object classes
│   ├── BasePage.js            # Base class with common actions
│   ├── LoginPage.js           # Login page object
│   └── HomePage.js            # Home page object
├── tests/                      # Test specifications
│   └── example.spec.js        # Example test cases
├── utils/                      # Utility classes
│   ├── BrowserHelper.js       # Browser-related utilities
│   └── TestDataHelper.js      # Test data management
├── config/                     # Configuration files
├── playwright.config.js        # Playwright configuration
└── package.json               # Project dependencies

安装说明

先决条件

  • 已安装Node.js 16+
  • npm或yarn包管理器

安装

  1. 安装依赖项:
npm install
  1. 安装Playwright浏览器:
npx playwright install

运行测试

运行所有测试:

npm test

在头部模式下运行测试(请参阅浏览器):

npm run test:headed

在UI模式下运行测试(交互式):

npm run test:ui

调试测试:

npm run test:debug

通过Codegen生成测试代码:

npm run codegen

查看测试报告:

npm run report

页面对象模式

基页类

这 BasePage 类提供了在所有页面对象中使用的通用方法:

  • 导航(goto, getCurrentUrl)
  • 元素交互(click, fillText, getText)
  • 元素可见性检查(isVisible, waitForElement)
  • 表单交互(selectDropdown, pressKey)
  • 实用方法(takeScreenshot, waitForNavigation)

页面对象

每个页面对象都扩展 BasePage 并封装:

  • 页面特定选择器
  • 页面特定操作
  • 导航逻辑

示例:登录页面

const BasePage = require('./BasePage');

class LoginPage extends BasePage {
  constructor(page) {
    super(page);
    this.usernameInput = '#username';
    this.passwordInput = '#password';
    this.loginButton = 'button[type="submit"]';
  }

  async login(username, password) {
    await this.fillText(this.usernameInput, username);
    await this.fillText(this.passwordInput, password);
    await this.click(this.loginButton);
  }
}

module.exports = LoginPage;

写作测试

测试使用页面对象进行交互:

test('should login successfully', async ({ page }) => {
  const loginPage = new LoginPage(page);
  await loginPage.goto();
  await loginPage.login('username', 'password');
  expect(page.url()).toContain('dashboard');
});

测试数据

使用 TestDataHelper 对于测试数据管理:

const TestDataHelper = require('../utils/TestDataHelper');

const credentials = TestDataHelper.VALID_CREDENTIALS;
const randomEmail = TestDataHelper.generateRandomEmail();
const randomString = TestDataHelper.generateRandomString(15);
const randomNumber = TestDataHelper.generateRandomNumber(1, 100);
const timestamp = TestDataHelper.getCurrentTimestamp();
const formattedDate = TestDataHelper.getFormattedDate();

浏览器实用程序

使用 BrowserHelper 对于浏览器级操作:

const BrowserHelper = require('../utils/BrowserHelper');

await BrowserHelper.clearCookies(page);
await BrowserHelper.setCookie(page, 'name', 'value');
const cookies = await BrowserHelper.getCookies(page);

await BrowserHelper.setLocalStorage(page, 'key', 'value');
const value = await BrowserHelper.getLocalStorage(page, 'key');
await BrowserHelper.clearLocalStorage(page);

配置

剧作家配置(playwright.config.js)

  • 多种浏览器(Chromium、Firefox、WebKit)
  • 移动设备测试
  • 故障截图
  • 故障录像
  • HTML测试报告
  • 并行执行
  • CI检索

TypeScript配置(tsconfig.json)

  • 便于导入的路径别名
    • @pages/* → pages/*
    • @tests/* → tests/*
    • @utils/* → utils/*

最佳实践

  1. 单一责任 -每个页面对象处理一个页面
  2. 描述性选择器 -使用有意义的选择器名称
  3. 动作方法 -为用户操作创建方法
  4. 测试中的断言 -将断言保留在测试文件中,而不是页面对象中
  5. 可重复使用的方法 -使用BasePage方法避免重复
  6. 同步 -使用 waitForElement 和 waitForNavigation 适当地

故障排除

模块未找到错误: 跑 npm install 安装所有依赖项

未找到浏览器: 跑 npx playwright install

端口已在使用中: 更改端口 playwright.config.js

资源

CI/CD管道

该项目包括使用GitHub Actions进行自动化测试:

  • 剧作家测试:跨Node.js 18/20和Chromium/Firefox/WebKit运行
  • SauceDemo测试:SauceDemo测试套件的专用工作流程
  • 自动报告:HTML报告和工件上传
  • 每日计划测试:在UTC凌晨2点自动运行

看 CI_CD_SETUP.md 获取完整的管道文件。