novalon/gym-manage
6
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

完善e2e测试与后端测试，微信小程序端UI层测试暂未完成

Browse Source
This commit was merged in pull request #52.
This commit is contained in:
liwentao
2026-07-23 20:16:31 +08:00
parent b689656faf
commit 86b7555943
37 changed files with 6819 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files
gym-manage-web/e2e/journeys/brand-management-workflow.spec.ts
+267
View File
@@ -0,0 +1,267 @@
import { test, expect } from '@playwright/test';
test.describe('品牌定制管理完整工作流', () => {
test.describe.configure({ mode: 'serial' });
const testBrandName = `测试品牌_${Date.now()}`;
const testSlogan = `测试口号_${Date.now()}`;
const testPrimaryColor = '#FF5722';
const testSecondaryColor = '#37474F';
test('品牌定制页面可正常加载', async ({ page }) => {
await test.step('导航到品牌定制页面', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1000);
});
await test.step('验证页面标题存在', async () => {
await expect(page.locator('h2')).toContainText('品牌定制', { timeout: 10000 });
});
await test.step('验证四个配置卡片渲染', async () => {
// Logo 设置卡片
await expect(page.locator('.brand-card').filter({ hasText: 'Logo 设置' })).toBeVisible({ timeout: 5000 });
// 背景图设置卡片
await expect(page.locator('.brand-card').filter({ hasText: '背景图设置' })).toBeVisible({ timeout: 5000 });
// 品牌配色卡片
await expect(page.locator('.brand-card').filter({ hasText: '品牌配色' })).toBeVisible({ timeout: 5000 });
// 品牌信息卡片
await expect(page.locator('.brand-card').filter({ hasText: '品牌信息' })).toBeVisible({ timeout: 5000 });
});
await test.step('验证实时预览区域存在', async () => {
await expect(page.locator('.brand-card').filter({ hasText: '实时预览' })).toBeVisible({ timeout: 5000 });
});
await test.step('验证 WebSocket 连接标签存在', async () => {
const wsTag = page.locator('.brand-page-header .el-tag');
await expect(wsTag).toBeVisible({ timeout: 5000 });
});
});
test('更新品牌信息', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('填写品牌名称', async () => {
const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
const nameInput = brandCard.locator('input').first();
await nameInput.clear();
await nameInput.fill(testBrandName);
});
await test.step('填写品牌口号', async () => {
const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
const sloganInput = brandCard.locator('input').nth(1);
await sloganInput.clear();
await sloganInput.fill(testSlogan);
});
await test.step('点击保存信息', async () => {
const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
await brandCard.locator('button:has-text("保存信息")').click();
});
await test.step('验证保存成功提示', async () => {
await expect(page.locator('.el-message--success').first()).toBeVisible({ timeout: 8000 });
});
await test.step('验证预览区域品牌名称更新', async () => {
await page.waitForTimeout(500);
const mockBrandName = page.locator('.mock-brand-name');
await expect(mockBrandName).toContainText(testBrandName, { timeout: 5000 });
});
});
test('更新品牌配色', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('修改主色调', async () => {
const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
// 主色调 HEX 输入框（.color-input 是 el-input 容器，需定位内部 <input>）
const primaryHexInput = colorCard.locator('.color-row').first().locator('input').first();
await primaryHexInput.clear();
await primaryHexInput.fill(testPrimaryColor);
// 触发 blur 验证
await primaryHexInput.blur();
});
await test.step('修改辅助色', async () => {
const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
const secondaryHexInput = colorCard.locator('.color-row').nth(1).locator('input').first();
await secondaryHexInput.clear();
await secondaryHexInput.fill(testSecondaryColor);
await secondaryHexInput.blur();
});
await test.step('保存配色', async () => {
const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
await colorCard.locator('button:has-text("保存配色")').click();
});
await test.step('验证保存成功', async () => {
await expect(page.locator('.el-message--success').first()).toBeVisible({ timeout: 8000 });
});
});
test('品牌配色 - 输入非法HEX值应校验', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('输入无效HEX值并尝试保存', async () => {
const colorCard = page.locator('.brand-card').filter({ hasText: '品牌配色' });
const primaryHexInput = colorCard.locator('.color-row').first().locator('input').first();
await primaryHexInput.clear();
await primaryHexInput.fill('not-a-color');
await primaryHexInput.blur();
await colorCard.locator('button:has-text("保存配色")').click();
});
await test.step('验证校验警告提示', async () => {
await expect(page.locator('.el-message--warning').first()).toBeVisible({ timeout: 5000 });
});
});
test('品牌信息 - 空名称校验', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('清空品牌名称并保存', async () => {
const brandCard = page.locator('.brand-card').filter({ hasText: '品牌信息' });
const nameInput = brandCard.locator('input').first();
await nameInput.clear();
await brandCard.locator('button:has-text("保存信息")').click();
});
await test.step('验证警告提示', async () => {
await expect(page.locator('.el-message--warning').first()).toBeVisible({ timeout: 5000 });
});
});
test('Logo 区域 - 上传组件正常渲染', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('验证 Logo 上传区域存在', async () => {
const logoCard = page.locator('.brand-card').filter({ hasText: 'Logo 设置' });
await expect(logoCard.locator('.el-upload')).toBeVisible({ timeout: 5000 });
});
});
test('背景图区域 - 上传组件正常渲染', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('验证背景图上传区域存在', async () => {
const bgCard = page.locator('.brand-card').filter({ hasText: '背景图设置' });
await expect(bgCard.locator('.el-upload')).toBeVisible({ timeout: 5000 });
});
});
test('实时预览 - 底部导航切换', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('验证默认首页可见', async () => {
await expect(page.locator('.mock-brand-section')).toBeVisible({ timeout: 5000 });
await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
});
await test.step('切换到课程tab', async () => {
await page.locator('.mock-tab-item').nth(1).click();
await page.waitForTimeout(300);
await expect(page.locator('.mock-search-area')).toBeVisible({ timeout: 5000 });
});
await test.step('切换到我的课程tab', async () => {
await page.locator('.mock-tab-item').nth(2).click();
await page.waitForTimeout(300);
await expect(page.locator('.mock-booking-card').first()).toBeVisible({ timeout: 5000 });
});
await test.step('切换到我的tab', async () => {
await page.locator('.mock-tab-item').nth(3).click();
await page.waitForTimeout(300);
await expect(page.locator('.mock-profile-card')).toBeVisible({ timeout: 5000 });
});
await test.step('切换回首页', async () => {
await page.locator('.mock-tab-item').first().click();
await page.waitForTimeout(300);
await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
});
});
test('实时预览 - 课程详情钻取与返回', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('点击今日推荐课程', async () => {
await page.locator('.mock-course-card').first().click();
await page.waitForTimeout(300);
});
await test.step('验证课程详情页渲染', async () => {
await expect(page.locator('.mock-detail-header')).toBeVisible({ timeout: 5000 });
await expect(page.locator('.mock-detail-title')).toBeVisible({ timeout: 5000 });
});
await test.step('验证详情信息卡片', async () => {
await expect(page.locator('.mock-detail-info')).toBeVisible({ timeout: 5000 });
});
await test.step('点击返回按钮', async () => {
await page.locator('.mock-back-btn').click();
await page.waitForTimeout(300);
});
await test.step('验证返回首页', async () => {
await expect(page.locator('.mock-greeting-card')).toBeVisible({ timeout: 5000 });
});
});
test('实时预览 - 今日推荐查看更多进入搜索', async ({ page }) => {
await test.step('导航到品牌定制', async () => {
await page.goto('/brand');
await page.waitForLoadState('domcontentloaded');
await page.waitForTimeout(1500);
});
await test.step('点击查看全部', async () => {
await page.locator('.mock-section-more').click();
await page.waitForTimeout(300);
});
await test.step('验证进入课程搜索页', async () => {
await expect(page.locator('.mock-search-area')).toBeVisible({ timeout: 5000 });
await expect(page.locator('.mock-search-list')).toBeVisible({ timeout: 5000 });
});
});
});