fix: use click+type instead of fill for Angular login form compatibility (#202)

page.fill() sets values programmatically but Angular reactive forms
require real keystroke events (keydown/keyup) to update their internal
model. After fill+submit, the form appeared submitted but credentials
were not recognized, leaving the browser on /login.

Switch to click() + fill('') + type(value, {delay: 20}) pattern which
generates real key events that Angular processes correctly.

Author: sigvardt

packages/core/src/__tests__/auth/loginSelectors.test.ts

@@ -7,13 +7,14 @@ vi.mock('../../errors.js', async () => {
   return actual;
 });
 
-type MockPage = Pick<Page, '$' | 'fill' | 'click'>;
+type MockPage = Pick<Page, '$' | 'fill' | 'click' | 'type'>;
 
 function createMockPage(): MockPage {
   return {
     $: vi.fn(),
     fill: vi.fn(),
     click: vi.fn(),
+    type: vi.fn(),
   } as unknown as MockPage;
 }
 
@@ -115,15 +116,20 @@ describe('loginSelectors', () => {
     vi.mocked(page.$).mockResolvedValue(handle);
     vi.mocked(page.fill).mockResolvedValue(undefined);
     vi.mocked(page.click).mockResolvedValue(undefined);
+    vi.mocked(page.type).mockResolvedValue(undefined);
 
     const result = await loginSelectorsModule.tryAutoFill(page as Page, {
       email: 'test@example.com',
       password: 'secret',
     });
 
     expect(result).toBe(true);
-    expect(page.fill).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="username"]', 'test@example.com');
-    expect(page.fill).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="password"]', 'secret');
+    // Each field: click(selector) + fill(selector, '') + type(selector, value)
+    expect(page.click).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="username"]');
+    expect(page.type).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="username"]', 'test@example.com', { delay: 20 });
+    expect(page.click).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="password"]');
+    expect(page.type).toHaveBeenCalledWith('[data-e2e-id="loginForm"] input[name="password"]', 'secret', { delay: 20 });
+    // Submit button click
     expect(page.click).toHaveBeenCalledWith('[data-e2e-id="loginScreenLoginButton"]');
   });
 
@@ -132,15 +138,14 @@ describe('loginSelectors', () => {
     const handle = { description: 'element handle' } as unknown as ElementHandle;
     const warnSpy = vi.spyOn(console, 'warn').mockImplementation(() => undefined);
     vi.mocked(page.$).mockResolvedValue(handle);
-    vi.mocked(page.fill).mockRejectedValue(new Error('fill failed'));
+    vi.mocked(page.click).mockRejectedValue(new Error('click failed'));
 
     const result = await loginSelectorsModule.tryAutoFill(page as Page, {
       email: 'test@example.com',
     });
 
     expect(result).toBe(false);
-    expect(page.fill).toHaveBeenCalledTimes(4);
-    expect(page.click).not.toHaveBeenCalled();
+    expect(page.click).toHaveBeenCalledTimes(4);
     expect(console.warn).toHaveBeenCalled();
     warnSpy.mockRestore();
   });

packages/core/src/auth/loginSelectors.ts

@@ -160,7 +160,13 @@ async function tryFillByCandidates(
 ): Promise<boolean> {
   for (const candidate of candidates) {
     try {
-      await page.fill(candidate.selector, value);
+      // Use click + clear + type instead of fill — Angular reactive forms
+      // need real keystroke events to update their internal model.
+      // page.fill() dispatches input/change but skips keydown/keyup
+      // which some SPA frameworks rely on for validation.
+      await page.click(candidate.selector);
+      await page.fill(candidate.selector, '');
+      await page.type(candidate.selector, value, { delay: 20 });
       return true;
     } catch (error) {
       const normalized = normalizeError(error, 'Field fill failed', candidate.selector);