更新说明文档
大石头 authored at 2022-04-16 15:30:05
3.07 KiB
YuQue
import { test, expect } from '@playwright/test';
import { collectErrors, expectNoErrors } from './helpers';

/** 首页走查:巨幕/核心产品/分类网格/最新文章/统计/移动菜单 */
const isDesktop = (w: number) => w > 900;

test.describe('首页', () => {
  test.beforeEach(async () => { await new Promise((r) => setTimeout(r, 300)); });

  test('加载 200 且无前端错误', async ({ page }) => {
    const errors = collectErrors(page);
    const resp = await page.goto('/');
    expect(resp!.status(), `首页返回 ${resp!.status()}`).toBe(200);
    await page.waitForTimeout(500);
    expectNoErrors(errors);
  });

  test('巨幕横幅:标题/副标题/CTA/6 统计项', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('.hero')).toBeVisible();
    await expect(page.locator('.hero h1')).not.toBeEmpty();
    const cta = page.locator('.hero .cta a');
    expect(await cta.count()).toBeGreaterThanOrEqual(1);
    await expect(page.locator('.hero-stats .stat')).toHaveCount(6);
  });

  test('核心产品区(推荐树)渲染卡片', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('.project-grid')).toBeVisible();
    await expect(page.locator('.project-card').first()).toBeVisible();
    // 卡片必须带有效链接(指向产品页/分类,非 #)
    const hrefs = await page.locator('.project-card').evaluateAll((as) =>
      as.map((a) => a.getAttribute('href')).filter((h) => !h || h === '#'),
    );
    expect(hrefs, `核心产品卡存在空/无效链接:${hrefs}`).toEqual([]);
  });

  test('分类网格渲染 7 个分类卡片', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('.book-grid')).toBeVisible();
    await expect(page.locator('.book-grid .book-card').first()).toBeVisible();
    expect(await page.locator('.book-grid .book-card').count()).toBeGreaterThanOrEqual(7);
  });

  test('最新文章区块渲染', async ({ page }) => {
    await page.goto('/');
    await expect(page.locator('.latest-list')).toBeVisible();
    await expect(page.locator('.latest-item').first()).toBeVisible();
    // 每篇链接有效
    const bad = await page.locator('.latest-item').evaluateAll((as) =>
      as.map((a) => a.getAttribute('href')).filter((h) => !h || h === '#'),
    );
    expect(bad).toEqual([]);
  });

  test('移动菜单:汉堡展开/含链接', async ({ page }) => {
    const w = page.viewportSize()!.width;
    if (isDesktop(w)) {
      // 桌面不应有可见汉堡
      await page.goto('/');
      await expect(page.locator('.nav-toggle')).toBeHidden();
      return;
    }
    await page.goto('/');
    const toggle = page.locator('.nav-toggle');
    await expect(toggle).toBeVisible();
    await toggle.click();
    await expect(page.locator('.main-nav')).toHaveClass(/open/);
    // 展开后能点到导航链接(验证菜单真实可导航)
    const links = page.locator('.main-nav a:visible');
    expect(await links.count()).toBeGreaterThanOrEqual(1);
    await toggle.click(); // 再点收起
    await expect(page.locator('.main-nav')).not.toHaveClass(/open/);
  });
});