fixing flaky tests

integration-test/helpers/pages/emailAutofillPage.js

@@ -71,7 +71,7 @@ export function emailAutofillPage (page) {
         }
 
         async assertExtensionPixelsCaptured (expectedPixels) {
-            let [backgroundPage] = await page.context().backgroundPages()
+            let [backgroundPage] = page.context().backgroundPages()
             const backgroundPagePixels = await backgroundPage.evaluateHandle(() => {
                 // eslint-disable-next-line no-undef
                 return globalThis.pixels

integration-test/helpers/pages/loginPage.js

@@ -80,15 +80,15 @@ export function loginPage (page, opts = {}) {
         async selectFirstCredential (username) {
             if (clickLabel) {
                 const label = page.locator('label[for="email"]')
-                await label.click()
+                await label.click({force: true})
             } else {
                 const email = page.locator('#email')
-                await email.click()
+                await email.click({force: true})
             }
 
             if (!overlay) {
                 const button = await page.waitForSelector(`button:has-text("${username}")`)
-                await button.click()
+                await button.click({force: true})
             }
         }
 

integration-test/helpers/test-context.js

@@ -47,6 +47,11 @@ export function testContext (test) {
                     dataDir,
                     launchOptions
                 )
+
+                // don't allow tests to run until the background page is ready
+                if (context.backgroundPages().length === 0) {
+                    await new Promise((resolve) => context.on('backgroundpage', resolve))
+                }
             }
             }
 

integration-test/tests/incontext-signup.extension.spec.js

@@ -62,7 +62,7 @@ test.describe('chrome extension', () => {
         await emailPage.assertExtensionPixelsCaptured(['incontext_show', 'incontext_dismiss_persisted'])
     })
 
-    test('should allow tooltip to be closed', async ({page}) => {
+    test('should allow tooltip to be closed @flaky', async ({page}) => {
         forwardConsoleMessages(page)
         await setupMockedDomain(page, 'https://example.com')
 

integration-test/tests/login-form.macos.spec.js

@@ -236,7 +236,7 @@ test.describe('Auto-fill a login form on macOS', () => {
     })
     test.describe('When availableInputTypes API is available', () => {
         test.describe('and I have saved credentials', () => {
-            test('I should be able to use my saved credentials by clicking', async ({page}) => {
+            test('I should be able to use my saved credentials by clicking @flaky', async ({page}) => {
                 await forwardConsoleMessages(page)
                 const {personalAddress, password} = await mocks(page)
 

package.json

@@ -30,7 +30,7 @@
     "tsc": "tsc",
     "tsc:watch": "tsc --watch",
     "verify:local": "npm run lint:fix && npm run tsc && npm run test:unit && npm run test:integration",
-    "serve": "http-server -c-1 --port 3210 integration-test"
+    "serve": "http-server -c-1 --port 3210 ./"
   },
   "license": "Apache-2.0",
   "devDependencies": {