LoginForm: restore proper <label> elements + update e2e tests to the single-step flow
The local-mode LoginForm had drifted to using styled <div> elements as labels. That's an a11y regression — screen readers can't associate the label text with the input, and it broke every e2e sign-in helper because playwright's getByLabel needs a real <label htmlFor="…"> (or aria-label) association. Restore proper <label htmlFor="email"|"password"> with matching id="…" on the inputs; keeps the current design comp untouched. The tests were also written for an OLDER two-step flow — enter email → click "Continue with work email" → enter password → click "Sign in". The current form is single-step (both fields, one Sign in click). Update the shared signIn helper in every spec (p0-p8 + visual) to match, and switch the label selector to "Email address" so it matches the newly restored <label> text. Drop the stale a11y assertion in p6 that expected the two-step button. Also refresh the marketing landing check in p0-shell.spec.ts:20-22 — "agentic systems" was in the H1 in an older copy pass; today's H1 is "Deploy agents at any scale." Update the selector. Together this unblocks ~30 of the 32 e2e failures; the remaining handful are downstream product/test drift that will need per-test attention.
This commit is contained in:
@@ -43,8 +43,14 @@ export function LoginForm() {
|
|||||||
|
|
||||||
<form onSubmit={signIn} className="flex flex-col gap-3.5">
|
<form onSubmit={signIn} className="flex flex-col gap-3.5">
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-[7px] text-xs font-semibold text-[#b5b5bd]">Email address</div>
|
<label
|
||||||
|
htmlFor="email"
|
||||||
|
className="mb-[7px] block text-xs font-semibold text-[#b5b5bd]"
|
||||||
|
>
|
||||||
|
Email address
|
||||||
|
</label>
|
||||||
<input
|
<input
|
||||||
|
id="email"
|
||||||
name="email"
|
name="email"
|
||||||
type="email"
|
type="email"
|
||||||
required
|
required
|
||||||
@@ -55,11 +61,14 @@ export function LoginForm() {
|
|||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<div className="mb-[7px] flex items-center">
|
<div className="mb-[7px] flex items-center">
|
||||||
<span className="text-xs font-semibold text-[#b5b5bd]">Password</span>
|
<label htmlFor="password" className="text-xs font-semibold text-[#b5b5bd]">
|
||||||
|
Password
|
||||||
|
</label>
|
||||||
<span className="flex-1" />
|
<span className="flex-1" />
|
||||||
<span className="cursor-pointer text-xs text-coral-light">Forgot?</span>
|
<span className="cursor-pointer text-xs text-coral-light">Forgot?</span>
|
||||||
</div>
|
</div>
|
||||||
<input
|
<input
|
||||||
|
id="password"
|
||||||
name="password"
|
name="password"
|
||||||
type="password"
|
type="password"
|
||||||
required
|
required
|
||||||
|
|||||||
@@ -8,8 +8,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: import("@playwright/test").Page) {
|
async function signIn(page: import("@playwright/test").Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
@@ -19,7 +18,7 @@ test("unauthenticated visitors see the marketing landing", async ({ page }) => {
|
|||||||
await page.goto("/");
|
await page.goto("/");
|
||||||
// "/" rewrites to the public marketing site for logged-out visitors.
|
// "/" rewrites to the public marketing site for logged-out visitors.
|
||||||
await expect(
|
await expect(
|
||||||
page.getByRole("heading", { name: /agentic systems/i }),
|
page.getByRole("heading", { name: /deploy agents at any scale/i }),
|
||||||
).toBeVisible();
|
).toBeVisible();
|
||||||
// Sign-in is a link from the marketing nav.
|
// Sign-in is a link from the marketing nav.
|
||||||
await page.getByRole("link", { name: "Sign in" }).first().click();
|
await page.getByRole("link", { name: "Sign in" }).first().click();
|
||||||
@@ -28,8 +27,7 @@ test("unauthenticated visitors see the marketing landing", async ({ page }) => {
|
|||||||
|
|
||||||
test("wrong password shows an error and stays on login", async ({ page }) => {
|
test("wrong password shows an error and stays on login", async ({ page }) => {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill("wrong-password");
|
await page.getByLabel("Password").fill("wrong-password");
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
// Next.js's route announcer is also role="alert"; scope to the form's.
|
// Next.js's route announcer is also role="alert"; scope to the form's.
|
||||||
|
|||||||
@@ -9,8 +9,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -10,8 +10,7 @@ const GATED_PROMPT = "email the CEO [[scenario:gated-email]]";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -8,8 +8,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -11,8 +11,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -8,8 +8,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -9,8 +9,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
@@ -34,7 +33,6 @@ async function expectClean(page: Page, context: string) {
|
|||||||
|
|
||||||
test("login page is clean", async ({ page }) => {
|
test("login page is clean", async ({ page }) => {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await expect(page.getByRole("button", { name: /Continue with work email/ })).toBeVisible();
|
|
||||||
await expectClean(page, "login");
|
await expectClean(page, "login");
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
@@ -8,8 +8,7 @@ const OWNER_PASSWORD = "e2e-password";
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
await expect(page.getByRole("heading", { name: "Clawmates" })).toBeVisible();
|
||||||
|
|||||||
@@ -16,8 +16,7 @@ const SCREENSHOT = {
|
|||||||
|
|
||||||
async function signIn(page: Page) {
|
async function signIn(page: Page) {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await page.getByLabel("Email").fill(OWNER_EMAIL);
|
await page.getByLabel("Email address").fill(OWNER_EMAIL);
|
||||||
await page.getByRole("button", { name: /Continue with work email/ }).click();
|
|
||||||
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
await page.getByLabel("Password").fill(OWNER_PASSWORD);
|
||||||
await page.getByRole("button", { name: "Sign in" }).click();
|
await page.getByRole("button", { name: "Sign in" }).click();
|
||||||
// Wait for the real workspace home — the login page also has a lowercase
|
// Wait for the real workspace home — the login page also has a lowercase
|
||||||
@@ -30,7 +29,6 @@ async function signIn(page: Page) {
|
|||||||
|
|
||||||
test("login page looks right @visual", async ({ page }) => {
|
test("login page looks right @visual", async ({ page }) => {
|
||||||
await page.goto("/login");
|
await page.goto("/login");
|
||||||
await expect(page.getByRole("button", { name: /Continue with work email/ })).toBeVisible();
|
|
||||||
await expect(page).toHaveScreenshot("login.png", SCREENSHOT);
|
await expect(page).toHaveScreenshot("login.png", SCREENSHOT);
|
||||||
});
|
});
|
||||||
|
|
||||||
|
|||||||
Reference in New Issue
Block a user