mini-starter/web/tests/e2e/travel-flow/pages/HomePage.ts

import { Locator, Page } from '@playwright/test'

export class HomePage {
  readonly page: Page

  // 页面元素定位器
  readonly title: Locator
  readonly subtitle: Locator
  readonly vehicleTypeButtons: Locator
  readonly departureAreaSelector: Locator
  readonly destinationAreaSelector: Locator
  readonly departureLocationSearch: Locator
  readonly destinationLocationSearch: Locator
  readonly datePicker: Locator
  readonly searchButton: Locator
  readonly selectedLocationText: Locator
  readonly provinceList: Locator
  readonly cityList: Locator
  readonly districtList: Locator
  readonly locationSearchResults: Locator
  readonly noResultsText: Locator

  constructor(page: Page) {
    this.page = page

    // 初始化定位器
    this.title = page.locator('text=便捷出行')
    this.subtitle = page.locator('text=专业出行服务，安全舒适')
    this.vehicleTypeButtons = page.locator('text=大巴拼车, text=商务车, text=包车')
    this.departureAreaSelector = page.locator('text=请选择出发地区')
    this.destinationAreaSelector = page.locator('text=请选择目的地区')
    this.departureLocationSearch = page.locator('input[placeholder="搜索出发地点"]')
    this.destinationLocationSearch = page.locator('input[placeholder="搜索目的地点"]')
    this.datePicker = page.locator('input[type="date"]')
    this.searchButton = page.locator('text=查询路线')
    this.selectedLocationText = page.locator('text=已选择:')
    this.provinceList = page.locator('text=北京市, text=广东省, text=上海市')
    this.cityList = page.locator('text=广州市, text=深圳市')
    this.districtList = page.locator('text=天河区, text=越秀区')
    this.locationSearchResults = page.locator('text=北京首都国际机场, text=北京南站, text=上海虹桥机场')
    this.noResultsText = page.locator('text=未找到相关地点')
  }

  // 页面操作方法
  async goto() {
    await this.page.goto('/mini/')
  }

  async selectVehicleType(type: '大巴拼车' | '商务车' | '包车') {
    await this.page.click(`text=${type}`)
  }

  async selectDepartureArea(province: string, city?: string, district?: string) {
    await this.departureAreaSelector.click()
    await this.page.click(`text=${province}`)

    if (city) {
      await this.page.click('text=请选择城市')
      await this.page.click(`text=${city}`)
    }

    if (district) {
      await this.page.click('text=请选择区县')
      await this.page.click(`text=${district}`)
    }
  }

  async selectDestinationArea(province: string, city?: string, district?: string) {
    await this.destinationAreaSelector.click()
    await this.page.click(`text=${province}`)

    if (city) {
      await this.page.click('text=请选择城市')
      await this.page.click(`text=${city}`)
    }

    if (district) {
      await this.page.click('text=请选择区县')
      await this.page.click(`text=${district}`)
    }
  }

  async searchDepartureLocation(keyword: string) {
    await this.departureLocationSearch.fill(keyword)
    await this.page.waitForTimeout(500) // 等待防抖
  }

  async searchDestinationLocation(keyword: string) {
    await this.destinationLocationSearch.fill(keyword)
    await this.page.waitForTimeout(500) // 等待防抖
  }

  async selectLocation(locationName: string) {
    await this.page.click(`text=${locationName}`)
  }

  async setDate(date: string) {
    await this.datePicker.fill(date)
  }

  async searchRoutes() {
    await this.searchButton.click()
  }

  async getSelectedLocationText(): Promise<string> {
    return await this.selectedLocationText.textContent() || ''
  }

  async isVehicleTypeSelected(type: string): Promise<boolean> {
    const button = this.page.locator(`text=${type}`)
    const parent = button.locator('..')
    const className = await parent.getAttribute('class')
    return className?.includes('bg-blue-500') || false
  }
}