264 lines
9.5 KiB
TypeScript
264 lines
9.5 KiB
TypeScript
import { test, expect, describe } from "@playwright/test";
|
||
import { LoginPage } from "../pages/login.page";
|
||
import { DashboardPage } from "../pages/dashboard.page";
|
||
|
||
const TEST_USER = {
|
||
email: "admin@example.com",
|
||
password: "admin@123",
|
||
};
|
||
|
||
describe("健康状态Dashboard - 页面渲染测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("Dashboard页面标题正确显示为品牌健康中心", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await expect(dashboardPage.pageTitle).toBeVisible();
|
||
await expect(dashboardPage.pageTitle).toHaveText("品牌健康中心");
|
||
});
|
||
|
||
test("页面副标题正确显示", async ({ page }) => {
|
||
await expect(
|
||
page.getByText("实时监控品牌在AI认知中的健康状态"),
|
||
).toBeVisible();
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 概览卡片测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("4个概览卡片全部显示", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
await expect(dashboardPage.healthScoreCard).toBeVisible();
|
||
await expect(dashboardPage.competitorStatusCard).toBeVisible();
|
||
await expect(dashboardPage.trendCard).toBeVisible();
|
||
await expect(dashboardPage.monitorPlatformCard).toBeVisible();
|
||
});
|
||
|
||
test("综合评分卡片显示评分和健康等级", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查是否有大数字评分（可能是0表示新用户）
|
||
const score = await dashboardPage.getOverallScore();
|
||
expect(score).not.toBeNull();
|
||
|
||
// 评分数值应该在0-100之间，或者是0（新用户状态）
|
||
const scoreNum = parseInt(score || "0", 10);
|
||
expect(scoreNum).toBeGreaterThanOrEqual(0);
|
||
expect(scoreNum).toBeLessThanOrEqual(100);
|
||
|
||
// 检查健康等级标签（优秀/良好/及格/危险之一）
|
||
const healthLevel = await dashboardPage.getHealthLevel();
|
||
await expect(healthLevel).toBeVisible();
|
||
});
|
||
|
||
test("竞品地位卡片显示领先或落后信息", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查竞品地位卡片可见
|
||
await expect(dashboardPage.competitorStatusCard).toBeVisible();
|
||
});
|
||
|
||
test("趋势卡片显示变化百分比", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
await expect(dashboardPage.trendCard).toBeVisible();
|
||
});
|
||
|
||
test("监控平台卡片显示平台数量", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
await expect(dashboardPage.monitorPlatformCard).toBeVisible();
|
||
// 检查是否有 X/7 格式的文本
|
||
await expect(page.locator("text=/\\d+\\/7/")).toBeVisible();
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 平台评分列表测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("平台评分列表标题正确显示", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
await expect(dashboardPage.platformScoreList).toBeVisible();
|
||
});
|
||
|
||
test("平台评分列表包含平台名称", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 至少应该显示一个平台
|
||
const platformCount = await dashboardPage.getPlatformScoreCount();
|
||
expect(platformCount).toBeGreaterThan(0);
|
||
});
|
||
|
||
test("平台评分显示分数和进度条", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查进度条存在
|
||
const progressBars = page.locator(
|
||
".overflow-hidden.rounded-full.bg-gray-100",
|
||
);
|
||
await expect(progressBars.first()).toBeVisible();
|
||
});
|
||
|
||
test("平台评分显示竞品对比信息", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查是否有领先或落后标记
|
||
const competitorIndicators = page.locator("text=/领先|落后|持平/");
|
||
await expect(competitorIndicators.first()).toBeVisible();
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 行动建议测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("行动建议区域标题正确显示", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
await expect(dashboardPage.actionSuggestions).toBeVisible();
|
||
});
|
||
|
||
test("行动建议包含主要/次要/可选标签", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查优先级标签
|
||
const priorityLabels = page.locator("text=/主要|次要|可选/");
|
||
await expect(priorityLabels.first()).toBeVisible();
|
||
});
|
||
|
||
test("行动建议包含跳转链接", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查查看按钮存在
|
||
const viewButtons = page.locator("button:has-text('查看')");
|
||
await expect(viewButtons.first()).toBeVisible();
|
||
});
|
||
|
||
test("点击行动建议跳转链接", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 查找第一个查看按钮并点击
|
||
const viewButton = page.locator("button:has-text('查看')").first();
|
||
if (await viewButton.isVisible()) {
|
||
await viewButton.click();
|
||
// 验证URL变化或新页面打开
|
||
// 由于行动建议链接可能是 /compare, /dashboard/queries, /dashboard/settings 等
|
||
// 我们可以验证按钮可点击即可
|
||
}
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 骨架屏测试", () => {
|
||
test("加载时显示骨架屏", async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 颜色传达状态测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("绿色表示好的状态（优秀等级）", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查绿色元素（emerald）是否存在
|
||
const greenElements = page.locator("[class*='emerald']");
|
||
// 至少应该有一些绿色元素在页面上
|
||
// 这取决于实际评分数据
|
||
});
|
||
|
||
test("红色表示差的状态（危险等级平台）", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查红色元素（red）
|
||
const redElements = page.locator("[class*='red-']");
|
||
// 如果有危险平台，应该有红色高亮
|
||
});
|
||
|
||
test("趋势箭头颜色正确（绿涨红跌）", async ({ page }) => {
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 检查是否有趋势指示器
|
||
const trendIndicators = page.locator(
|
||
"[class*='text-emerald-600'], [class*='text-red-600']",
|
||
);
|
||
// 如果有趋势变化，应该有对应颜色
|
||
});
|
||
});
|
||
|
||
describe("健康状态Dashboard - 响应式设计测试", () => {
|
||
test.beforeEach(async ({ page }) => {
|
||
const loginPage = new LoginPage(page);
|
||
await loginPage.goto();
|
||
await loginPage.login(TEST_USER.email, TEST_USER.password);
|
||
await page.waitForURL(/\/dashboard/, { timeout: 30000 });
|
||
});
|
||
|
||
test("移动端视口下概览卡片堆叠显示", async ({ page }) => {
|
||
// 设置移动端视口
|
||
await page.setViewportSize({ width: 375, height: 667 });
|
||
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 在移动端，grid应该变成单列或双列
|
||
await expect(dashboardPage.healthScoreCard).toBeVisible();
|
||
});
|
||
|
||
test("桌面端视口下概览卡片4列显示", async ({ page }) => {
|
||
// 设置桌面端视口
|
||
await page.setViewportSize({ width: 1280, height: 720 });
|
||
|
||
const dashboardPage = new DashboardPage(page);
|
||
await dashboardPage.waitForHealthCards();
|
||
|
||
// 在桌面端，所有4个卡片应该可见
|
||
await expect(dashboardPage.healthScoreCard).toBeVisible();
|
||
await expect(dashboardPage.competitorStatusCard).toBeVisible();
|
||
await expect(dashboardPage.trendCard).toBeVisible();
|
||
await expect(dashboardPage.monitorPlatformCard).toBeVisible();
|
||
});
|
||
});
|