218 lines
7.8 KiB
TypeScript
218 lines
7.8 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Neo-Glassmorphism Landing Page', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Navigate to the landing page
|
|
await page.goto('/')
|
|
})
|
|
|
|
test('should display sticky header with logo and button', async ({ page }) => {
|
|
// Check sticky header exists
|
|
const header = page.locator('header')
|
|
await expect(header).toBeVisible()
|
|
|
|
// Verify logo SVG icons are present
|
|
const compassIcon = header.locator('svg').first()
|
|
await expect(compassIcon).toBeVisible()
|
|
|
|
// Verify "Garázs Nyitása" button
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
|
await expect(openGarageBtn).toBeVisible()
|
|
|
|
// Take screenshot of header
|
|
await header.screenshot({ path: 'test-results/screenshots/header-sticky.png' })
|
|
})
|
|
|
|
test('should display three asymmetric floating cards', async ({ page }) => {
|
|
// Wait for page to fully load
|
|
await page.waitForLoadState('networkidle')
|
|
|
|
// Card 1: HUD Costs (should contain "HUD Költségek" and "25.000 Ft")
|
|
const hudCard = page.locator('text=HUD Költségek').locator('..')
|
|
await expect(hudCard).toBeVisible()
|
|
await expect(page.locator('text=25.000 Ft')).toBeVisible()
|
|
|
|
// Card 2: Flotta Radar (should contain "Flotta Radar" and vehicle counts)
|
|
const fleetCard = page.locator('text=Flotta Radar').locator('..')
|
|
await expect(fleetCard).toBeVisible()
|
|
await expect(page.locator('text=Aktív')).toBeVisible()
|
|
|
|
// Card 3: Gamification (should contain "Gamifikáció" and "3450")
|
|
const gamificationCard = page.locator('text=Gamifikáció').locator('..')
|
|
await expect(gamificationCard).toBeVisible()
|
|
await expect(page.locator('text=3450')).toBeVisible()
|
|
await expect(page.locator('text=Usta Szerelő')).toBeVisible()
|
|
|
|
// Take full page screenshot showing all cards
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/landing-floating-cards.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
test('should display hero content with gradient background', async ({ page }) => {
|
|
// Check main heading
|
|
const heading = page.locator('h1')
|
|
await expect(heading).toContainText('Digitális Flotta')
|
|
await expect(heading).toContainText('Menedzsment')
|
|
|
|
// Check subheading
|
|
await expect(page.locator('text=Valós idejű költségkövetés')).toBeVisible()
|
|
|
|
// Check CTA button
|
|
const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
|
|
await expect(ctaButton).toBeVisible()
|
|
|
|
// Verify gradient background is applied (check computed styles)
|
|
const mainContainer = page.locator('div').first()
|
|
const bgColor = await mainContainer.evaluate((el) =>
|
|
window.getComputedStyle(el).backgroundImage
|
|
)
|
|
expect(bgColor).toContain('gradient')
|
|
})
|
|
|
|
test('should open login modal when clicking "Garázs Nyitása"', async ({ page }) => {
|
|
// Modal should not be visible initially
|
|
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
|
await expect(modal).not.toBeVisible()
|
|
|
|
// Click "Garázs Nyitása" button
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
|
await openGarageBtn.click()
|
|
|
|
// Wait for modal to appear
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Verify modal content
|
|
await expect(page.locator('text=Lépj be a garázsodba')).toBeVisible()
|
|
await expect(page.getByLabel(/Email cím/i)).toBeVisible()
|
|
await expect(page.getByLabel(/Jelszó/i)).toBeVisible()
|
|
|
|
// Take screenshot of open modal
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/login-modal-open.png',
|
|
fullPage: false
|
|
})
|
|
})
|
|
|
|
test('should close modal when clicking backdrop', async ({ page }) => {
|
|
// Open modal
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
|
await openGarageBtn.click()
|
|
|
|
// Wait for modal
|
|
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Click backdrop (outside modal)
|
|
const backdrop = page.locator('.fixed.inset-0').first()
|
|
await backdrop.click({ position: { x: 10, y: 10 } })
|
|
|
|
// Modal should close
|
|
await expect(modal).not.toBeVisible()
|
|
})
|
|
|
|
test('should close modal when clicking X button', async ({ page }) => {
|
|
// Open modal
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
|
await openGarageBtn.click()
|
|
|
|
// Wait for modal
|
|
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Click close button (X icon)
|
|
const closeBtn = page.locator('button').filter({ has: page.locator('svg line[x1="18"]') }).first()
|
|
await closeBtn.click()
|
|
|
|
// Modal should close
|
|
await expect(modal).not.toBeVisible()
|
|
})
|
|
|
|
test('should open modal when clicking hero CTA button', async ({ page }) => {
|
|
// Click "Kezdjük el" button
|
|
const ctaButton = page.getByRole('button', { name: /Kezdjük el/i })
|
|
await ctaButton.click()
|
|
|
|
// Modal should open
|
|
const modal = page.locator('text=Lépj be a garázsodba').locator('..')
|
|
await expect(modal).toBeVisible()
|
|
})
|
|
|
|
test('should have proper glassmorphism effects on cards', async ({ page }) => {
|
|
await page.waitForLoadState('networkidle')
|
|
|
|
// Check HUD card has backdrop-blur
|
|
const hudCard = page.locator('text=HUD Költségek').locator('..')
|
|
const backdropFilter = await hudCard.evaluate((el) =>
|
|
window.getComputedStyle(el).backdropFilter || window.getComputedStyle(el).webkitBackdropFilter
|
|
)
|
|
expect(backdropFilter).toContain('blur')
|
|
|
|
// Check card has border with turquoise color
|
|
const borderColor = await hudCard.evaluate((el) =>
|
|
window.getComputedStyle(el).borderColor
|
|
)
|
|
// Border should exist (not 'none')
|
|
expect(borderColor).not.toBe('none')
|
|
})
|
|
|
|
test('should display CSS progress ring in gamification card', async ({ page }) => {
|
|
await page.waitForLoadState('networkidle')
|
|
|
|
// Find the SVG circle elements in the progress ring
|
|
const progressRing = page.locator('svg circle[stroke="#65A5A0"]')
|
|
await expect(progressRing).toBeVisible()
|
|
|
|
// Verify trophy icons are present
|
|
const trophies = page.locator('svg').filter({ hasText: '' }).locator('path[d*="M6 9H4.5"]')
|
|
const trophyCount = await trophies.count()
|
|
expect(trophyCount).toBeGreaterThanOrEqual(3)
|
|
})
|
|
|
|
test('should have responsive layout on mobile', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
// Check header is still visible
|
|
const header = page.locator('header')
|
|
await expect(header).toBeVisible()
|
|
|
|
// Check cards are still visible (may stack differently)
|
|
await expect(page.locator('text=HUD Költségek')).toBeVisible()
|
|
await expect(page.locator('text=Flotta Radar')).toBeVisible()
|
|
await expect(page.locator('text=Gamifikáció')).toBeVisible()
|
|
|
|
// Take mobile screenshot
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/landing-mobile.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
test('visual regression: full landing page', async ({ page }) => {
|
|
await page.waitForLoadState('networkidle')
|
|
|
|
// Take full page screenshot for visual comparison
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/landing-full-page.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
test('visual regression: modal state', async ({ page }) => {
|
|
// Open modal
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i })
|
|
await openGarageBtn.click()
|
|
|
|
// Wait for animation
|
|
await page.waitForTimeout(500)
|
|
|
|
// Take screenshot
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/modal-full-state.png',
|
|
fullPage: false
|
|
})
|
|
})
|
|
})
|