online-order-vue/e2e/login.spec.ts

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

/**
 * 登录功能 E2E 测试
 */
test.describe('Login', () => {
  test.beforeEach(async ({ page }) => {
    // 每个测试前导航到登录页
    await page.goto('/login')
  })

  test('should display login form', async ({ page }) => {
    // 验证登录页面元素存在
    await expect(page.getByRole('heading', { name: '登录' })).toBeVisible()
    await expect(page.getByPlaceholder('请输入租户名称')).toBeVisible()
    await expect(page.getByPlaceholder('请输入用户名')).toBeVisible()
    await expect(page.getByPlaceholder('请输入密码')).toBeVisible()
    await expect(page.getByRole('button', { name: '登录' })).toBeVisible()
  })

  test('should have default values filled', async ({ page }) => {
    // 验证默认值
    const tenantInput = page.getByPlaceholder('请输入租户名称')
    const usernameInput = page.getByPlaceholder('请输入用户名')
    const passwordInput = page.getByPlaceholder('请输入密码')

    await expect(tenantInput).toHaveValue('yshop')
    await expect(usernameInput).toHaveValue('admin')
    await expect(passwordInput).toHaveValue('admin123')
  })

  test('should login successfully with valid credentials', async ({ page }) => {
    // 点击登录按钮
    await page.getByRole('button', { name: '登录' }).click()

    // 等待登录成功并跳转到首页
    await expect(page).toHaveURL(/\/index/, { timeout: 10000 })

    // 验证首页元素 - 使用更精确的定位器
    await expect(page.getByRole('link', { name: '首页' })).toBeVisible()
    await expect(page.getByText('会员总数')).toBeVisible()
  })

  test('should show error with invalid tenant', async ({ page }) => {
    // 清空并输入无效的租户名称
    const tenantInput = page.getByPlaceholder('请输入租户名称')
    await tenantInput.clear()
    await tenantInput.fill('invalid_tenant')

    // 点击登录按钮
    await page.getByRole('button', { name: '登录' }).click()

    // 应该显示错误提示（停留在登录页）
    await expect(page).toHaveURL(/\/login/, { timeout: 5000 })
  })

  test('should toggle password visibility', async ({ page }) => {
    const passwordInput = page.getByPlaceholder('请输入密码')

    // 默认密码应该是隐藏的
    await expect(passwordInput).toHaveAttribute('type', 'password')

    // 点击显示密码图标（眼睛图标）
    const toggleButton = page.locator('.el-input__suffix').filter({ has: passwordInput.locator('..') }).locator('img').last()

    if (await toggleButton.isVisible()) {
      await toggleButton.click()
      // 密码应该变成可见
      await expect(passwordInput).toHaveAttribute('type', 'text')
    }
  })

  test('should remember me checkbox works', async ({ page }) => {
    const rememberMeCheckbox = page.getByText('记住我')

    // 验证记住我选项存在
    await expect(rememberMeCheckbox).toBeVisible()
  })

  test('should redirect to original page after login', async ({ page }) => {
    // 访问需要登录的页面
    await page.goto('/index')

    // 应该被重定向到登录页，带有 redirect 参数
    await expect(page).toHaveURL(/\/login\?redirect/)

    // 登录
    await page.getByRole('button', { name: '登录' }).click()

    // 登录后应该跳转回原页面
    await expect(page).toHaveURL(/\/index/, { timeout: 10000 })
  })
})