315 lines
9.9 KiB
JavaScript
315 lines
9.9 KiB
JavaScript
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)
|
|
})
|
|
}) |