Janady13/thatstupidcomputer / tests/browser/site.spec.ts

1import { test, expect, type ConsoleMessage, type Page } from '@playwright/test'; 2import AxeBuilder from '@axe-core/playwright'; 3 4// These are authored acceptance checks, not a claim of an executed browser pass. 5// Every inquiry request and Google endpoint is intercepted: this suite sends no email 6// and transmits no analytics. All project details below are synthetic fixture data. 7const brief = { 8 name: 'Acceptance Example', email: 'acceptance@example.invalid', business: 'Synthetic workshop', 9 message: 'Synthetic acceptance fixture for a clearer service website. Do not send email.', 10}; 11const google = /^https:\/\/(?:[^/]+\.)?(?:googletagmanager\.com|google-analytics\.com)\//; 12 13test.beforeEach(async ({ page }) => { 14 await page.route('**/api/demo', route => route.fulfill({ status: 503, contentType: 'application/json', body: JSON.stringify({ ok: false, code: 'test_intercept', message: 'Synthetic request intercepted. No email was sent.' }) })); 15 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: null } }) })); 16 await page.route(google, route => route.abort('blockedbyclient')); 17}); 18 19async function fillBrief(page: Page) { 20 await page.locator('#demo-name').fill(brief.name); 21 await page.locator('#demo-email').fill(brief.email); 22 await page.locator('#demo-business').fill(brief.business); 23 await page.locator('#demo-projectType').selectOption('design'); 24 await page.locator('#demo-message').fill(brief.message); 25 await page.locator('#demo-consent').check(); 26} 27 28async function expectNoHorizontalOverflow(page: Page) { 29 const sizes = await page.evaluate(() => ({ viewport: document.documentElement.clientWidth, content: Math.max(document.documentElement.scrollWidth, document.body.scrollWidth) })); 30 expect(sizes.content, `Document overflow at a ${sizes.viewport}px CSS viewport`).toBeLessThanOrEqual(sizes.viewport + 1); 31} 32 33async function expectAxe(page: Page) { 34 const result = await new AxeBuilder({ page }).withTags(['wcag2a', 'wcag2aa', 'wcag21aa', 'wcag22aa']).analyze(); 35 expect(result.violations).toEqual([]); 36} 37 38test('the illustrated home and complete contact process have no detectable axe failures', async ({ page }) => { 39 await page.goto('/'); 40 await expect(page.getByRole('heading', { level: 1, name: 'Less stupid. More business.' })).toBeVisible(); 41 await expectAxe(page); 42 await page.locator('.hero-demo:visible, .guide-demo:visible').first().click(); 43 await expect(page.locator('#demo-name')).toBeVisible(); 44 await expectAxe(page); 45 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 46 await expect(page.locator('#demo-name')).toBeFocused(); 47 await expect(page.locator('#demo-name')).toHaveAttribute('aria-invalid', 'true'); 48 await expect(page.locator('#demo-name-error')).toBeVisible(); 49 await expectAxe(page); 50}); 51 52test('room navigation, Back, Forward, Escape and focus return form a complete path', async ({ page }) => { 53 await page.goto('/'); 54 const roomLink = page.locator('.room-hotspot-board, .room-link-board').first(); 55 // The board shape wraps around the monitor, so click its top-left corner rather than the bounding-box centre. 56 await roomLink.click({ position: { x: 12, y: 12 } }); 57 await expect(page).toHaveURL(/\/services\/$/); 58 await expect(page.locator('h1')).toBeFocused(); 59 await page.getByRole('link', { name: 'Explore website design', exact: true }).click(); 60 await expect(page).toHaveURL(/\/services\/website-design\/$/); 61 await expect(page.getByRole('navigation', { name: 'Breadcrumb', exact: true })).toContainText('Home'); 62 await page.goBack(); 63 await expect(page).toHaveURL(/\/services\/$/); 64 await page.goForward(); 65 await expect(page).toHaveURL(/\/services\/website-design\/$/); 66 await page.keyboard.press('Escape'); 67 await expect(page).toHaveURL(/\/$/); 68 await expect(page.locator('.room-hotspot-board, .room-link-board').first()).toBeFocused(); 69}); 70 71test('all service pages and the direct inquiry route render substantive content', async ({ page }) => { 72 const runtimeErrors: string[] = []; 73 const onPageError = (error: Error) => { runtimeErrors.push(`pageerror: ${error.message}`); }; 74 const onConsole = (message: ConsoleMessage) => { if (message.type() === 'error') runtimeErrors.push(`console.error: ${message.text()}`); }; 75 page.on('pageerror', onPageError); 76 page.on('console', onConsole); 77 const routes = [ 78 ['/services/website-design/', 'A clear idea. A distinctive website.'], 79 ['/services/website-rescue/', 'Your website is acting up. Start here.'], 80 ['/services/search-visibility/', 'Help the right people understand what you do.'], 81 ['/services/website-care/', 'A website needs attention after launch.'], 82 ['/work/', 'You are already looking at a piece of the work.'], 83 ['/process/', 'Good websites start with good questions.'], 84 ['/about/', 'Technology should make your day easier.'], 85 ['/privacy/', 'Share the project. Keep the secrets.'], 86 ]; 87 for (const [path, heading] of routes) { 88 const response = await page.goto(path); 89 expect(response?.status()).toBe(200); 90 await expect(page.getByRole('heading', { level: 1, name: heading, exact: true })).toBeVisible(); 91 await expect(page.locator('.content-section').first()).toBeVisible(); 92 // Wait for route hydration, lazy scene chunks and asset requests, not just SSR text. 93 await page.waitForLoadState('networkidle'); 94 await expectNoHorizontalOverflow(page); 95 expect(runtimeErrors, `Unexpected browser errors on ${path}`).toEqual([]); 96 } 97 // An intentional HTTP 404 can produce a browser resource console error. Keep 98 // JavaScript exception collection active while excluding that expected network log. 99 page.off('console', onConsole); 100 const missing = await page.goto('/this-page-does-not-exist/'); 101 expect(missing?.status()).toBe(404); 102 await expect(page.getByRole('heading', { name: 'The computer misplaced that page.' })).toBeVisible(); 103 await page.waitForLoadState('networkidle'); 104 expect(runtimeErrors).toEqual([]); 105}); 106 107test('provider-specific answers and sources remain readable on the board and on mobile', async ({ page }, testInfo) => { 108 await page.goto('/services/search-visibility/'); 109 for (const name of ['Google Search and Gemini: check the right control', 'ChatGPT: discovery is different from training', 'Claude: search and direct retrieval both matter', 'Perplexity: verify the source, not just the name', 'Does Bing register every backlink?', 'Mistral: three separate crawler roles', 'Grok and DeepSeek: separate documented support from assumptions', 'Does every AI model need the same integration?']) { 110 const heading = page.getByRole('heading', { name, exact: true }); 111 await heading.scrollIntoViewIfNeeded(); 112 await expect(heading).toBeVisible(); 113 await expectNoHorizontalOverflow(page); 114 } 115 const links = page.locator('a[rel="external"]'); 116 expect(await links.count()).toBeGreaterThanOrEqual(11); 117 for (const link of await links.all()) { 118 await link.scrollIntoViewIfNeeded(); 119 await expect(link).toBeVisible(); 120 expect(await link.getAttribute('href')).toMatch(/^https:\/\//); 121 const bounds = await link.boundingBox(); 122 expect(bounds!.x).toBeGreaterThanOrEqual(0); 123 expect(bounds!.x + bounds!.width).toBeLessThanOrEqual(page.viewportSize()!.width + 1); 124 } 125 await expectAxe(page); 126 await page.getByRole('heading', { name: 'ChatGPT: discovery is different from training', exact: true }).scrollIntoViewIfNeeded(); 127 await page.screenshot({ path: testInfo.outputPath('provider-answers.png') }); 128}); 129 130test('the form sends one validated JSON request and accepts only a confirmed response', async ({ page }) => { 131 let requests = 0; 132 let release: () => void = () => {}; 133 const gate = new Promise<void>(resolve => { release = resolve; }); 134 let submitted: Record<string, unknown> | undefined; 135 await page.route('**/api/demo', async route => { 136 requests += 1; submitted = route.request().postDataJSON() as Record<string, unknown>; 137 await gate; 138 await route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, status: 'accepted', requestId: 'synthetic-browser-accepted-01' }) }); 139 }); 140 await page.goto('/contact/'); 141 await fillBrief(page); 142 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 143 try { 144 await expect(page.getByRole('button', { name: 'Sending your request…', exact: true })).toBeDisabled(); 145 await expect.poll(() => requests).toBe(1); 146 expect(submitted).toMatchObject({ ...brief, consent: true, companyWebsite: '', projectType: 'design' }); 147 expect(typeof submitted?.submissionId).toBe('string'); 148 } finally { release(); } 149 await expect(page.getByRole('heading', { name: /Message accepted/ })).toBeVisible(); 150 await expect(page.locator('.form-accepted')).toBeFocused(); 151 expect(requests).toBe(1); 152 const stored = await page.evaluate(() => JSON.stringify({ ...localStorage })); 153 expect(stored).not.toContain(brief.email); 154 expect(stored).not.toContain(brief.message); 155}); 156 157test('field errors keep the draft and return keyboard focus to the rejected field', async ({ page }) => { 158 await page.route('**/api/demo', route => route.fulfill({ status: 400, contentType: 'application/json', body: JSON.stringify({ ok: false, code: 'validation', message: 'Check your email address.', fieldErrors: { email: 'Use an email address where we can reply.' } }) })); 159 await page.goto('/contact/'); await fillBrief(page); 160 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 161 await expect(page.locator('#demo-email')).toBeFocused(); 162 await expect(page.locator('#demo-email-error')).toHaveText('Use an email address where we can reply.'); 163 await expect(page.locator('#demo-message')).toHaveValue(brief.message); 164 await expect(page.locator('.form-accepted')).toHaveCount(0); 165}); 166 167for (const scenario of [ 168 { name: 'unavailable', status: 503, code: 'mail_unavailable', message: 'The message service is temporarily unavailable.' }, 169 { name: 'rate limited', status: 429, code: 'rate_limited', message: 'Please wait a few minutes before trying again.' }, 170 { name: 'delivery uncertain', status: 502, code: 'delivery_unknown', message: 'Acceptance is uncertain. Please avoid submitting again immediately.' }, 171]) test(`a ${scenario.name} response is never presented as acceptance`, async ({ page }) => { 172 await page.route('**/api/demo', route => route.fulfill({ status: scenario.status, contentType: 'application/json', body: JSON.stringify({ ok: false, code: scenario.code, message: scenario.message }) })); 173 await page.goto('/contact/'); await fillBrief(page); 174 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 175 await expect(page.getByRole('alert')).toContainText(scenario.message); 176 await expect(page.locator('#demo-message')).toHaveValue(brief.message); 177 await expect(page.locator('.form-accepted')).toHaveCount(0); 178}); 179 180test('a broken connection preserves details without asserting non-delivery', async ({ page }) => { 181 await page.route('**/api/demo', route => route.abort('connectionfailed')); 182 await page.goto('/contact/'); await fillBrief(page); 183 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 184 await expect(page.getByRole('alert')).toContainText('It may still have been sent'); 185 await expect(page.locator('#demo-message')).toHaveValue(brief.message); 186 await expect(page.locator('.form-accepted')).toHaveCount(0); 187}); 188 189test('HTTP 200 without an accepted receipt never creates a success screen', async ({ page }) => { 190 await page.route('**/api/demo', route => route.fulfill({ status: 200, contentType: 'application/json', body: JSON.stringify({ ok: true, status: 'queued' }) })); 191 await page.goto('/contact/'); await fillBrief(page); 192 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 193 await expect(page.getByRole('alert')).toContainText('could not be confirmed'); 194 await expect(page.locator('.form-accepted')).toHaveCount(0); 195}); 196 197test('consent gates Google loading and never puts inquiry details in analytics', async ({ page }) => { 198 let googleRequests = 0; 199 await page.route('**/api/config', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ analytics: { measurementId: 'G-TEST12345' } }) })); 200 await page.route(google, route => { googleRequests += 1; return route.fulfill({ contentType: 'text/javascript', body: '/* Offline analytics fixture; makes no external requests. */' }); }); 201 await page.route('**/api/demo', route => route.fulfill({ contentType: 'application/json', body: JSON.stringify({ ok: true, status: 'accepted', requestId: 'synthetic-receipt-deduplication-01' }) })); 202 await page.goto('/'); 203 await expect(page.getByRole('button', { name: 'Allow analytics', exact: true })).toBeVisible(); 204 expect(googleRequests).toBe(0); 205 await expect(page.locator('script[src*="googletagmanager"]')).toHaveCount(0); 206 await page.getByRole('button', { name: 'Decline analytics', exact: true }).click(); 207 await page.locator('.hero-demo:visible, .guide-demo:visible').first().click(); 208 expect(googleRequests).toBe(0); 209 await page.getByRole('button', { name: 'Privacy preferences', exact: true }).click(); 210 await page.getByRole('button', { name: 'Allow analytics', exact: true }).click(); 211 await expect.poll(() => googleRequests).toBe(1); 212 await fillBrief(page); 213 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 214 await expect(page.locator('.form-accepted')).toBeVisible(); 215 // The synthetic API repeats one receipt across a remount: the same accepted request 216 // must not become a second conversion, and the receipt must never leave the app. 217 await page.locator('.form-accepted .button').click(); 218 await page.locator('.hero-demo:visible, .guide-demo:visible').first().click(); 219 await fillBrief(page); 220 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 221 await expect(page.locator('.form-accepted')).toBeVisible(); 222 const layer = await page.evaluate(() => (window as unknown as { tscAnalyticsDataLayer?: unknown[][] }).tscAnalyticsDataLayer?.map(entry => Array.from(entry)) ?? []); 223 const serialized = JSON.stringify(layer); 224 for (const privateValue of [brief.name, brief.email, brief.business, brief.message, 'synthetic-receipt-deduplication-01']) expect(serialized).not.toContain(privateValue); 225 const pageViews = layer.filter(entry => entry[0] === 'event' && entry[1] === 'page_view'); 226 expect(pageViews.map(entry => (entry[2] as { page_location: string }).page_location)).toEqual(expect.arrayContaining([ 227 'https://thatstupidcomputer.com/', 'https://thatstupidcomputer.com/contact/', 228 ])); 229 for (const event of layer.filter(entry => entry[0] === 'event')) { 230 const location = new URL((event[2] as { page_location: string }).page_location); 231 expect(location.origin).toBe('https://thatstupidcomputer.com'); 232 expect(location.search).toBe(''); 233 expect(location.hash).toBe(''); 234 } 235 expect(layer.filter(entry => entry[0] === 'event' && entry[1] === 'generate_lead')).toHaveLength(1); 236 await page.getByRole('button', { name: 'Privacy preferences', exact: true }).click(); 237 await page.getByRole('button', { name: 'Withdraw analytics consent', exact: true }).click(); 238 expect(await page.evaluate(() => (window as unknown as Record<string, unknown>)['ga-disable-G-TEST12345'])).toBe(true); 239}); 240 241test('motion can be paused and operating-system reduced motion is respected', async ({ page }) => { 242 await page.emulateMedia({ reducedMotion: 'no-preference' }); 243 await page.goto('/'); 244 const pause = page.getByRole('button', { name: 'Pause motion', exact: true }); 245 await expect(pause).toBeEnabled(); await pause.click(); 246 await expect(page.getByRole('button', { name: 'Play motion', exact: true })).toHaveAttribute('aria-pressed', 'true'); 247 await page.getByRole('button', { name: 'Play motion', exact: true }).click(); 248 await expect(page.getByRole('button', { name: 'Pause motion', exact: true })).toHaveAttribute('aria-pressed', 'false'); 249 await page.emulateMedia({ reducedMotion: 'reduce' }); 250 await expect(page.getByRole('button', { name: 'Reduced motion', exact: true })).toBeDisabled(); 251 await expect(page.locator('.site-shell')).toHaveClass(/motion-paused/); 252 await expect(page.locator('.hero-demo:visible, .guide-demo:visible').first()).toBeVisible(); 253}); 254 255test('320px reflow and deliberately enlarged text preserve the inquiry path', async ({ page }) => { 256 for (const width of [320, 390, 768, 1440]) { 257 await page.setViewportSize({ width, height: 900 }); 258 await page.goto('/'); await expectNoHorizontalOverflow(page); 259 await page.locator('.hero-demo:visible, .guide-demo:visible').first().click(); 260 await expect(page.locator('#demo-name')).toBeVisible(); 261 await expectNoHorizontalOverflow(page); 262 } 263 await page.setViewportSize({ width: 390, height: 844 }); await page.goto('/contact/'); 264 // A bounded text enlargement probe, distinct from actual browser UI zoom testing. 265 await page.evaluate(() => { 266 const targets = Array.from(document.querySelectorAll<HTMLElement>('h1,h2,p,label,button,input,textarea,select,a,summary')); 267 const values = targets.map(element => [element, parseFloat(getComputedStyle(element).fontSize)] as const); 268 for (const [element, size] of values) element.style.fontSize = `${size * 2}px`; 269 }); 270 await expectNoHorizontalOverflow(page); 271 await fillBrief(page); 272 await expect(page.getByRole('button', { name: 'Get my demo', exact: true })).toBeEnabled(); 273}); 274 275test('optional animation failures do not interrupt navigation or the inquiry form', async ({ page }) => { 276 await page.route(/\/assets\/RoomScene-[^/]+\.js(?:\?.*)?$/, route => route.abort('failed')); 277 await page.route('**/animation/mobile/**/scene.json', route => route.abort('failed')); 278 await page.route('**/animation/mobile/**/motion.json', route => route.abort('failed')); 279 await page.goto('/'); 280 await page.locator('.hero-demo:visible, .guide-demo:visible').first().click(); 281 await expect(page.locator('#demo-name')).toBeVisible(); 282 await fillBrief(page); 283 await page.getByRole('button', { name: 'Get my demo', exact: true }).click(); 284 await expect(page.getByRole('alert')).toContainText('Synthetic request intercepted'); 285}); 286 287test('native HTML navigation and submission work with JavaScript disabled', async ({ browser, baseURL }) => { 288 const context = await browser.newContext({ javaScriptEnabled: false, baseURL, viewport: { width: 390, height: 844 } }); 289 let nativeSubmission = false; 290 await context.route('**/api/demo', async route => { 291 const body = new URLSearchParams(route.request().postData() ?? ''); 292 nativeSubmission = body.get('consent') === 'true' && body.get('name') === brief.name && body.get('submissionId') === ''; 293 await route.fulfill({ contentType: 'text/html', body: '<!doctype html><html lang="en"><head><title>Native form fixture</title></head><body><main><h1>Native submission intercepted</h1><p>No email was sent.</p></main></body></html>' }); 294 }); 295 const plain = await context.newPage(); 296 try { 297 await plain.goto('/'); 298 await plain.locator('.home-overview').getByRole('link', { name: 'I need a new website', exact: true }).click(); 299 await expect(plain).toHaveURL(/\/services\/website-design\/$/); 300 await plain.locator('.page-callout .button').click(); 301 await fillBrief(plain); 302 await plain.getByRole('button', { name: 'Get my demo', exact: true }).click(); 303 await expect(plain.getByRole('heading', { name: 'Native submission intercepted', exact: true })).toBeVisible(); 304 expect(nativeSubmission).toBe(true); 305 } finally { await context.close(); } 306}); 307