example.spec.js
2.96 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
/*
* @Date: 2026-01-28 21:45:00
* @Description: Playwright 示例 E2E 测试
*/
import { test, expect } from '@playwright/test'
test.describe('基础功能测试', () => {
test('首页加载成功', async ({ page }) => {
// 访问首页
await page.goto('/')
// 等待页面加载
await page.waitForLoadState('networkidle')
// 检查标题
await expect(page).toHaveTitle(/美乐爱觉/)
// 检查关键元素
const header = page.locator('header').first()
await expect(header).toBeVisible()
})
test('导航功能正常', async ({ page }) => {
await page.goto('/')
// 点击课程列表
await page.click('text=课程')
// 验证导航
await expect(page).toHaveURL(/\/courses-list/)
})
})
test.describe('课程功能测试', () => {
test('浏览课程列表', async ({ page }) => {
await page.goto('/courses-list')
// 等待课程列表加载
await page.waitForSelector('.course-card', { timeout: 5000 })
// 检查课程卡片是否存在
const courseCards = page.locator('.course-card')
const count = await courseCards.count()
expect(count).toBeGreaterThan(0)
})
test('搜索课程', async ({ page }) => {
await page.goto('/courses-list')
// 输入搜索关键字
const searchInput = page.locator('input[placeholder*="搜索"]').first()
await searchInput.fill('Vue')
// 触发搜索
await searchInput.press('Enter')
// 等待结果加载
await page.waitForTimeout(500)
// 验证搜索结果
const courseCards = page.locator('.course-card')
const count = await courseCards.count()
expect(count).toBeGreaterThan(0)
})
})
test.describe('用户认证测试', () => {
test('显示登录页面', async ({ page }) => {
await page.goto('/login')
// 检查登录表单
const loginForm = page.locator('form').first()
await expect(loginForm).toBeVisible()
// 检查手机号输入框
const phoneInput = page.locator('input[name="phone"]')
await expect(phoneInput).toBeVisible()
})
test('登录表单验证', async ({ page }) => {
await page.goto('/login')
// 点击登录按钮(不输入信息)
await page.click('button[type="submit"]')
// 检查错误提示
const errorToast = page.locator('.van-toast--fail')
await expect(errorToast).toBeVisible({ timeout: 3000 })
})
})
test.describe('响应式测试', () => {
test('移动端布局正确', async ({ page }) => {
// 设置移动端视口
await page.setViewportSize({ width: 375, height: 667 })
await page.goto('/')
// 检查移动端导航
const bottomNav = page.locator('.van-tabbar')
await expect(bottomNav).toBeVisible()
})
test('桌面端布局正确', async ({ page }) => {
// 设置桌面端视口
await page.setViewportSize({ width: 1280, height: 720 })
await page.goto('/')
// 检查页面内容
const mainContent = page.locator('main').first()
await expect(mainContent).toBeVisible()
})
})