cypress: decide Clerk OTP step origin after email submit

frontend/cypress/support/commands.ts

@@ -53,21 +53,50 @@ Cypress.Commands.add("loginWithClerkOtp", () => {
   // Cypress cannot reliably drive Clerk modal/iframe flows.
   cy.visit("/sign-in");
 
-  // Clerk SignIn can render on our app origin (localhost) or redirect to Clerk-hosted UI,
+  const emailSelector =
-  // depending on config/version. Handle both.
+    'input[type="email"], input[name="identifier"], input[autocomplete="email"]';
-  const fillOtpFlow = (email: string, otp: string) => {
+  const otpSelector =
-    cy.get(
+    'input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]';
-      'input[type="email"], input[name="identifier"], input[autocomplete="email"]',
+  const continueSelector = 'button[type="submit"], button';
-      { timeout: 20_000 },
+
-    )
+  const fillEmailStep = (email: string) => {
+    cy.get(emailSelector, { timeout: 20_000 })
       .first()
       .clear()
       .type(email, { delay: 10 });
 
-    cy.get('button[type="submit"], button')
+    cy.get(continueSelector)
       .contains(/continue|sign in|send|next/i)
       .click({ force: true });
+  };
 
+  const fillOtpAndSubmit = (otp: string) => {
+    cy.get(otpSelector, { timeout: 20_000 }).first().clear().type(otp, { delay: 10 });
+
+    cy.get("body").then(($body) => {
+      const hasSubmit = $body
+        .find(continueSelector)
+        .toArray()
+        .some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
+      if (hasSubmit) {
+        cy.get(continueSelector)
+          .contains(/verify|continue|sign in|confirm/i)
+          .click({ force: true });
+      }
+    });
+  };
+
+  // Clerk SignIn can start on our app origin and then redirect to Clerk-hosted UI.
+  // We do email step first, then decide where the OTP step lives based on the *current* origin.
+  fillEmailStep(opts.email);
+
+  cy.location("origin", { timeout: 20_000 }).then((origin) => {
+    const current = normalizeOrigin(origin);
+    if (current === opts.clerkOrigin) {
+      cy.origin(
+        opts.clerkOrigin,
+        { args: { otp: opts.otp } },
+        ({ otp }) => {
           cy.get(
             'input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]',
             { timeout: 20_000 },
@@ -87,19 +116,10 @@ Cypress.Commands.add("loginWithClerkOtp", () => {
                 .click({ force: true });
             }
           });
-  };
-
-  cy.location("origin", { timeout: 20_000 }).then((origin) => {
-    if (origin === opts.clerkOrigin) {
-      cy.origin(
-        opts.clerkOrigin,
-        { args: { email: opts.email, otp: opts.otp } },
-        ({ email, otp }) => {
-          fillOtpFlow(email, otp);
         },
       );
     } else {
-      fillOtpFlow(opts.email, opts.otp);
+      fillOtpAndSubmit(opts.otp);
     }
   });
 });