Files
archy-demo/neode-ui/e2e/visual-regression.spec.ts
2026-03-17 02:14:04 +00:00

135 lines
4.3 KiB
TypeScript

import { test, type Page } from '@playwright/test'
const SCREENSHOT_DIR = './e2e/screenshots'
const PASSWORD = 'password123'
/** Set localStorage values to skip splash screen and onboarding */
async function skipSplashAndOnboarding(page: Page) {
await page.goto('/login')
await page.evaluate(() => {
localStorage.setItem('neode_intro_seen', '1')
localStorage.setItem('neode_onboarding_complete', '1')
})
}
async function login(page: Page) {
await skipSplashAndOnboarding(page)
await page.goto('/login')
await page.waitForLoadState('networkidle')
// Wait for the password input to appear (server health check may delay it)
const passwordInput = page.locator('input[type="password"]').first()
await passwordInput.waitFor({ timeout: 15_000 })
await passwordInput.fill(PASSWORD)
// Click the login/submit button
const submitBtn = page
.locator(
'button:has-text("Login"), button:has-text("Unlock"), button:has-text("Continue"), button[type="submit"]',
)
.first()
await submitBtn.click()
// Wait for navigation to dashboard
await page.waitForURL('**/dashboard**', { timeout: 15_000 })
await page.waitForLoadState('networkidle')
// Wait for home page content to confirm dashboard is loaded
await page.locator('text=Welcome Noderunner').waitFor({ timeout: 10_000 })
await page.waitForTimeout(1500)
}
/** Navigate to a dashboard child route via sidebar link click */
async function navigateTo(page: Page, path: string, waitForText: string) {
// Use in-page navigation to avoid full SPA reload
await page.evaluate((p) => {
window.history.pushState({}, '', p)
window.dispatchEvent(new PopStateEvent('popstate'))
}, path)
// Wait for the page-specific content to appear
await page.locator(`text=${waitForText}`).first().waitFor({ timeout: 10_000 })
// Let content settle after route change
await page.waitForTimeout(800)
}
async function screenshot(page: Page, name: string) {
// Wait for any animations to settle
await page.waitForTimeout(1000)
await page.screenshot({
path: `${SCREENSHOT_DIR}/${name}.png`,
fullPage: true,
})
}
test.describe('Visual Regression — Public Pages', () => {
test('login page', async ({ page }) => {
await skipSplashAndOnboarding(page)
await page.goto('/login')
await page.waitForLoadState('networkidle')
// Wait for server health check and form to become active
await page.locator('input[type="password"]').first().waitFor({ timeout: 15_000 })
await page.waitForTimeout(1000)
await screenshot(page, '01-login')
})
})
test.describe('Visual Regression — Dashboard Pages', () => {
test.beforeEach(async ({ page }) => {
await login(page)
})
test('home / dashboard', async ({ page }) => {
// Already on home after login
await screenshot(page, '02-dashboard-home')
})
test('apps list', async ({ page }) => {
await navigateTo(page, '/dashboard/apps', 'My Apps')
await screenshot(page, '03-apps-list')
})
test('marketplace', async ({ page }) => {
await navigateTo(page, '/dashboard/marketplace', 'App Store')
await screenshot(page, '04-marketplace')
})
test('cloud storage', async ({ page }) => {
await navigateTo(page, '/dashboard/cloud', 'Cloud')
await screenshot(page, '05-cloud')
})
test('server', async ({ page }) => {
await navigateTo(page, '/dashboard/server', 'Network')
await screenshot(page, '06-server')
})
test('web5', async ({ page }) => {
await navigateTo(page, '/dashboard/web5', 'Web5')
await screenshot(page, '07-web5')
})
test('settings', async ({ page }) => {
await navigateTo(page, '/dashboard/settings', 'Settings')
await screenshot(page, '08-settings')
})
test('chat', async ({ page }) => {
await navigateTo(page, '/dashboard/chat', 'AI Assistant')
await screenshot(page, '09-chat')
})
test('federation', async ({ page }) => {
await navigateTo(page, '/dashboard/server/federation', 'Federation')
await screenshot(page, '10-federation')
})
test('credentials', async ({ page }) => {
await navigateTo(page, '/dashboard/web5/credentials', 'Credentials')
await screenshot(page, '11-credentials')
})
test('system update', async ({ page }) => {
await navigateTo(page, '/dashboard/settings/update', 'System Update')
await screenshot(page, '12-system-update')
})
})