Omar SobhandClaude Opus 4.8
8d9ea7faaa
The live /sign-in is a Clerk-rendered SignInForm (SSR is just a spinner); the
rendered design is the email-first progressive form. Reworked our /login to
match it visually while keeping our real email+password auth underneath.
- Email step: "Sign up with Slack" (cosmetic), OR, Work Email / Phone Number
tabs, work-email field, "Continue with work email →", "Other SSO Options".
Slack / Phone / SSO are cosmetic placeholders we don't support yet.
- Password step: "Continue" reveals the password field + "Sign in" (our actual
POST to /auth/session). A Back link returns to the email step.
- Headline now mirrors WorkClaw ("Multiply your team's brainpower" / "Sign up
to get early access").
- Right panel is now the role-card roster grid (PawPrint avatars, our own
roles) + "The AI crew for your team" + the claws-at-desk art.
- Updated all eight E2E signIn helpers (and the load assertions) for the new
two-step flow: fill Email → Continue → fill Password → Sign in. Labels
(Email/Password) and the "Sign in" button name are preserved.
- A11y: bumped the inactive tab text to full slate (was 3.41:1).
typecheck/lint/build green · p0-shell (full sign-in) green · p6-a11y (login
clean) green · all six @visual baselines green (login regenerated) · deployed
and verified live.
Co-Authored-By: Claude Opus 4.8 <[email protected]>
79 lines
2.8 KiB
TypeScript
79 lines
2.8 KiB
TypeScript
import AxeBuilder from "@axe-core/playwright";
|
|
import { expect, test, type Page } from "@playwright/test";
|
|
|
|
// P6 exit (spec §17): a11y sign-off. Serious and critical axe violations
|
|
// fail the build on every primary surface.
|
|
|
|
const OWNER_EMAIL = "[email protected]";
|
|
const OWNER_PASSWORD = "e2e-password";
|
|
|
|
async function signIn(page: Page) {
|
|
await page.goto("/login");
|
|
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
|
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
|
await page.getByRole("button", { name: "Sign in" }).click();
|
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
|
}
|
|
|
|
async function expectClean(page: Page, context: string) {
|
|
// Route-enter fades opacity; scanning mid-animation reads false
|
|
// contrast failures. Let running animations settle first.
|
|
await page.evaluate(() =>
|
|
Promise.allSettled(document.getAnimations().map((a) => a.finished)),
|
|
);
|
|
const results = await new AxeBuilder({ page }).analyze();
|
|
const blocking = results.violations.filter(
|
|
(v) => v.impact === "serious" || v.impact === "critical",
|
|
);
|
|
expect(
|
|
blocking.map((v) => `${v.id}: ${v.help} (${v.nodes.length} nodes)`),
|
|
`axe violations on ${context}`,
|
|
).toEqual([]);
|
|
}
|
|
|
|
test("login page is clean", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await expect(page.getByRole("button", { name: /Continue with work email/ })).toBeVisible();
|
|
await expectClean(page, "login");
|
|
});
|
|
|
|
test("shell, chat, and computer panel are clean", async ({ page }) => {
|
|
await signIn(page);
|
|
await expectClean(page, "workspace home");
|
|
|
|
await page.getByRole("link", { name: /Scout/ }).click();
|
|
await expect(page).toHaveURL(/\/claws\/.+\/chat\//);
|
|
await expectClean(page, "chat");
|
|
|
|
await page.getByRole("button", { name: "Computer" }).click();
|
|
const panel = page.getByRole("complementary", { name: "Computer" });
|
|
await expect(panel.getByText(/Scout's Computer/)).toBeVisible();
|
|
await expectClean(page, "computer home");
|
|
|
|
await panel.getByRole("button", { name: "Settings" }).click();
|
|
await expect(panel.getByText("Managed by")).toBeVisible();
|
|
await expectClean(page, "settings app");
|
|
});
|
|
|
|
test("global pages are clean", async ({ page }) => {
|
|
await signIn(page);
|
|
for (const [link, marker] of [
|
|
["Skills", /Skill Library/],
|
|
["Approvals", /review/i],
|
|
["Team", /workspace/],
|
|
["Credits", /Available credits/],
|
|
] as const) {
|
|
await page.getByRole("link", { name: link, exact: true }).click();
|
|
await expect(page.getByText(marker).first()).toBeVisible();
|
|
await expectClean(page, link);
|
|
}
|
|
});
|
|
|
|
test("the wizard is clean", async ({ page }) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "New claw" }).click();
|
|
await expect(page.getByText("Create your Claw")).toBeVisible();
|
|
await expectClean(page, "wizard");
|
|
});
|