diff --git a/playground/assets/__tests__/assets.spec.ts b/playground/assets/__tests__/assets.spec.ts
index 5325f873ea6600..ddc2d28d270999 100644
--- a/playground/assets/__tests__/assets.spec.ts
+++ b/playground/assets/__tests__/assets.spec.ts
@@ -408,12 +408,13 @@ test('inline style test', async () => {
 if (!isBuild) {
   test('@import in html style tag hmr', async () => {
     await untilUpdated(() => getColor('.import-css'), 'rgb(0, 136, 255)')
+    const loadPromise = page.waitForEvent('load')
     editFile(
       './css/import.css',
       (code) => code.replace('#0088ff', '#00ff88'),
       true,
     )
-    await page.waitForNavigation()
+    await loadPromise
     await untilUpdated(() => getColor('.import-css'), 'rgb(0, 255, 136)')
   })
 }
diff --git a/playground/css/postcss-caching/css.spec.ts b/playground/css/postcss-caching/css.spec.ts
index 5f2893f0873e44..842d2726590d31 100644
--- a/playground/css/postcss-caching/css.spec.ts
+++ b/playground/css/postcss-caching/css.spec.ts
@@ -33,7 +33,7 @@ test.runIf(isServe)('postcss config', async () => {
 
     blueApp = await startServer(blueAppDir)
 
-    await page.goto(`http://localhost:${port}`)
+    await page.goto(`http://localhost:${port}`, { waitUntil: 'load' })
     const blueA = await page.$('.postcss-a')
     expect(await getColor(blueA)).toBe('blue')
     const blueB = await page.$('.postcss-b')
@@ -44,9 +44,9 @@ test.runIf(isServe)('postcss config', async () => {
     await blueApp.close()
     blueApp = null
 
-    const navigationPromise = page.waitForNavigation() // wait for server restart auto reload
+    const loadPromise = page.waitForEvent('load') // wait for server restart auto reload
     greenApp = await startServer(greenAppDir)
-    await navigationPromise
+    await loadPromise
 
     const greenA = await page.$('.postcss-a')
     expect(await getColor(greenA)).toBe('black')
diff --git a/playground/hmr/__tests__/hmr.spec.ts b/playground/hmr/__tests__/hmr.spec.ts
index a7fbbad80ae90e..559dcc95b1cb7f 100644
--- a/playground/hmr/__tests__/hmr.spec.ts
+++ b/playground/hmr/__tests__/hmr.spec.ts
@@ -229,7 +229,7 @@ if (!isBuild) {
   })
 
   test('not loaded dynamic import', async () => {
-    await page.goto(viteTestUrl + '/counter/index.html')
+    await page.goto(viteTestUrl + '/counter/index.html', { waitUntil: 'load' })
 
     let btn = await page.$('button')
     expect(await btn.textContent()).toBe('Counter 0')
@@ -237,8 +237,9 @@ if (!isBuild) {
     expect(await btn.textContent()).toBe('Counter 1')
 
     // Modifying `index.ts` triggers a page reload, as expected
+    const indexTsLoadPromise = page.waitForEvent('load')
     editFile('counter/index.ts', (code) => code)
-    await page.waitForNavigation()
+    await indexTsLoadPromise
     btn = await page.$('button')
     expect(await btn.textContent()).toBe('Counter 0')
 
@@ -251,13 +252,12 @@ if (!isBuild) {
     // (Note that, a dynamic import that is never loaded and that does not
     // define `accept.module.hot.accept` may wrongfully trigger a full page
     // reload, see discussion at #7561.)
+    const depTsLoadPromise = page.waitForEvent('load', { timeout: 1000 })
     editFile('counter/dep.ts', (code) => code)
-    try {
-      await page.waitForNavigation({ timeout: 1000 })
-    } catch (err) {
-      const errMsg = 'page.waitForNavigation: Timeout 1000ms exceeded.'
-      expect(err.message.slice(0, errMsg.length)).toBe(errMsg)
-    }
+    await expect(depTsLoadPromise).rejects.toThrow(
+      /page\.waitForEvent: Timeout \d+ms exceeded while waiting for event "load"/,
+    )
+
     btn = await page.$('button')
     expect(await btn.textContent()).toBe('Counter 1')
   })
@@ -653,10 +653,12 @@ if (!isBuild) {
   test('css in html hmr', async () => {
     await page.goto(viteTestUrl)
     expect(await getBg('.import-image')).toMatch('icon')
-    await page.goto(viteTestUrl + '/foo/')
+    await page.goto(viteTestUrl + '/foo/', { waitUntil: 'load' })
     expect(await getBg('.import-image')).toMatch('icon')
+
+    const loadPromise = page.waitForEvent('load')
     editFile('index.html', (code) => code.replace('url("./icon.png")', ''))
-    await page.waitForNavigation()
+    await loadPromise
     expect(await getBg('.import-image')).toMatch('')
   })
 
@@ -664,10 +666,12 @@ if (!isBuild) {
     await page.goto(viteTestUrl + '/counter/index.html')
     let btn = await page.$('button')
     expect(await btn.textContent()).toBe('Counter 0')
+
+    const loadPromise = page.waitForEvent('load')
     editFile('counter/index.html', (code) =>
       code.replace('Counter', 'Compteur'),
     )
-    await page.waitForNavigation()
+    await loadPromise
     btn = await page.$('button')
     expect(await btn.textContent()).toBe('Compteur 0')
   })
@@ -701,18 +705,20 @@ if (!isBuild) {
     const unImportCode = `// ${importCode}`
     const timeout = 2000
 
-    await page.goto(viteTestUrl + '/missing-import/index.html')
+    await page.goto(viteTestUrl + '/missing-import/index.html', {
+      waitUntil: 'load',
+    })
 
     await untilBrowserLogAfter(async () => {
-      const navigationPromise = page.waitForNavigation({ timeout })
+      const loadPromise = page.waitForEvent('load', { timeout })
       editFile(file, (code) => code.replace(importCode, unImportCode))
-      await navigationPromise
+      await loadPromise
     }, 'missing test')
 
     await untilBrowserLogAfter(async () => {
-      const navigationPromise = page.waitForNavigation({ timeout })
+      const loadPromise = page.waitForEvent('load', { timeout })
       editFile(file, (code) => code.replace(unImportCode, importCode))
-      await navigationPromise
+      await loadPromise
     }, /500/)
   })
 
diff --git a/playground/ssr-html/__tests__/ssr-html.spec.ts b/playground/ssr-html/__tests__/ssr-html.spec.ts
index f01565679680c2..50b6e9540426bc 100644
--- a/playground/ssr-html/__tests__/ssr-html.spec.ts
+++ b/playground/ssr-html/__tests__/ssr-html.spec.ts
@@ -48,10 +48,13 @@ describe.runIf(isServe)('hmr', () => {
     await page.goto(url)
     const el = await page.$('.virtual')
     expect(await el.textContent()).toBe('[success]')
+
+    const loadPromise = page.waitForEvent('load')
     editFile('src/importedVirtual.js', (code) =>
       code.replace('[success]', '[wow]'),
     )
-    await page.waitForNavigation()
+    await loadPromise
+
     await untilUpdated(async () => {
       const el = await page.$('.virtual')
       return await el.textContent()