make retry actually wait for the specified duration

test/e2e/app-dir/navigation/navigation.test.ts

@@ -893,7 +893,7 @@ describe('app dir - navigation', () => {
         .elementByCss("[href='/metadata-await-promise/nested']")
         .click()
 
-      await waitFor(resolveMetadataDuration)
+      await waitFor(resolveMetadataDuration + 500)
 
       expect(await browser.elementById('page-content').text()).toBe('Content')
       expect(await browser.elementByCss('title').text()).toBe('Async Title')
@@ -912,9 +912,11 @@ describe('app dir - navigation', () => {
         .click()
 
       if (!isNextDev) {
-        expect(await browser.elementByCss('title').text()).toBe('Async Title')
-
-        await waitFor(resolveMetadataDuration + 500)
+        expect(
+          await browser
+            .waitForElementByCss('title', resolveMetadataDuration + 500)
+            .text()
+        ).toBe('Async Title')
       }
 
       expect(await browser.elementById('page-content').text()).toBe('Content')

test/lib/browsers/playwright.ts

@@ -348,7 +348,7 @@ export class Playwright extends BrowserInterface {
   }
 
   elementByCss(selector: string) {
-    return this.waitForElementByCss(selector)
+    return this.waitForElementByCss(selector, 5_000)
   }
 
   elementById(sel) {
@@ -427,7 +427,7 @@ export class Playwright extends BrowserInterface {
     )
   }
 
-  waitForElementByCss(selector, timeout?: number) {
+  waitForElementByCss(selector, timeout = 10_000) {
     return this.chain(() => {
       return page
         .waitForSelector(selector, { timeout, state: 'attached' })

test/lib/next-test-utils.ts

@@ -795,7 +795,7 @@ export class File {
 
 export async function retry<T>(
   fn: () => T | Promise<T>,
-  duration: number = 3000,
+  duration: number = 5000,
   interval: number = 500,
   description?: string
 ): Promise<T> {
@@ -805,22 +805,30 @@ export async function retry<T>(
     )
   }
 
-  for (let i = duration; i >= 0; i -= interval) {
+  const startTime = Date.now()
+  const maxEndTime = startTime + duration
+  while (true) {
+    const callStartTime = Date.now()
     try {
       return await fn()
     } catch (err) {
-      if (i === 0) {
+      const callEndTime = Date.now()
+      const callDuration = callEndTime - callStartTime
+
+      if (callEndTime >= maxEndTime) {
         console.error(
           `Failed to retry${
             description ? ` ${description}` : ''
           } within ${duration}ms`
         )
         throw err
+      } else {
+        console.log(
+          `Retrying${description ? ` ${description}` : ''} in ${interval}ms`
+        )
+
+        await waitFor(Math.max(interval - callDuration, 0))
       }
-      console.log(
-        `Retrying${description ? ` ${description}` : ''} in ${interval}ms`
-      )
-      await waitFor(interval)
     }
   }
 }