example.spec.js 2.96 KB
/*
 * @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()
  })
})