mini-starter/tests/e2e/travel-flow/travel-flow.spec.ts

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

test.describe('完整出行流程E2E测试', () => {
  test('用户应该能够完成完整的出行查询流程', async ({ page }) => {
    // 1. 访问首页
    await page.goto('/')

    // 验证首页加载成功
    await expect(page.locator('text=便捷出行')).toBeVisible()
    await expect(page.locator('text=专业出行服务，安全舒适')).toBeVisible()

    // 2. 选择出行方式
    await page.click('text=商务车')
    await expect(page.locator('text=商务车').locator('..')).toHaveClass(/bg-blue-500/)

    // 3. 选择出发地区
    await page.click('text=请选择出发地区')
    await page.click('text=北京市')
    await expect(page.locator('text=北京市')).toBeVisible()

    // 4. 选择出发地点
    await page.fill('input[placeholder="搜索出发地点"]', '北京')
    await page.waitForTimeout(500) // 等待防抖
    await page.click('text=北京首都国际机场')
    await expect(page.locator('text=已选择: 北京首都国际机场')).toBeVisible()

    // 5. 选择目的地区
    await page.click('text=请选择目的地区')
    await page.click('text=上海市')
    await expect(page.locator('text=上海市')).toBeVisible()

    // 6. 选择目的地点
    await page.fill('input[placeholder="搜索目的地点"]', '上海')
    await page.waitForTimeout(500) // 等待防抖
    await page.click('text=上海虹桥机场')
    await expect(page.locator('text=已选择: 上海虹桥机场')).toBeVisible()

    // 7. 选择日期
    const tomorrow = new Date()
    tomorrow.setDate(tomorrow.getDate() + 1)
    const tomorrowStr = tomorrow.toISOString().split('T')[0]
    await page.fill('input[type="date"]', tomorrowStr)

    // 8. 查询路线
    await page.click('text=查询路线')

    // 9. 验证跳转到活动选择页面
    await page.waitForURL(/\/pages\/select-activity\/ActivitySelectPage/)
    await expect(page.locator('text=选择观看活动')).toBeVisible()
    await expect(page.locator('text=北京市 → 上海市')).toBeVisible()

    // 10. 选择活动
    await page.click('text=上海音乐节')

    // 11. 验证跳转到班次列表页面
    await page.waitForURL(/\/pages\/schedule-list\/ScheduleListPage/)
    await expect(page.locator('text=可选班次')).toBeVisible()
    await expect(page.locator('text=上海音乐节')).toBeVisible()

    // 12. 选择不同日期
    const dayAfterTomorrow = new Date()
    dayAfterTomorrow.setDate(dayAfterTomorrow.getDate() + 2)
    const dayAfterTomorrowStr = dayAfterTomorrow.toISOString().split('T')[0]
    await page.click(`text=${dayAfterTomorrowStr}`)

    // 13. 验证班次列表更新
    await expect(page.locator('text=选择出发日期')).toBeVisible()

    // 14. 选择班次（如果有可用班次）
    const availableSchedule = page.locator('text=立即购票').first()
    if (await availableSchedule.isVisible()) {
      await availableSchedule.click()
      // 这里可以继续验证预订流程
    }
  })

  test('省市区三级联动功能应该正常工作', async ({ page }) => {
    await page.goto('/')

    // 测试省份选择
    await page.click('text=请选择出发地区')
    await page.click('text=广东省')
    await expect(page.locator('text=广东省')).toBeVisible()

    // 验证城市列表加载
    await page.click('text=请选择城市')
    await expect(page.locator('text=广州市')).toBeVisible()
    await expect(page.locator('text=深圳市')).toBeVisible()

    // 选择城市
    await page.click('text=广州市')
    await expect(page.locator('text=广州市')).toBeVisible()

    // 验证区县列表加载
    await page.click('text=请选择区县')
    await expect(page.locator('text=天河区')).toBeVisible()
    await expect(page.locator('text=越秀区')).toBeVisible()

    // 选择区县
    await page.click('text=天河区')
    await expect(page.locator('text=广东省 广州市 天河区')).toBeVisible()
  })

  test('地点搜索功能应该正常工作', async ({ page }) => {
    await page.goto('/')

    // 测试地点搜索
    await page.fill('input[placeholder="搜索出发地点"]', '北京')
    await page.waitForTimeout(500)

    // 验证搜索结果
    await expect(page.locator('text=北京首都国际机场')).toBeVisible()
    await expect(page.locator('text=北京南站')).toBeVisible()

    // 选择地点
    await page.click('text=北京首都国际机场')
    await expect(page.locator('text=已选择: 北京首都国际机场')).toBeVisible()

    // 验证输入框值更新
    await expect(page.locator('input[placeholder="搜索出发地点"]')).toHaveValue('北京首都国际机场')
  })

  test('路线类型动态判断逻辑应该正确工作', async ({ page }) => {
    await page.goto('/')

    // 设置出发地和目的地
    await page.click('text=请选择出发地区')
    await page.click('text=北京市')

    await page.click('text=请选择目的地区')
    await page.click('text=上海市')

    // 搜索地点
    await page.fill('input[placeholder="搜索出发地点"]', '北京首都国际机场')
    await page.waitForTimeout(500)
    await page.click('text=北京首都国际机场')

    await page.fill('input[placeholder="搜索目的地点"]', '上海虹桥机场')
    await page.waitForTimeout(500)
    await page.click('text=上海虹桥机场')

    // 查询路线
    await page.click('text=查询路线')

    // 验证活动选择页面显示正确的路线类型
    await page.waitForURL(/\/pages\/select-activity\/ActivitySelectPage/)
    await expect(page.locator('text=去程活动')).toBeVisible()
    await expect(page.locator('text=返程活动')).toBeVisible()
  })

  test('边界场景：无数据时应该显示友好提示', async ({ page }) => {
    await page.goto('/')

    // 设置不存在的搜索条件
    await page.fill('input[placeholder="搜索出发地点"]', '不存在的城市')
    await page.waitForTimeout(500)

    // 验证显示无结果提示
    await expect(page.locator('text=未找到相关地点')).toBeVisible()

    // 查询无效路线
    await page.click('text=查询路线')

    // 验证活动页面显示无活动提示
    await page.waitForURL(/\/pages\/select-activity\/ActivitySelectPage/)
    await expect(page.locator('text=暂无相关活动')).toBeVisible()
  })

  test('并发查询应该正确处理', async ({ page }) => {
    await page.goto('/')

    // 快速连续操作
    await page.click('text=大巴拼车')
    await page.click('text=商务车')
    await page.click('text=包车')

    // 快速输入搜索
    await page.fill('input[placeholder="搜索出发地点"]', '北京')
    await page.fill('input[placeholder="搜索出发地点"]', '上海')
    await page.fill('input[placeholder="搜索出发地点"]', '广州')

    await page.waitForTimeout(500) // 等待防抖完成

    // 验证最终状态正确
    await expect(page.locator('text=包车').locator('..')).toHaveClass(/bg-blue-500/)
    await expect(page.locator('input[placeholder="搜索出发地点"]')).toHaveValue('广州')
  })
})