231 lines
8.9 KiB
TypeScript
231 lines
8.9 KiB
TypeScript
import { test, expect } from '@playwright/test'
|
|
|
|
test.describe('Landing Page - Clean Garage & Bento HUD', () => {
|
|
test.beforeEach(async ({ page }) => {
|
|
// Navigate to the landing page and wait for network to be idle (background image loaded)
|
|
await page.goto('/')
|
|
await page.waitForLoadState('networkidle')
|
|
})
|
|
|
|
test('should display sticky header with CSS logo and button', async ({ page }) => {
|
|
// Check sticky header exists
|
|
const header = page.locator('header')
|
|
await expect(header).toBeVisible()
|
|
|
|
// Verify Compass + Search logo SVG icons are present
|
|
const compassIcon = header.locator('svg').first()
|
|
await expect(compassIcon).toBeVisible()
|
|
|
|
// Verify "SERVICEFINDER" text
|
|
await expect(header.locator('text=SERVICE')).toBeVisible()
|
|
await expect(header.locator('text=FINDER')).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-with-logo.png' })
|
|
})
|
|
|
|
test('should display 2-column hero layout with text and Bento cards', async ({ page }) => {
|
|
// Check main heading (Left column)
|
|
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 in left column
|
|
const ctaButton = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
|
|
await expect(ctaButton).toBeVisible()
|
|
|
|
// Take full page screenshot showing 2-column layout
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/landing-two-column-layout.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
test('should display Bento-Grid with 5 HUD cards on the right', async ({ page }) => {
|
|
// Card 1: Statistics (Full width, top)
|
|
await expect(page.locator('text=Rendszerünkben kezelt járművek')).toBeVisible()
|
|
await expect(page.locator('text=1,245')).toBeVisible()
|
|
|
|
// Card 2: Fuel Cost (Middle left)
|
|
await expect(page.locator('text=Üzemanyag (E havi)')).toBeVisible()
|
|
await expect(page.locator('text=32.500')).toBeVisible()
|
|
|
|
// Card 3: Service Cost (Middle right)
|
|
await expect(page.locator('text=Várható Szerviz')).toBeVisible()
|
|
await expect(page.locator('text=48.000')).toBeVisible()
|
|
|
|
// Card 4: Security Badge (Bottom left)
|
|
await expect(page.locator('text=Security by Design')).toBeVisible()
|
|
await expect(page.locator('text=100% E2E titkosítás')).toBeVisible()
|
|
|
|
// Card 5: Fleet Radar (Bottom right)
|
|
await expect(page.locator('text=Flotta Radar')).toBeVisible()
|
|
await expect(page.locator('text=Aktív')).toBeVisible()
|
|
await expect(page.locator('text=Inaktív')).toBeVisible()
|
|
|
|
// Take screenshot of the Bento-Grid cards area
|
|
const bentoGrid = page.locator('.grid.grid-cols-2').last()
|
|
await bentoGrid.screenshot({ path: 'test-results/screenshots/bento-grid-cards.png' })
|
|
})
|
|
|
|
test('should have clean garage background with asymmetric overlay', async ({ page }) => {
|
|
// Check that the background image is loaded
|
|
const bgContainer = page.locator('div.fixed.inset-0').first()
|
|
await expect(bgContainer).toBeVisible()
|
|
|
|
// Verify background image URL contains 'garage_clean.png'
|
|
const bgStyle = await bgContainer.evaluate((el) =>
|
|
window.getComputedStyle(el).backgroundImage
|
|
)
|
|
expect(bgStyle).toContain('garage_clean.png')
|
|
|
|
// Take screenshot to verify background
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/clean-garage-background.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
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')
|
|
await expect(modal).not.toBeVisible()
|
|
|
|
// Click "Garázs Nyitása" button in header
|
|
const openGarageBtn = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
|
|
await openGarageBtn.click()
|
|
|
|
// Wait for modal to appear
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Verify modal content
|
|
await expect(page.locator('text=SERVICEFINDER')).toHaveCount(2) // Header + Modal
|
|
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-with-logo.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 }).first()
|
|
await openGarageBtn.click()
|
|
|
|
// Verify modal is open
|
|
const modal = page.locator('text=Lépj be a garázsodba')
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Click backdrop (outside modal)
|
|
await page.locator('.fixed.inset-0.z-\\[100\\]').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 }).first()
|
|
await openGarageBtn.click()
|
|
|
|
// Verify modal is open
|
|
const modal = page.locator('text=Lépj be a garázsodba')
|
|
await expect(modal).toBeVisible()
|
|
|
|
// Click close button (X)
|
|
const closeBtn = page.locator('button').filter({ has: page.locator('svg line[x1="18"][y1="6"]') })
|
|
await closeBtn.click()
|
|
|
|
// Modal should close
|
|
await expect(modal).not.toBeVisible()
|
|
})
|
|
|
|
test('should have proper card styling with glassmorphism', async ({ page }) => {
|
|
// Check one of the Bento cards for glassmorphism styles
|
|
const fuelCard = page.locator('text=Üzemanyag (E havi)').locator('..')
|
|
|
|
// Verify card is visible
|
|
await expect(fuelCard).toBeVisible()
|
|
|
|
// Check computed styles for backdrop-blur and transparency
|
|
const backdropFilter = await fuelCard.evaluate((el) =>
|
|
window.getComputedStyle(el).backdropFilter || window.getComputedStyle(el).webkitBackdropFilter
|
|
)
|
|
|
|
// Should have blur effect
|
|
expect(backdropFilter).toContain('blur')
|
|
|
|
// Take close-up screenshot of a card
|
|
await fuelCard.screenshot({ path: 'test-results/screenshots/card-glassmorphism-detail.png' })
|
|
})
|
|
|
|
test('should display all Lucide icons correctly', async ({ page }) => {
|
|
// Count SVG icons in the Bento cards
|
|
const svgIcons = page.locator('.grid.grid-cols-2 svg')
|
|
const iconCount = await svgIcons.count()
|
|
|
|
// Should have multiple icons (trending up, fuel, wrench, shield, car icons)
|
|
expect(iconCount).toBeGreaterThan(5)
|
|
|
|
// Verify specific icons are visible
|
|
await expect(page.locator('svg').filter({ has: page.locator('polyline[points*="22 7"]') })).toBeVisible() // TrendingUp
|
|
await expect(page.locator('svg').filter({ has: page.locator('path[d*="M14 22V4"]') })).toBeVisible() // Fuel
|
|
await expect(page.locator('svg').filter({ has: page.locator('path[d*="M12 22s8-4"]') })).toBeVisible() // Shield
|
|
})
|
|
|
|
test('should be responsive on mobile viewport', async ({ page }) => {
|
|
// Set mobile viewport
|
|
await page.setViewportSize({ width: 375, height: 667 })
|
|
|
|
// Wait for layout to adjust
|
|
await page.waitForTimeout(500)
|
|
|
|
// Header should still be visible
|
|
const header = page.locator('header')
|
|
await expect(header).toBeVisible()
|
|
|
|
// Main heading should be visible
|
|
await expect(page.locator('h1')).toBeVisible()
|
|
|
|
// Cards should stack vertically on mobile
|
|
await expect(page.locator('text=Rendszerünkben kezelt járművek')).toBeVisible()
|
|
|
|
// Take mobile screenshot
|
|
await page.screenshot({
|
|
path: 'test-results/screenshots/landing-mobile-view.png',
|
|
fullPage: true
|
|
})
|
|
})
|
|
|
|
test('should have proper color scheme (turquoise and dark blue)', async ({ page }) => {
|
|
// Check turquoise color (#65A5A0) is used
|
|
const turquoiseElements = page.locator('[class*="65A5A0"]')
|
|
const turquoiseCount = await turquoiseElements.count()
|
|
expect(turquoiseCount).toBeGreaterThan(0)
|
|
|
|
// Check dark blue color (#062535) is used
|
|
const darkBlueElements = page.locator('[class*="062535"]')
|
|
const darkBlueCount = await darkBlueElements.count()
|
|
expect(darkBlueCount).toBeGreaterThan(0)
|
|
|
|
// Verify button has turquoise background
|
|
const button = page.getByRole('button', { name: /Garázs Nyitása/i }).first()
|
|
const bgColor = await button.evaluate((el) =>
|
|
window.getComputedStyle(el).backgroundColor
|
|
)
|
|
|
|
// RGB equivalent of #65A5A0 is approximately rgb(101, 165, 160)
|
|
expect(bgColor).toMatch(/rgb\(101,\s*165,\s*160\)/)
|
|
})
|
|
})
|