Fix firefox test flake on firewall rule targets (#2705)

fix firefox test flake on firewall rule targets

Author: david-crespo

playwright.config.ts

@@ -19,10 +19,10 @@ export default {
   retries: process.env.CI ? 2 : 0,
   // use all available cores (2) on github actions. default is 50%, use that locally
   workers: process.env.CI ? '100%' : undefined,
-  timeout: 2 * 60 * 1000, // 2 minutes, surely overkill
+  timeout: 60 * 1000, // 1 minute
   fullyParallel: true,
   use: {
-    trace: 'on-all-retries',
+    trace: process.env.CI ? 'on-first-retry' : 'retain-on-failure',
     baseURL: 'http://localhost:4009',
   },
   projects: [

test/e2e/firewall-rules.e2e.ts

@@ -8,7 +8,7 @@
 
 import { expect, test, type Locator, type Page } from '@playwright/test'
 
-import { clickRowAction, expectRowVisible, selectOption } from './utils'
+import { clickRowAction, expectRowVisible, selectOption, sleep } from './utils'
 
 const defaultRules = ['allow-internal-inbound', 'allow-ssh', 'allow-icmp']
 
@@ -168,6 +168,11 @@ test('firewall rule form targets table', async ({ page }) => {
   await targetVpcNameField.fill('abc')
   // hit enter one time to choose the custom value
   await targetVpcNameField.press('Enter')
+
+  // pressing enter twice here in quick succession causes test flake in firefox
+  // specifically and this fixes it
+  await sleep(300)
+
   // hit enter a second time to submit the subform
   await targetVpcNameField.press('Enter')
   await expectRowVisible(targets, { Type: 'vpc', Value: 'abc' })

test/e2e/utils.ts

@@ -69,10 +69,11 @@ export async function expectRowVisible(
 ) {
   // wait for header and rows to avoid flake town
   const headerLoc = table.locator('thead >> role=cell')
-  await headerLoc.first().waitFor() // nth=0 bc error if there's more than 1
+  // unlike most things, waitFor has no timeout by default
+  await headerLoc.first().waitFor({ timeout: 10_000 }) // nth=0 bc error if there's more than 1
 
   const rowLoc = table.locator('tbody >> role=row')
-  await rowLoc.first().waitFor()
+  await rowLoc.first().waitFor({ timeout: 10_000 })
 
   async function getRows() {
     // need to pull header keys every time because the whole page can change