使用说明
剧作家自动化-页面对象模型(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包管理器
安装
- 安装依赖项:
npm install
- 安装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/*
最佳实践
- 单一责任 -每个页面对象处理一个页面
- 描述性选择器 -使用有意义的选择器名称
- 动作方法 -为用户操作创建方法
- 测试中的断言 -将断言保留在测试文件中,而不是页面对象中
- 可重复使用的方法 -使用BasePage方法避免重复
- 同步 -使用
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 获取完整的管道文件。