f92ef0f870
- AppLayout.vue: 添加渐变背景和响应式布局 - App.vue: 美化主页面，包含卡片布局和绿色主题按钮 - index.page.vue: 创建彩色渐变的英雄区块，包含动画效果和交互卡片 🤖 Generated with [Claude Code](https://claude.ai/code) Co-Authored-By: Claude <noreply@anthropic.com>
60 lines
1.8 KiB
TypeScript
60 lines
1.8 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Vue App', () => {
|
|
test('visits the app root url', async ({ page }) => {
|
|
await page.goto('/')
|
|
await expect(page.locator('h1')).toHaveText('You did it!')
|
|
})
|
|
|
|
test('displays Vue documentation link', async ({ page }) => {
|
|
await page.goto('/')
|
|
const link = page.locator('a[href="https://vuejs.org/"]')
|
|
await expect(link).toBeVisible()
|
|
await expect(link).toHaveText('vuejs.org')
|
|
await expect(link).toHaveAttribute('target', '_blank')
|
|
await expect(link).toHaveAttribute('rel', 'noopener')
|
|
})
|
|
|
|
test('displays button with initial name state', async ({ page }) => {
|
|
await page.goto('/')
|
|
const button = page.locator('button[aria-label="get name"]')
|
|
await expect(button).toBeVisible()
|
|
await expect(button).toHaveText('Name from API is: Unknown')
|
|
})
|
|
|
|
test('button click triggers API call', async ({ page }) => {
|
|
await page.goto('/')
|
|
|
|
await page.route('/api/', async (route) => {
|
|
await route.fulfill({
|
|
contentType: 'application/json',
|
|
body: JSON.stringify({ name: 'Test User' }),
|
|
})
|
|
})
|
|
|
|
const button = page.locator('button[aria-label="get name"]')
|
|
await button.click()
|
|
|
|
await expect(button).toHaveText('Name from API is: Test User')
|
|
})
|
|
|
|
test('handles API error gracefully', async ({ page }) => {
|
|
await page.goto('/')
|
|
|
|
await page.route('/api/', async (route) => {
|
|
await route.abort('failed')
|
|
})
|
|
|
|
const button = page.locator('button[aria-label="get name"]')
|
|
await button.click()
|
|
|
|
await expect(button).toHaveText('Name from API is: Unknown')
|
|
})
|
|
|
|
test('app-layout is present', async ({ page }) => {
|
|
await page.goto('/')
|
|
const appLayout = page.locator('.app-layout')
|
|
await expect(appLayout).toBeVisible()
|
|
})
|
|
})
|