268 lines
11 KiB
TypeScript
268 lines
11 KiB
TypeScript
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 });
|
||
});
|
||
});
|
||
});
|