61 lines
1.8 KiB
TypeScript
61 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()
|
|
await expect(appLayout).toContainText('AppLayout')
|
|
})
|
|
})
|