ai-learning-platform/frontend/e2e/navigation.spec.ts

import { test, expect } from '@playwright/test';

test.describe('导航与页脚', () => {
  test.describe('Header 导航', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/');
    });

    test('品牌名称可见', async ({ page }) => {
      await expect(page.getByText('宇之然').first()).toBeVisible();
    });

    test('主导航链接都可见', async ({ page }) => {
      const navLinks = ['首页', '专题', '沙盒', '模型', '提示词', '文章', 'AI 工具', '社区'];
      for (const link of navLinks) {
        const el = page.getByRole('link', { name: link, exact: true });
        const count = await el.count();
        if (count > 1) {
          await expect(el.first()).toBeVisible();
        } else if (count === 1) {
          await expect(el).toBeVisible();
        }
      }
    });

    test('搜索框可见', async ({ page }) => {
      const searchInput = page.locator('input[placeholder="搜索..."]');
      await expect(searchInput).toBeVisible();
    });

    test('主题切换按钮可见', async ({ page }) => {
      const themeToggle = page.locator('button').filter({ has: page.locator('svg') }).first();
      await expect(themeToggle).toBeVisible();
    });

    test('登录/注册按钮可见', async ({ page }) => {
      await expect(page.getByText('登录').first()).toBeVisible();
      await expect(page.getByText('注册').first()).toBeVisible();
    });

    test('点击导航链接可跳转', async ({ page }) => {
      const navMap = [
        { label: '专题', url: '/courses' },
        { label: '沙盒', url: '/sandbox' },
        { label: '模型', url: '/models' },
        { label: '提示词', url: '/prompts' },
        { label: 'AI 工具', url: '/tools' },
        { label: '社区', url: '/community' },
        { label: '文章', url: '/contents' },
      ];
      for (const { label, url } of navMap) {
        await page.getByRole('link', { name: label }).first().click();
        await expect(page).toHaveURL(new RegExp(url));
        await page.goBack();
      }
    });
  });

  test.describe('Footer 页脚', () => {
    test.beforeEach(async ({ page }) => {
      await page.goto('/');
    });

    test('品牌信息展示', async ({ page }) => {
      await expect(page.getByText('让每个人都能用好 AI').first()).toBeVisible();
      const footerHeading = page.locator('footer h3');
      await expect(footerHeading).toContainText('宇之然 AI');
    });

    test('导航链接', async ({ page }) => {
      await expect(page.getByText('专题').last()).toBeVisible();
      await expect(page.getByText('提示词库').last()).toBeVisible();
      await expect(page.getByText('AI 工具').last()).toBeVisible();
    });

    test('关于链接', async ({ page }) => {
      await expect(page.getByText('关于我们')).toBeVisible();
      await expect(page.getByText('隐私政策')).toBeVisible();
      await expect(page.getByText('服务协议').first()).toBeVisible();
      await expect(page.getByText('AI 服务协议')).toBeVisible();
    });

    test('联系方式', async ({ page }) => {
      await expect(page.getByText('contact@yuzhiran.com').first()).toBeVisible();
      const footerInfo = page.locator('footer li, footer p').filter({ hasText: '北京宇之然科技中心' });
      await expect(footerInfo.first()).toBeVisible();
    });

    test('ICP 备案号链接', async ({ page }) => {
      const icpEl = page.locator('footer a').filter({ hasText: /ICP备案|ICP 备案/ });
      await expect(icpEl).toBeVisible();
      await expect(icpEl).toHaveAttribute('href', 'https://beian.miit.gov.cn/');
    });

    test('Footer 链接点击跳转正确', async ({ page }) => {
      const footerLinks: [string, RegExp][] = [
        ['专题', /\/courses/],
        ['关于我们', /\/about/],
        ['隐私政策', /\/privacy/],
        ['服务协议', /\/terms/],
        ['AI 服务协议', /\/ai-agreement/],
      ];
      for (const [text, urlPattern] of footerLinks) {
        const link = page.locator('footer a').filter({ hasText: text });
        await expect(link.first()).toBeVisible();
        await link.first().click();
        await expect(page).toHaveURL(urlPattern);
        await page.goBack();
      }
    });
  });
});