Skip to content

Commit c2f2542

Browse files
author
Jacek
committed
test(e2e): add detailed form interaction diagnostics for 16.2.0
1 parent 6b7cf6a commit c2f2542

1 file changed

Lines changed: 68 additions & 38 deletions

File tree

‎integration/tests/cache-components.test.ts‎

Lines changed: 68 additions & 38 deletions
Original file line numberDiff line numberDiff line change
@@ -42,61 +42,91 @@ testAgainstRunningApps({ withEnv: [appConfigs.envs.withEmailCodes], withPattern:
4242
test('auth() in server component works when signed in', async ({ page, context }) => {
4343
const u = createTestUtils({ app, page, context });
4444

45+
// Collect console errors and network failures
46+
const consoleErrors: string[] = [];
47+
const networkErrors: string[] = [];
48+
page.on('console', msg => {
49+
if (msg.type() === 'error') consoleErrors.push(msg.text());
50+
});
51+
page.on('requestfailed', req => {
52+
networkErrors.push(`${req.method()} ${req.url()} - ${req.failure()?.errorText}`);
53+
});
54+
4555
// Sign in first
4656
await u.po.signIn.goTo();
47-
48-
// Diagnostic: check for duplicate DOM elements (Activity component issue)
49-
const identifierInputs = await page.locator('input[name=identifier]').count();
50-
console.log(`[DIAG] identifier inputs in DOM: ${identifierInputs}`);
5157
console.log(`[DIAG] URL after goTo sign-in: ${page.url()}`);
5258

53-
await u.po.signIn.signInWithEmailAndInstantPassword({
54-
email: fakeUser.email,
55-
password: fakeUser.password,
56-
waitForSession: false,
59+
// Check form state before interaction
60+
const identifierInput = page.locator('input[name=identifier]');
61+
const isIdentifierVisible = await identifierInput.isVisible();
62+
const isIdentifierEnabled = await identifierInput.isEnabled();
63+
console.log(`[DIAG] identifier visible: ${isIdentifierVisible}, enabled: ${isIdentifierEnabled}`);
64+
65+
// Fill identifier and check if password field appears
66+
await identifierInput.fill(fakeUser.email);
67+
const passwordInput = page.locator('input[name=password]');
68+
try {
69+
await passwordInput.waitFor({ state: 'visible', timeout: 5000 });
70+
console.log('[DIAG] password field appeared after filling identifier');
71+
} catch {
72+
console.log('[DIAG] password field did NOT appear after 5s');
73+
// Capture what the form looks like
74+
const formHTML = await page.locator('.cl-signIn-root').innerHTML();
75+
console.log('[DIAG] sign-in form HTML:', formHTML.substring(0, 3000));
76+
}
77+
78+
// Fill password and check Continue button
79+
const isPasswordVisible = await passwordInput.isVisible();
80+
console.log(`[DIAG] password visible: ${isPasswordVisible}`);
81+
if (isPasswordVisible) {
82+
await passwordInput.fill(fakeUser.password, { force: true });
83+
}
84+
85+
const continueBtn = page.getByRole('button', { name: 'Continue', exact: true });
86+
const isContinueVisible = await continueBtn.isVisible();
87+
const isContinueEnabled = await continueBtn.isEnabled();
88+
console.log(`[DIAG] continue button visible: ${isContinueVisible}, enabled: ${isContinueEnabled}`);
89+
90+
// Track API calls during sign-in
91+
const apiCalls: string[] = [];
92+
page.on('response', res => {
93+
if (res.url().includes('clerk') || res.url().includes('sign_in')) {
94+
apiCalls.push(`${res.status()} ${res.url().split('?')[0]}`);
95+
}
5796
});
5897

59-
// Diagnostic: capture state after clicking Continue but before waiting for session
60-
const diagAfterSubmit = await page.evaluate(() => {
98+
// Click continue
99+
await continueBtn.click();
100+
101+
// Wait a few seconds for the sign-in to process
102+
await page.waitForTimeout(5000);
103+
104+
const diagAfterWait = await page.evaluate(() => {
61105
return {
62106
url: window.location.href,
63-
clerkDefined: typeof window.Clerk !== 'undefined',
64107
clerkLoaded: !!(window as any).Clerk?.loaded,
65-
clerkVersion: (window as any).Clerk?.version,
66108
hasSession: !!(window as any).Clerk?.session,
67109
hasUser: !!(window as any).Clerk?.user,
68-
sessionId: (window as any).Clerk?.session?.id ?? null,
69110
cookies: document.cookie,
70-
identifierInputCount: document.querySelectorAll('input[name=identifier]').length,
71-
signInRootCount: document.querySelectorAll('.cl-signIn-root').length,
72-
activityElements: document.querySelectorAll('[data-activity]').length,
73-
hiddenElements: document.querySelectorAll('[hidden]').length,
111+
signInCardClass: document.querySelector('.cl-cardBox')?.className ?? 'NOT_FOUND',
74112
};
75113
});
76-
console.log('[DIAG] State after submit:', JSON.stringify(diagAfterSubmit, null, 2));
114+
console.log('[DIAG] State 5s after click:', JSON.stringify(diagAfterWait, null, 2));
115+
console.log('[DIAG] API calls:', JSON.stringify(apiCalls));
116+
console.log('[DIAG] Console errors:', JSON.stringify(consoleErrors));
117+
console.log('[DIAG] Network errors:', JSON.stringify(networkErrors));
77118

78-
// Now wait for session with extended timeout and more diagnostics
119+
// Now wait for session
79120
try {
80-
await page.waitForFunction(
81-
() => !!window.Clerk?.session,
82-
{ timeout: 15_000 },
83-
);
121+
await page.waitForFunction(() => !!window.Clerk?.session, { timeout: 10_000 });
84122
} catch {
85-
// Capture state at timeout for debugging
86-
const diagAtTimeout = await page.evaluate(() => {
87-
return {
88-
url: window.location.href,
89-
clerkDefined: typeof window.Clerk !== 'undefined',
90-
clerkLoaded: !!(window as any).Clerk?.loaded,
91-
hasSession: !!(window as any).Clerk?.session,
92-
hasUser: !!(window as any).Clerk?.user,
93-
clerkStatus: (window as any).Clerk?.status,
94-
cookies: document.cookie,
95-
bodyHTML: document.body.innerHTML.substring(0, 2000),
96-
};
97-
});
98-
console.log('[DIAG] State at TIMEOUT:', JSON.stringify(diagAtTimeout, null, 2));
99-
throw new Error(`waitForSession timed out. Diagnostics logged above.`);
123+
const finalState = await page.evaluate(() => ({
124+
url: window.location.href,
125+
hasSession: !!(window as any).Clerk?.session,
126+
cookies: document.cookie,
127+
}));
128+
console.log('[DIAG] FINAL state at timeout:', JSON.stringify(finalState));
129+
throw new Error('waitForSession timed out');
100130
}
101131

102132
await u.po.expect.toBeSignedIn();

0 commit comments

Comments
 (0)