fix(e2e): resolve Phase 1 spec runtime issues (UX-1208, UX-1198)

Three runtime failures in enterprise CI run 24562051088:

1. AclPage.submitForm() waits for HTTP 2xx/3xx via page.waitForResponse,
   so acl-create-error.spec.ts tests that mock an HTTP 4xx/5xx response
   or abort the request hang until the 60s timeout. Added:
   AclPage.submitFormExpectingError(kind: 'http-error' | 'network-abort')
   — mirrors submitForm but matches status >= 400, or skips the response
   wait entirely for aborted requests. Zero change to existing callers.

2. acl-principal-special-chars.spec.ts + acl-delete-multi-match.spec.ts
   used getByTestId('search-field-input').getByRole('textbox').fill(...)
   for the ACLs page SearchField. Redpanda UI's SearchField does not
   expose an inner textbox role — existing acl.spec.ts calls .fill()
   directly on the testid'd wrapper. Removed the .getByRole sub-selector.

No new RPC mocking logic; all fixes are in the test infrastructure
(page-object + selector usage). No backend or frontend source changes.

bun run type:check clean.

Author: c-julin

frontend/tests/test-variant-console/acls/acl-create-error.spec.ts

@@ -47,7 +47,7 @@ test.describe('ACL creation - Connect RPC error handling', () => {
     await aclPage.setPrincipal(`err-${Date.now()}`);
     await aclPage.setHost('*');
     await aclPage.configureRules([MINIMAL_RULE]);
-    await aclPage.submitForm();
+    await aclPage.submitFormExpectingError('http-error');
 
     // Structural: mock fails the create, so page must stay on /create and NOT reach detail.
     await expect(page).toHaveURL(/\/security\/acls\/create/);
@@ -70,7 +70,7 @@ test.describe('ACL creation - Connect RPC error handling', () => {
     await aclPage.setPrincipal(`timeout-${Date.now()}`);
     await aclPage.setHost('*');
     await aclPage.configureRules([MINIMAL_RULE]);
-    await aclPage.submitForm();
+    await aclPage.submitFormExpectingError('network-abort');
 
     // Structural: URL still /create.
     await expect(page).toHaveURL(/\/security\/acls\/create/);

frontend/tests/test-variant-console/acls/acl-delete-multi-match.spec.ts

@@ -65,7 +65,8 @@ test.describe
 
       // Verify all ACLs for this principal are gone from the ACLs list.
       await page.goto('/security/acls', { waitUntil: 'domcontentloaded' });
-      await page.getByTestId('search-field-input').getByRole('textbox').fill(principal);
+      // Match acl.spec.ts pattern — `.fill()` on the testid'd wrapper, no role sub-selector.
+      await page.getByTestId('search-field-input').fill(principal);
       await expect(page.getByTestId(`acl-list-item-${principal}-*`)).not.toBeVisible({ timeout: 5000 });
       await expect(page.getByTestId(`acl-list-item-${principal}-1.1.1.1`)).not.toBeVisible({ timeout: 5000 });
 

frontend/tests/test-variant-console/acls/acl-principal-special-chars.spec.ts

@@ -45,9 +45,11 @@ test.describe('ACL principal URL encoding', () => {
     // Structural: URL correctly encodes the ":" as %3A.
     expect(page.url()).toContain(encoded);
 
-    // Return to list and search for the row.
+    // Return to list and search for the row. Match existing acl.spec.ts pattern —
+    // `.fill()` on the testid'd SearchField wrapper directly, not via .getByRole('textbox')
+    // (the Redpanda UI SearchField does not expose an inner textbox role).
     await page.goto('/security/acls', { waitUntil: 'domcontentloaded' });
-    await page.getByTestId('search-field-input').getByRole('textbox').fill(principal);
+    await page.getByTestId('search-field-input').fill(principal);
     await expect(page.getByTestId(`acl-list-item-${principal}-*`)).toBeVisible({ timeout: 5000 });
 
     // Click the row → detail URL again round-trips with encoded principal.

frontend/tests/test-variant-console/utils/acl-page.ts

@@ -336,6 +336,40 @@ export class AclPage {
     await responsePromise; // Wait for API response
   }
 
+  /**
+   * Form submission for tests that mock an ACL RPC error.
+   * - kind: 'http-error' → waits for a 4xx/5xx response (e.g., when using route.fulfill)
+   * - kind: 'network-abort' → does NOT wait for a response (e.g., when using route.abort),
+   *   because an aborted request never produces a response frame
+   */
+  async submitFormExpectingError(kind: 'http-error' | 'network-abort' = 'http-error') {
+    const submitButton = this.page.getByTestId('submit-acl-button').first();
+    await submitButton.waitFor({ state: 'visible' });
+    await submitButton.scrollIntoViewIfNeeded();
+
+    if (kind === 'network-abort') {
+      await submitButton.click();
+      return;
+    }
+
+    const responsePromise = this.page.waitForResponse(
+      (response) => {
+        const url = response.url();
+        const method = response.request().method();
+        const status = response.status();
+        return (
+          (url.includes('ACLService/CreateACL') || url.includes('ACLService/DeleteACLs')) &&
+          method === 'POST' &&
+          status >= 400
+        );
+      },
+      { timeout: 60_000 }
+    );
+
+    await submitButton.click();
+    await responsePromise;
+  }
+
   /**
    * Summary validation methods
    */