Try to improve e2e test flake in FF

[david-crespo]

No description provided.

[vercel]

The latest updates on your projects. Learn more about Vercel for GitHub.

Project	Deployment	Preview	Updated (UTC)
console	Ready	Preview	Oct 24, 2025 4:37pm

[david-crespo]

The firewall rules one passed 2 out of 3 times, though interestingly when it failed, it failed one line earlier than usual.

[david-crespo]

Claude cleverly points out, based on the effect the sleeps had, that it is probably the Enter keypress here that must somehow be bubbling up to the full form somehow. I see in the Playwright traces from the failures in CI that the test is failing because the form is being submitted early and closing, so the next form field we try to interact with is no longe present.

console/test/e2e/firewall-rules.e2e.ts

Lines 455 to 470 in f9854c6

	// add a new ICMP protocol filter with type 3 and code 0
	await selectOption(page, 'Protocol filters', 'ICMP')
	await page.getByRole('combobox', { name: 'ICMP Type' }).fill('3')
	await page.getByRole('combobox', { name: 'ICMP Type' }).press('Enter')
	await page.getByRole('textbox', { name: 'ICMP Code' }).fill('0')
	await page.getByRole('button', { name: 'Add protocol' }).click()
	// targets default vpc
	// screen.getByRole('cell', { name: 'vpc' })
	// screen.getByRole('cell', { name: 'default' })
	// update name
	await page.getByRole('textbox', { name: 'Name' }).fill('new-rule-name')
	// add host filter
	await selectOption(page, 'Host type', 'VPC subnet')

[david-crespo]

I think it's likely that this is in fact a race in Headless's handling of the enter keypress in the combobox, but Claude's proposed solution doesn't work because we actually need that event to bubble and be turned by Headless into a form submission when the combobox list is closed. We are reworking this form at some point, which will probably eliminate the immediate problem, but if there's a bug inside Combobox we're just kicking the can if we don't fix it.

console/app/ui/lib/Combobox.tsx

Lines 215 to 225 in f9854c6

	onKeyDown={(e) => {
	// If the caller is using onEnter to override enter behavior, preventDefault
	// in order to prevent the containing form from being submitted too. We don't
	// need to do this when the combobox is open because that enter keypress is
	// already handled internally (selects the highlighted item). So we only do
	// this when the combobox is closed.
	if (e.key === 'Enter' && onEnter && !open) {
	e.preventDefault()
	onEnter(e)
	}
	}}

[david-crespo]

15f98f2 doesn't solve it: it passed CI 3 of 4 times, and the failing run 3 had a really weird failure on an unrelated test:

    Test timeout of 60000ms exceeded.

    Error: page.waitForEvent: Test timeout of 60000ms exceeded.
    =========================== logs ===========================
    waiting for event "filechooser"
    ============================================================

       at utils.ts:233

      231 |   size: 'large' | 'small' = 'large'
      232 | ) {
    > 233 |   const fileChooserPromise = page.waitForEvent('filechooser')
          |                                   ^
      234 |   await inputLocator.click({ force: true })
      235 |   const fileChooser = await fileChooserPromise
      236 |   await fileChooser.setFiles({
        at chooseFile (/Users/runner/work/console/console/test/e2e/utils.ts:233:35)
        at addTlsCert (/Users/runner/work/console/console/test/e2e/utils.ts:262:9)
        at /Users/runner/work/console/console/test/e2e/silos.e2e.ts:364:3

    Error Context: test-results/silos.e2e.ts-form-scrolls--11ad2-eld-on-already-exists-error-firefox-retry2/error-context.md

  1 failed
    [firefox] › test/e2e/silos.e2e.ts:349:1 › form scrolls to name field on already exists error ───

And the pass on run 4 included two failures that look like the original one before eventually succeeding on retry:

  1) [firefox] › test/e2e/firewall-rules.e2e.ts:419:1 › can update firewall rule ───────────────────

    Test timeout of 60000ms exceeded.

    Error: locator.click: Test timeout of 60000ms exceeded.
    Call log:
      - waiting for getByRole('button', { name: 'Add protocol' })
        - locator resolved to <button type="button" class="ox-button active-clicked elevation-1 rounded inline-flex items-center justify-center align-top disabled:cursor-default shrink-0 btn-primary h-8 px-3 text-mono-sm [&>svg]:w-4 focus-visible:outline-accent-secondary overflow-hidden">…</button>
      - attempting click action
        - waiting for element to be visible, enabled and stable
        - element is not stable
      - retrying click action
        - waiting for element to be visible, enabled and stable
      - element was detached from the DOM, retrying


      462 |
      463 |   await page.getByRole('textbox', { name: 'ICMP Code' }).fill('0')
    > 464 |   await page.getByRole('button', { name: 'Add protocol' }).click()
          |                                                            ^
      465 |
      466 |   // update name
      467 |   await page.getByRole('textbox', { name: 'Name' }).fill('new-rule-name')
        at /Users/runner/work/console/console/test/e2e/firewall-rules.e2e.ts:464:60

[david-crespo]

I'm going to merge this because I just saw the form scrolls to name field on already exists error flake on another PR, so at least I didn't cause it here.