cypress: decide Clerk OTP step origin after email submit
This commit is contained in:
@@ -53,53 +53,73 @@ Cypress.Commands.add("loginWithClerkOtp", () => {
|
|||||||
// Cypress cannot reliably drive Clerk modal/iframe flows.
|
// Cypress cannot reliably drive Clerk modal/iframe flows.
|
||||||
cy.visit("/sign-in");
|
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()
|
.first()
|
||||||
.clear()
|
.clear()
|
||||||
.type(email, { delay: 10 });
|
.type(email, { delay: 10 });
|
||||||
|
|
||||||
cy.get('button[type="submit"], button')
|
cy.get(continueSelector)
|
||||||
.contains(/continue|sign in|send|next/i)
|
.contains(/continue|sign in|send|next/i)
|
||||||
.click({ force: true });
|
.click({ force: true });
|
||||||
|
};
|
||||||
|
|
||||||
cy.get(
|
const fillOtpAndSubmit = (otp: string) => {
|
||||||
'input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]',
|
cy.get(otpSelector, { timeout: 20_000 }).first().clear().type(otp, { delay: 10 });
|
||||||
{ timeout: 20_000 },
|
|
||||||
)
|
|
||||||
.first()
|
|
||||||
.clear()
|
|
||||||
.type(otp, { delay: 10 });
|
|
||||||
|
|
||||||
cy.get("body").then(($body) => {
|
cy.get("body").then(($body) => {
|
||||||
const hasSubmit = $body
|
const hasSubmit = $body
|
||||||
.find('button[type="submit"], button')
|
.find(continueSelector)
|
||||||
.toArray()
|
.toArray()
|
||||||
.some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
|
.some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
|
||||||
if (hasSubmit) {
|
if (hasSubmit) {
|
||||||
cy.get('button[type="submit"], button')
|
cy.get(continueSelector)
|
||||||
.contains(/verify|continue|sign in|confirm/i)
|
.contains(/verify|continue|sign in|confirm/i)
|
||||||
.click({ force: true });
|
.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) => {
|
cy.location("origin", { timeout: 20_000 }).then((origin) => {
|
||||||
if (origin === opts.clerkOrigin) {
|
const current = normalizeOrigin(origin);
|
||||||
|
if (current === opts.clerkOrigin) {
|
||||||
cy.origin(
|
cy.origin(
|
||||||
opts.clerkOrigin,
|
opts.clerkOrigin,
|
||||||
{ args: { email: opts.email, otp: opts.otp } },
|
{ args: { otp: opts.otp } },
|
||||||
({ email, otp }) => {
|
({ otp }) => {
|
||||||
fillOtpFlow(email, otp);
|
cy.get(
|
||||||
|
'input[autocomplete="one-time-code"], input[name*="code"], input[inputmode="numeric"]',
|
||||||
|
{ timeout: 20_000 },
|
||||||
|
)
|
||||||
|
.first()
|
||||||
|
.clear()
|
||||||
|
.type(otp, { delay: 10 });
|
||||||
|
|
||||||
|
cy.get("body").then(($body) => {
|
||||||
|
const hasSubmit = $body
|
||||||
|
.find('button[type="submit"], button')
|
||||||
|
.toArray()
|
||||||
|
.some((el) => /verify|continue|sign in|confirm/i.test(el.textContent || ""));
|
||||||
|
if (hasSubmit) {
|
||||||
|
cy.get('button[type="submit"], button')
|
||||||
|
.contains(/verify|continue|sign in|confirm/i)
|
||||||
|
.click({ force: true });
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
);
|
);
|
||||||
} else {
|
} else {
|
||||||
fillOtpFlow(opts.email, opts.otp);
|
fillOtpAndSubmit(opts.otp);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
});
|
});
|
||||||
|
|||||||
Reference in New Issue
Block a user