Omar SobhandClaude Fable 5
dab08e47aa
Rail logo (coral paw-print brand tile) and 58px agent tiles updated in workspace-home, chat-welcome, computer-home (the last also shows the panel as a right overlay — chat no longer shifts). Fixed the visual signIn helper: it matched the login page's lowercase 'clawmates' heading and could screenshot mid-navigation, so workspace-home captured the login page — now it waits for navigation off /login and matches 'Clawmates' exact. Avatar unit test updated for the 58px/rounded-20 rail tile. Full suite (37) green. Co-Authored-By: Claude Fable 5 <[email protected]>
102 lines
3.7 KiB
TypeScript
102 lines
3.7 KiB
TypeScript
import { expect, test, type Page } from "@playwright/test";
|
|
|
|
// Visual-regression lock (plan P6): pixel baselines for the §2 design
|
|
// system on the primary surfaces. Baselines are PER-PLATFORM (rendering
|
|
// differs across OSes); CI excludes @visual until linux baselines are
|
|
// generated there — see ci.yml. Regenerate intentionally with:
|
|
// npx playwright test visual --update-snapshots
|
|
|
|
const OWNER_EMAIL = "[email protected]";
|
|
const OWNER_PASSWORD = "e2e-password";
|
|
|
|
const SCREENSHOT = {
|
|
animations: "disabled" as const,
|
|
maxDiffPixelRatio: 0.02,
|
|
};
|
|
|
|
async function signIn(page: Page) {
|
|
await page.goto("/login");
|
|
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
|
await page.getByRole("button", { name: "Sign in" }).click();
|
|
// Wait for the real workspace home — the login page also has a lowercase
|
|
// "clawmates" heading, so confirm navigation and match case-sensitively.
|
|
await page.waitForURL((url) => !url.pathname.endsWith("/login"));
|
|
await expect(
|
|
page.getByRole("heading", { name: "Clawmates", exact: true }),
|
|
).toBeVisible();
|
|
}
|
|
|
|
test("login page looks right @visual", async ({ page }) => {
|
|
await page.goto("/login");
|
|
await expect(page.getByRole("button", { name: "Sign in" })).toBeVisible();
|
|
await expect(page).toHaveScreenshot("login.png", SCREENSHOT);
|
|
});
|
|
|
|
test("workspace home looks right @visual", async ({ page }) => {
|
|
await signIn(page);
|
|
await expect(page).toHaveScreenshot("workspace-home.png", SCREENSHOT);
|
|
});
|
|
|
|
test("chat welcome and computer panel look right @visual", async ({
|
|
page,
|
|
}) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: /Scout/ }).click();
|
|
await expect(page).toHaveURL(/\/claws\/.+\/chat\//);
|
|
const before = page.url();
|
|
await page.getByRole("button", { name: "New" }).click();
|
|
await page.waitForURL((url) => url.toString() !== before);
|
|
await expect(
|
|
page.getByRole("heading", { name: /Hi, I'm Scout/ }),
|
|
).toBeVisible();
|
|
await expect(page).toHaveScreenshot("chat-welcome.png", SCREENSHOT);
|
|
|
|
await page.getByRole("button", { name: "Computer" }).click();
|
|
const panel = page.getByRole("complementary", { name: "Computer" });
|
|
await expect(panel.getByText(/Scout's Computer/)).toBeVisible();
|
|
await expect(page).toHaveScreenshot("computer-home.png", SCREENSHOT);
|
|
});
|
|
|
|
test("credits page looks right @visual", async ({ page }) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "Credits" }).click();
|
|
await expect(page.getByText("Available credits")).toBeVisible();
|
|
await expect(page).toHaveScreenshot("credits.png", {
|
|
...SCREENSHOT,
|
|
// Balance and usage are live numbers — mask them, lock the layout.
|
|
// Balance and the whole usage card are live (and the runway line
|
|
// appears/disappears with burn) — mask them, lock the layout.
|
|
mask: [
|
|
page.getByTestId("credit-balance"),
|
|
page.getByTestId("usage-card"),
|
|
],
|
|
});
|
|
});
|
|
|
|
test("marketing landing looks right @visual", async ({ page, context }) => {
|
|
await context.clearCookies();
|
|
await page.goto("/");
|
|
await expect(
|
|
page.getByRole("heading", { name: /AI coworkers/ }),
|
|
).toBeVisible();
|
|
await page.evaluate(() =>
|
|
Promise.allSettled(document.getAnimations().map((a) => a.finished)),
|
|
);
|
|
await expect(page).toHaveScreenshot("marketing.png", {
|
|
...SCREENSHOT,
|
|
fullPage: true,
|
|
});
|
|
});
|
|
|
|
test("team org chart looks right @visual", async ({ page }) => {
|
|
await signIn(page);
|
|
await page.getByRole("link", { name: "Team", exact: true }).click();
|
|
await page.getByRole("tab", { name: "Claw org chart" }).click();
|
|
await expect(page.getByRole("tab", { name: "Claw org chart" })).toHaveAttribute(
|
|
"aria-selected",
|
|
"true",
|
|
);
|
|
await expect(page).toHaveScreenshot("team-orgchart.png", SCREENSHOT);
|
|
});
|