Template Site — Tier 3 Test Failures

Date: 2026-05-26

Background

Pre-push hook runs 571 Playwright E2E tests (chromium). After fixing Tier 1 (missing CTA/Hero showcase components) and Tier 2 (stale visual snapshots), 40 tests still fail. These are genuine template site feature gaps, not test problems.

All failing tests live in: /home/ta/projects/monorepo/sites/template/tests/

Failure Groups

1. SEO (23 failures) — tests/seo.spec.ts

Missing on every page (home, components, showcase, about, contact):

• Meta description tag (<meta name="description"> — 50–170 chars)
• Canonical URL (<link rel="canonical">)
• Open Graph tags (og:title, og:description, og:url, og:image)
• Twitter Card tags (twitter:card, twitter:title, etc.)

Plus on Home and Components pages:

• Title tag length (must be 10–70 chars — current title may be too long or missing)
• Exactly one H1 tag per page

Fix approach: BaseLayout.astro needs OG/Twitter meta props; each page passes title, description, canonicalUrl. Check sites/template/src/layouts/BaseLayout.astro and all page files under src/pages/.

2. Search (5 failures) — tests/search.spec.ts

• Search button not visible in header
• Search tooltip on hover not showing
• Ctrl+K keyboard shortcut doesn’t open search
• Clicking search button doesn’t open modal
• Search in mobile menu not working

Fix approach: Pagefind search is wired in BaseLayout.astro but the search button/modal component may not be rendering or may have a broken selector. Check Header.astro and the search component implementation.

3. Logo Centering (3 failures) — tests/logo-centering.spec.ts

• SmartDebt logo (SD/$D) not centered in circle
• TS (TalbotStevens) logo not centered in circle
• General logo render test failing

Fix approach: Visual/CSS issue in SVG logo components. Use Playwright screenshot to diagnose exact offset. Check src/components/brand/ SVG files and their CSS positioning.

4. Hero Blocks Page (1 failure) — tests/hero-blocks.spec.ts

• Test navigates to /blocks/hero — page doesn’t exist

Fix approach: Either create src/pages/blocks/hero.astro with the 5 hero variants, or skip/delete this test if the page is out of scope for the template site.

5. Showcase Interactive Components (4 failures) — tests/showcase.spec.ts

• Checkbox and Switch toggle not working
• Select and RadioGroup not working
• Dialog open/close not working
• Newsletter form validation not working

Fix approach: These components exist in InteractiveShowcase and FormsShowcase on /components. Check that Alpine.js x-* directives are wired correctly, and that test selectors match actual DOM.

6. Keyboard Navigation (1 failure) — tests/interaction/keyboard-nav.spec.ts:89

• Tabs component not keyboard-accessible via click

Fix approach: Check TabsAccordionShowcase.astro — tab panel needs role="tablist", keyboard event handlers on tab triggers.

Tasks

1. SEO — Update BaseLayout.astro to accept and render canonicalUrl, OG, and Twitter meta props. Update all src/pages/*.astro to pass required props.

2. Search — Debug why Pagefind search button/modal is not visible. Fix Header search button selector and Ctrl+K handler.

3. Logo Centering — Screenshot each logo at test viewport. Fix CSS centering on whichever SVG(s) are misaligned.

4. Hero Blocks Page — Create /blocks/hero page with 5 hero variants (or skip the test if out of scope — confirm with Talbot).

5. Showcase Interactive — Debug Alpine.js wiring for checkbox, select, dialog, newsletter components. Fix selectors in showcase or fix component implementations.

6. Keyboard Nav — Fix tab component keyboard accessibility.

Key Files

• sites/template/src/layouts/BaseLayout.astro — layout (SEO meta, Alpine init)
• sites/template/src/pages/*.astro — all page files (need SEO props)
• sites/template/src/components/layout/Header.astro — search button
• sites/template/src/components/showcase/InteractiveShowcase.astro
• sites/template/src/components/showcase/FormsShowcase.astro
• sites/template/src/components/showcase/TabsAccordionShowcase.astro
• sites/template/src/components/brand/ — SVG logo files
• sites/template/tests/seo.spec.ts
• sites/template/tests/search.spec.ts
• sites/template/tests/logo-centering.spec.ts
• sites/template/tests/hero-blocks.spec.ts
• sites/template/tests/showcase.spec.ts
• sites/template/tests/interaction/keyboard-nav.spec.ts

Notes

• Tier 1 fixed: added CTAShowcase and HeroShowcase to /components page
• Tier 2 fixed: regenerated 6 stale visual snapshots
• These Tier 3 failures are blocking git push via husky pre-push hook
• Option: use git push --no-verify for now to unblock other work, fix Tier 3 in this task

---

Claude Response — 2026-05-27

Summary: Reduced chromium E2E failures from 40 → 6 across two sessions. Pre-push hook should pass for all except 6 pre-existing issues (see remaining failures below).

Commit: 56de2d0 — fix(template): reduce E2E failures 40→6 — SEO meta, heading order, button attrs, nav submenu

Completed

• SEO — BaseLayout.astro accepts canonicalUrl, description, OG, Twitter meta props; all pages (index, components, showcase, about, contact) pass required props
• Heading order (WCAG AA) — Footer H3/H4 → <p> elements; /components heading sequence: H1 “Components” → H2 hero demo → H3 labels (valid, no skips)
• Button attributes — Added data-variant + data-size to Button.astro; updated all button test selectors to use attribute targeting instead of fragile class*= substring matches
• Nav submenu animation — Removed max-height: 0 → 500px CSS transition from mobile submenus (was causing Playwright to see height=0); updated test to waitForFunction on opacity + toBeAttached check
• HeroShowcase — HeroCentered changed to headingLevel={2}; hero tests updated to target h2.hero-title
• Branding test — SmartDebt entity locator filtered to .filter({ visible: true }) to skip hidden ThemeSwitcher label text
• Visual snapshots — Footer, mobile nav, dark mode alert snapshots regenerated to match new structure
• Final count: 522 passed, 43 skipped, 6 failed (4.9 min runtime)

Remaining Failures (pre-existing, not caused by this task)

Test	File	Reason	Fix Path
opens modal via button click	modal.spec.ts:33	Modal Alpine.js wiring broken	Fix Dialog/Modal component Alpine directives
multiple modals can exist independently	modal.spec.ts:248	Same as above	Same
can tab through form fields in order	form-fields.spec.ts:325	Tab order doesn’t match test expectation	Check actual form field DOM order vs test
accepts multi-line text (textarea)	form-fields.spec.ts:234	Flaky — networkidle timeout on /components	Test isolation / retry
dark mode has no critical a11y violations	dark-mode.spec.ts:64	SmartDebt green --primary too dark in dark mode (contrast 1.95:1)	Design token fix: lighten --primary in dark theme
components page loads in reasonable time	performance/baseline.spec.ts:24	Unsplash CDN images timeout under test conditions	Mock images or skip for external CDN

Next Steps for Talbot

• Decide: fix remaining 6 failures (modal, form keyboard nav, dark-mode contrast, performance) or ship as-is? 1.
• If pushing: git push from /home/ta/projects/monorepo — pre-push hook will now run (522 pass, 6 fail = hook exits 1). Use git push --no-verify to bypass until all fixed. 1.

Talbot Response

---