08ea5fbe98
添加用户管理视图、API和状态管理文件
208 lines
6.2 KiB
TypeScript
208 lines
6.2 KiB
TypeScript
import { test, expect } from '@playwright/test';
|
|
import { APIHelper } from '../helpers/api-helper';
|
|
import { FormHelper } from '../helpers/form-helper';
|
|
import { TableHelper } from '../helpers/table-helper';
|
|
import { ScreenshotHelper } from '../helpers/screenshot-helper';
|
|
|
|
test.describe('测试辅助工具验证', () => {
|
|
test('API辅助工具初始化验证', async ({ request }) => {
|
|
const apiHelper = new APIHelper(request, 'https://api.example.com');
|
|
|
|
expect(apiHelper).toBeDefined();
|
|
|
|
apiHelper.setToken('test-token', 'Bearer');
|
|
|
|
expect(() => apiHelper.get('/test')).rejects.toThrow();
|
|
});
|
|
|
|
test('表单辅助工具初始化验证', async ({ page }) => {
|
|
await page.setContent(`
|
|
<form id="test-form">
|
|
<input type="text" name="username" required>
|
|
<input type="email" name="email" required>
|
|
<input type="password" name="password" required>
|
|
<select name="gender">
|
|
<option value="male">男</option>
|
|
<option value="female">女</option>
|
|
</select>
|
|
<input type="checkbox" name="agree" required>
|
|
<button type="submit">提交</button>
|
|
</form>
|
|
`);
|
|
|
|
const formHelper = new FormHelper(page, 'form#test-form');
|
|
|
|
formHelper.setFields([
|
|
{ name: 'username', selector: 'input[name="username"]', type: 'text', required: true },
|
|
{ name: 'email', selector: 'input[name="email"]', type: 'email', required: true },
|
|
{ name: 'password', selector: 'input[name="password"]', type: 'password', required: true },
|
|
{ name: 'gender', selector: 'select[name="gender"]', type: 'select', required: true },
|
|
{ name: 'agree', selector: 'input[name="agree"]', type: 'checkbox', required: true }
|
|
]);
|
|
|
|
await formHelper.waitForFormReady();
|
|
|
|
await formHelper.fillForm({
|
|
username: 'testuser',
|
|
email: 'test@example.com',
|
|
password: 'password123',
|
|
gender: 'male',
|
|
agree: true
|
|
});
|
|
|
|
const formData = await formHelper.getFormData();
|
|
expect(formData.username).toBe('testuser');
|
|
expect(formData.email).toBe('test@example.com');
|
|
});
|
|
|
|
test('表格辅助工具初始化验证', async ({ page }) => {
|
|
await page.setContent(`
|
|
<table id="test-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
<th>Email</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>张三</td>
|
|
<td>zhangsan@example.com</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>李四</td>
|
|
<td>lisi@example.com</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`);
|
|
|
|
const tableHelper = new TableHelper(page, 'table#test-table');
|
|
|
|
tableHelper.setColumns([
|
|
{ name: 'id', selector: 'td:nth-child(1)', type: 'number' },
|
|
{ name: 'name', selector: 'td:nth-child(2)', type: 'text' },
|
|
{ name: 'email', selector: 'td:nth-child(3)', type: 'text' }
|
|
]);
|
|
|
|
await tableHelper.waitForData();
|
|
|
|
const rowCount = await tableHelper.getRowCount();
|
|
expect(rowCount).toBe(2);
|
|
|
|
const row = await tableHelper.findRowByColumn('name', '张三');
|
|
expect(row).toBeDefined();
|
|
expect(row?.data.name).toBe('张三');
|
|
});
|
|
|
|
test('截图辅助工具初始化验证', async ({ page }) => {
|
|
await page.setContent(`
|
|
<html>
|
|
<body>
|
|
<h1>测试页面</h1>
|
|
<p>这是一个测试页面</p>
|
|
</body>
|
|
</html>
|
|
`);
|
|
|
|
const screenshotHelper = new ScreenshotHelper(page);
|
|
|
|
const screenshotPath = await screenshotHelper.captureViewport();
|
|
|
|
expect(screenshotPath).toBeDefined();
|
|
expect(screenshotPath.endsWith('.png')).toBe(true);
|
|
|
|
const count = screenshotHelper.getScreenshotCount();
|
|
expect(count).toBe(1);
|
|
});
|
|
|
|
test('表单验证功能验证', async ({ page }) => {
|
|
await page.setContent(`
|
|
<form id="validation-form">
|
|
<input type="text" name="username" required>
|
|
<input type="email" name="email" required>
|
|
<button type="submit">提交</button>
|
|
</form>
|
|
`);
|
|
|
|
const formHelper = new FormHelper(page, 'form#validation-form');
|
|
|
|
formHelper.setFields([
|
|
{ name: 'username', selector: 'input[name="username"]', type: 'text', required: true },
|
|
{ name: 'email', selector: 'input[name="email"]', type: 'email', required: true }
|
|
]);
|
|
|
|
await formHelper.fillForm({
|
|
username: 'testuser',
|
|
email: 'invalid-email'
|
|
});
|
|
|
|
const validations = await formHelper.validate();
|
|
|
|
const emailValidation = validations.find(v => v.field === 'email');
|
|
expect(emailValidation?.valid).toBe(false);
|
|
expect(emailValidation?.message).toBe('Invalid email format');
|
|
});
|
|
|
|
test('表格查找功能验证', async ({ page }) => {
|
|
await page.setContent(`
|
|
<table id="search-table">
|
|
<thead>
|
|
<tr>
|
|
<th>ID</th>
|
|
<th>Name</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody>
|
|
<tr>
|
|
<td>1</td>
|
|
<td>用户1</td>
|
|
</tr>
|
|
<tr>
|
|
<td>2</td>
|
|
<td>用户2</td>
|
|
</tr>
|
|
<tr>
|
|
<td>3</td>
|
|
<td>用户1</td>
|
|
</tr>
|
|
</tbody>
|
|
</table>
|
|
`);
|
|
|
|
const tableHelper = new TableHelper(page, 'table#search-table');
|
|
|
|
tableHelper.setColumns([
|
|
{ name: 'id', selector: 'td:nth-child(1)', type: 'number' },
|
|
{ name: 'name', selector: 'td:nth-child(2)', type: 'text' }
|
|
]);
|
|
|
|
await tableHelper.waitForData();
|
|
|
|
const rows = await tableHelper.findRowsByColumn('name', '用户1');
|
|
expect(rows.length).toBe(2);
|
|
});
|
|
|
|
test('截图管理功能验证', async ({ page }) => {
|
|
await page.setContent('<html><body><h1>测试</h1></body></html>');
|
|
|
|
const screenshotHelper = new ScreenshotHelper(page);
|
|
|
|
await screenshotHelper.capture({ filename: 'test1' });
|
|
await screenshotHelper.capture({ filename: 'test2' });
|
|
await screenshotHelper.capture({ filename: 'test3' });
|
|
|
|
const count = screenshotHelper.getScreenshotCount();
|
|
expect(count).toBe(3);
|
|
|
|
const screenshots = screenshotHelper.getAllScreenshots();
|
|
expect(screenshots.length).toBe(3);
|
|
|
|
screenshotHelper.clearScreenshots();
|
|
expect(screenshotHelper.getScreenshotCount()).toBe(0);
|
|
});
|
|
});
|