it/frontend/tests/e2e/user-journey.spec.js

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

test.describe('用户旅程测试', () => {
  let browser
  let context
  let page

  test.beforeAll(async () => {
    // 启动浏览器
    browser = await chromium.launch()
  })

  test.afterAll(async () => {
    // 关闭浏览器
    await browser.close()
  })

  test.beforeEach(async () => {
    // 创建新的浏览器上下文和页面
    context = await browser.newContext()
    page = await context.newPage()
    
    // 设置视口大小
    await page.setViewportSize({ width: 1280, height: 720 })
  })

  test.afterEach(async () => {
    // 关闭浏览器上下文
    await context.close()
  })

  test('用户应该能够浏览首页并选择产品类别', async () => {
    // 访问首页
    await page.goto('/')
    
    // 检查页面标题
    await expect(page).toHaveTitle(/硬件性能排行榜/)
    
    // 检查应用标题
    await expect(page.locator('.header__title')).toContainText('硬件性能排行榜')
    
    // 等待类别卡片加载
    await page.waitForSelector('.category-card')
    
    // 检查类别卡片数量
    const categoryCards = await page.locator('.category-card').count()
    expect(categoryCards).toBeGreaterThan(0)
    
    // 点击第一个类别卡片
    await page.locator('.category-card').first().click()
    
    // 检查是否跳转到类别排名页面
    await expect(page).toHaveURL(/\/category\/\d+/)
    
    // 检查页面标题是否更新为类别名称
    const categoryName = await page.locator('.page-title').textContent()
    expect(categoryName).toBeTruthy()
  })

  test('用户应该能够浏览产品排名列表', async () => {
    // 直接访问类别排名页面
    await page.goto('/category/1')
    
    // 等待产品列表加载
    await page.waitForSelector('.product-card')
    
    // 检查产品卡片数量
    const productCards = await page.locator('.product-card').count()
    expect(productCards).toBeGreaterThan(0)
    
    // 检查排名显示
    const firstProductRank = await page.locator('.product-card').first().locator('.product-rank').textContent()
    expect(firstProductRank).toContain('#1')
    
    // 点击第一个产品卡片
    await page.locator('.product-card').first().click()
    
    // 检查是否跳转到产品详情页面
    await expect(page).toHaveURL(/\/product\/\d+/)
    
    // 检查产品详情页面内容
    await expect(page.locator('.product-detail')).toBeVisible()
    await expect(page.locator('.product-name')).toBeVisible()
    await expect(page.locator('.product-specs')).toBeVisible()
  })

  test('用户应该能够使用搜索功能查找产品', async () => {
    // 访问类别排名页面
    await page.goto('/category/1')
    
    // 等待搜索框加载
    await page.waitForSelector('.search-input')
    
    // 输入搜索关键词
    await page.fill('.search-input', 'Intel')
    
    // 点击搜索按钮
    await page.click('.search-button')
    
    // 等待搜索结果加载
    await page.waitForSelector('.product-card')
    
    // 检查搜索结果
    const productCards = await page.locator('.product-card').count()
    expect(productCards).toBeGreaterThan(0)
    
    // 检查搜索结果是否包含搜索关键词
    const firstProductName = await page.locator('.product-card').first().locator('.product-name').textContent()
    expect(firstProductName.toLowerCase()).toContain('intel'.toLowerCase())
  })

  test('用户应该能够使用筛选功能过滤产品', async () => {
    // 访问类别排名页面
    await page.goto('/category/1')
    
    // 等待筛选器加载
    await page.waitForSelector('.product-filter')
    
    // 选择品牌筛选
    await page.selectOption('.brand-filter', 'Intel')
    
    // 设置性能分数范围
    await page.fill('.min-score-input', '5000')
    await page.fill('.max-score-input', '10000')
    
    // 点击应用筛选按钮
    await page.click('.apply-filter-button')
    
    // 等待筛选结果加载
    await page.waitForSelector('.product-card')
    
    // 检查筛选结果
    const productCards = await page.locator('.product-card').count()
    expect(productCards).toBeGreaterThan(0)
    
    // 检查第一个产品的品牌
    const firstProductBrand = await page.locator('.product-card').first().locator('.product-brand').textContent()
    expect(firstProductBrand).toContain('Intel')
  })

  test('用户应该能够使用排序功能对产品进行排序', async () => {
    // 访问类别排名页面
    await page.goto('/category/1')
    
    // 等待排序选择器加载
    await page.waitForSelector('.sort-select')
    
    // 选择按性能分数降序排序
    await page.selectOption('.sort-select', 'score-desc')
    
    // 等待排序结果加载
    await page.waitForSelector('.product-card')
    
    // 检查第一个产品的性能分数是否最高
    const firstProductScore = await page.locator('.product-card').first().locator('.product-score').textContent()
    const secondProductScore = await page.locator('.product-card').nth(1).locator('.product-score').textContent()
    
    // 提取数字部分进行比较
    const firstScore = parseInt(firstProductScore.replace(/[^0-9]/g, ''))
    const secondScore = parseInt(secondProductScore.replace(/[^0-9]/g, ''))
    
    expect(firstScore).toBeGreaterThanOrEqual(secondScore)
  })

  test('用户应该能够选择产品进行对比', async () => {
    // 访问类别排名页面
    await page.goto('/category/1')
    
    // 等待产品列表加载
    await page.waitForSelector('.product-card')
    
    // 选择第一个产品的复选框
    await page.check('.product-card').first().locator('.compare-checkbox')
    
    // 选择第二个产品的复选框
    await page.check('.product-card').nth(1).locator('.compare-checkbox')
    
    // 点击对比按钮
    await page.click('.compare-button')
    
    // 检查是否跳转到产品对比页面
    await expect(page).toHaveURL(/\/compare/)
    
    // 检查对比页面内容
    await expect(page.locator('.comparison-table')).toBeVisible()
    await expect(page.locator('.comparison-chart')).toBeVisible()
  })

  test('用户应该能够查看性能监控页面', async () => {
    // 访问性能监控页面
    await page.goto('/monitor')
    
    // 等待页面加载
    await page.waitForSelector('.monitor-dashboard')
    
    // 检查性能指标卡片
    await expect(page.locator('.metric-card')).toBeVisible()
    
    // 检查性能图表
    await expect(page.locator('.performance-chart')).toBeVisible()
    
    // 检查系统状态
    await expect(page.locator('.system-status')).toBeVisible()
  })

  test('用户应该能够在移动设备上正常使用应用', async () => {
    // 设置移动设备视口
    await page.setViewportSize({ width: 375, height: 667 })
    
    // 访问首页
    await page.goto('/')
    
    // 检查移动端菜单按钮
    await expect(page.locator('.header__mobile-menu')).toBeVisible()
    
    // 点击移动端菜单按钮
    await page.click('.header__mobile-menu')
    
    // 检查移动端菜单是否展开
    await expect(page.locator('.mobile-menu')).toBeVisible()
    
    // 点击类别卡片
    await page.click('.category-card').first()
    
    // 检查是否跳转到类别排名页面
    await expect(page).toHaveURL(/\/category\/\d+/)
    
    // 检查移动端产品列表布局
    await expect(page.locator('.product-card')).toBeVisible()
    
    // 检查移动端筛选器
    await expect(page.locator('.mobile-filter')).toBeVisible()
  })

  test('用户应该能够处理网络错误', async () => {
    // 模拟网络错误
    await page.route('**/api/**', route => route.abort())
    
    // 访问首页
    await page.goto('/')
    
    // 等待错误提示
    await page.waitForSelector('.error-message')
    
    // 检查错误提示内容
    await expect(page.locator('.error-message')).toContainText('网络错误')
    
    // 点击重试按钮
    await page.click('.retry-button')
    
    // 恢复网络连接
    await page.unroute('**/api/**')
    
    // 检查页面是否恢复正常
    await page.waitForSelector('.category-card')
    await expect(page.locator('.category-card')).toBeVisible()
  })

  test('用户应该能够使用页面导航', async () => {
    // 访问首页
    await page.goto('/')
    
    // 点击导航栏中的性能监控链接
    await page.click('[data-testid="monitor-button"]')
    
    // 检查是否跳转到性能监控页面
    await expect(page).toHaveURL('/monitor')
    
    // 点击浏览器后退按钮
    await page.goBack()
    
    // 检查是否返回到首页
    await expect(page).toHaveURL('/')
    
    // 点击浏览器前进按钮
    await page.goForward()
    
    // 检查是否前进到性能监控页面
    await expect(page).toHaveURL('/monitor')
  })

  test('用户应该能够使用分页功能浏览更多产品', async () => {
    // 访问类别排名页面
    await page.goto('/category/1')
    
    // 等待产品列表和分页组件加载
    await page.waitForSelector('.product-card')
    await page.waitForSelector('.pagination')
    
    // 记录第一页的产品
    const firstPageProducts = await page.locator('.product-card').allTextContents()
    
    // 点击下一页按钮
    await page.click('.pagination-next')
    
    // 等待新页面加载
    await page.waitForSelector('.product-card')
    
    // 记录第二页的产品
    const secondPageProducts = await page.locator('.product-card').allTextContents()
    
    // 检查两页的产品是否不同
    expect(firstPageProducts).not.toEqual(secondPageProducts)
    
    // 点击上一页按钮
    await page.click('.pagination-prev')
    
    // 等待页面加载
    await page.waitForSelector('.product-card')
    
    // 检查是否返回到第一页
    const backToFirstPageProducts = await page.locator('.product-card').allTextContents()
    expect(backToFirstPageProducts).toEqual(firstPageProducts)
  })
})