Some checks failed
Main Confidence / confidence (push) Failing after 45s
## Summary Implements Spec 216 for the public website homepage in `apps/website`. This reworks the homepage into the required narrative flow: - hero with one dominant CTA, one secondary CTA, product-near visual, and bounded trust subclaims - outcome framing section - grouped capability model section - explicit trust block before the final CTA - dated progress teaser backed by changelog entries - final CTA transition to contact It also adds the full spec-kit artifact set for `specs/216-homepage-structure` and updates the smoke suite to prove section order, CTA hierarchy, onward route reachability, and mobile readability. ## Validation - `corepack pnpm build:website` - `cd apps/website && corepack pnpm exec playwright test` ## Notes - Branch: `216-homepage-structure` - Commit: `097f8e70` - Remote branch has been pushed and is ready for review. Co-authored-by: Ahmed Darrazi <ahmed.darrazi@live.de> Reviewed-on: #254
147 lines
5.5 KiB
TypeScript
147 lines
5.5 KiB
TypeScript
import { expect, type Page } from '@playwright/test';
|
|
|
|
export const coreRoutePaths = ['/', '/product', '/trust', '/changelog', '/contact', '/privacy', '/imprint'] as const;
|
|
export const secondaryRoutePaths = ['/legal', '/terms', '/solutions', '/integrations'] as const;
|
|
|
|
export const primaryNavigationLabels = ['Product', 'Trust', 'Changelog', 'Contact'] as const;
|
|
export const hiddenPrimaryNavigationLabels = [
|
|
'Solutions',
|
|
'Integrations',
|
|
'Security & Trust',
|
|
'Resources',
|
|
'Articles',
|
|
] as const;
|
|
|
|
export const footerLabels = ['Product', 'Changelog', 'Trust', 'Privacy', 'Imprint', 'Terms', 'Contact'] as const;
|
|
export const hiddenFooterLabels = ['Resources', 'Articles', 'Security & Trust', 'Contact / Demo'] as const;
|
|
|
|
export async function visitPage(page: Page, path: string): Promise<void> {
|
|
await page.goto(path);
|
|
await expect(page).toHaveURL(new RegExp(path === '/' ? '/?$' : `${path}$`));
|
|
}
|
|
|
|
export async function expectCompatibilityRedirect(page: Page, legacyPath: string, canonicalPath: string): Promise<void> {
|
|
await page.goto(legacyPath);
|
|
await page.waitForURL(new RegExp(canonicalPath === '/' ? '/?$' : `${canonicalPath}$`));
|
|
await expect(page).toHaveURL(new RegExp(canonicalPath === '/' ? '/?$' : `${canonicalPath}$`));
|
|
}
|
|
|
|
export async function expectShell(page: Page, heading: string | RegExp): Promise<void> {
|
|
await expect(page.getByRole('banner')).toBeVisible();
|
|
await expect(page.getByRole('main')).toBeVisible();
|
|
await expect(page.getByRole('contentinfo')).toBeVisible();
|
|
await expect(page.getByRole('heading', { level: 1, name: heading })).toBeVisible();
|
|
}
|
|
|
|
export async function expectPageFamily(page: Page, family: 'content' | 'landing' | 'trust'): Promise<void> {
|
|
await expect(page.locator(`[data-page-family="${family}"]`).first()).toBeVisible();
|
|
}
|
|
|
|
export async function expectPrimaryNavigation(page: Page): Promise<void> {
|
|
const header = page.getByRole('banner');
|
|
|
|
for (const label of primaryNavigationLabels) {
|
|
const link = header.getByRole('link', { name: label, exact: true }).first();
|
|
|
|
await expect(link).toBeVisible();
|
|
await expect(link).toHaveAttribute('data-nav-link');
|
|
}
|
|
|
|
for (const label of hiddenPrimaryNavigationLabels) {
|
|
await expect(header.getByRole('link', { name: label, exact: true })).toHaveCount(0);
|
|
}
|
|
}
|
|
|
|
export async function expectFooterLinks(page: Page): Promise<void> {
|
|
for (const label of footerLabels) {
|
|
await expect(page.getByRole('contentinfo').getByRole('link', { name: label, exact: true })).toBeVisible();
|
|
}
|
|
|
|
for (const label of hiddenFooterLabels) {
|
|
await expect(page.getByRole('contentinfo').getByRole('link', { name: label, exact: true })).toHaveCount(0);
|
|
}
|
|
}
|
|
|
|
export async function openMobileNavigation(page: Page): Promise<void> {
|
|
const menuTrigger = page.getByLabel('Open navigation menu');
|
|
|
|
if (await menuTrigger.isVisible()) {
|
|
await menuTrigger.click();
|
|
}
|
|
}
|
|
|
|
export async function expectDisclosureLayer(page: Page, layer: '1' | '2' | '3'): Promise<void> {
|
|
await expect(page.locator(`[data-disclosure-layer="${layer}"]`).first()).toBeVisible();
|
|
}
|
|
|
|
export async function expectCtaHierarchy(
|
|
page: Page,
|
|
primaryLabel: string | RegExp,
|
|
secondaryLabel: string | RegExp,
|
|
): Promise<void> {
|
|
const main = page.getByRole('main');
|
|
|
|
await expect(main.locator('[data-cta-weight="primary"]').filter({ hasText: primaryLabel }).first()).toBeVisible();
|
|
await expect(
|
|
main.locator('[data-cta-weight="secondary"]').filter({ hasText: secondaryLabel }).first(),
|
|
).toBeVisible();
|
|
}
|
|
|
|
export async function expectNavigationVsCtaDifferentiation(page: Page): Promise<void> {
|
|
const header = page.getByRole('banner');
|
|
|
|
await expect(header.locator('[data-nav-link]').first()).toBeVisible();
|
|
await expect(header.locator('[data-cta-weight="secondary"]').first()).toBeVisible();
|
|
}
|
|
|
|
export async function expectHomepageSectionOrder(page: Page, sections: string[]): Promise<void> {
|
|
const main = page.getByRole('main');
|
|
const sectionElements = main.locator('[data-section]');
|
|
const count = await sectionElements.count();
|
|
const actual: string[] = [];
|
|
|
|
for (let i = 0; i < count; i++) {
|
|
const name = await sectionElements.nth(i).getAttribute('data-section');
|
|
|
|
if (name) {
|
|
actual.push(name);
|
|
}
|
|
}
|
|
|
|
for (let i = 0; i < sections.length; i++) {
|
|
expect(actual.indexOf(sections[i]), `Section "${sections[i]}" should appear in order`).toBeGreaterThanOrEqual(0);
|
|
|
|
if (i > 0) {
|
|
expect(
|
|
actual.indexOf(sections[i]),
|
|
`Section "${sections[i]}" should appear after "${sections[i - 1]}"`,
|
|
).toBeGreaterThan(actual.indexOf(sections[i - 1]));
|
|
}
|
|
}
|
|
}
|
|
|
|
export async function expectProductNearVisual(page: Page): Promise<void> {
|
|
const main = page.getByRole('main');
|
|
|
|
await expect(main.locator('[data-hero-visual] img, [data-hero-visual]').first()).toBeVisible();
|
|
}
|
|
|
|
export async function expectMobileReadability(page: Page): Promise<void> {
|
|
const main = page.getByRole('main');
|
|
|
|
await expect(main).toBeVisible();
|
|
await expect(page.getByRole('banner')).toBeVisible();
|
|
await expect(page.getByRole('contentinfo')).toBeVisible();
|
|
}
|
|
|
|
export async function expectOnwardRouteReachable(page: Page, routes: string[]): Promise<void> {
|
|
const main = page.getByRole('main');
|
|
|
|
for (const route of routes) {
|
|
await expect(
|
|
main.locator(`a[href="${route}"]`).first(),
|
|
`Route "${route}" should be reachable from main content`,
|
|
).toBeVisible();
|
|
}
|
|
}
|