fix: prevent infinite loop on prettyDOM calls (#7250)

tsirlucas · web-flow · commit a3a46a534a88 · 2025-01-16T14:01:44.000+01:00
diff --git a/packages/browser/src/node/providers/playwright.ts b/packages/browser/src/node/providers/playwright.ts
@@ -185,6 +185,12 @@ export class PlaywrightBrowserProvider implements BrowserProvider {
       })
     }
 
+    // unhandled page crashes will hang vitest process
+    page.on('crash', () => {
+      const session = this.project.vitest._browserSessions.getSession(sessionId)
+      session?.reject(new Error('Page crashed when executing tests'))
+    })
+
     return page
   }
 
diff --git a/packages/utils/src/display.ts b/packages/utils/src/display.ts
@@ -73,8 +73,9 @@ export function stringify(
     })
   }
 
+  // Prevents infinite loop https://github.com/vitest-dev/vitest/issues/7249
   return result.length >= MAX_LENGTH && maxDepth > 1
-    ? stringify(object, Math.floor(maxDepth / 2))
+    ? stringify(object, Math.floor(Math.min(maxDepth, Number.MAX_SAFE_INTEGER) / 2), { maxLength, ...options })
     : result
 }
 
diff --git a/test/browser/fixtures/browser-crash/browser-crash.test.ts b/test/browser/fixtures/browser-crash/browser-crash.test.ts
@@ -0,0 +1,12 @@
+import { commands } from '@vitest/browser/context'
+import { it } from 'vitest'
+
+declare module '@vitest/browser/context' {
+  interface BrowserCommands {
+    forceCrash: () => Promise<void>
+  }
+}
+
+it('fails gracefully when browser crashes', async () => {
+  await commands.forceCrash()
+})
diff --git a/test/browser/fixtures/browser-crash/vitest.config.ts b/test/browser/fixtures/browser-crash/vitest.config.ts
@@ -0,0 +1,39 @@
+import { fileURLToPath } from 'node:url'
+import { defineConfig } from 'vitest/config'
+import { instances, provider } from '../../settings'
+import { BrowserCommand } from 'vitest/node'
+
+const forceCrash: BrowserCommand<[]> = async (context) => {
+  const browser = context.context.browser().browserType().name()
+  if (browser === 'chromium') {
+    await context.page.goto('chrome://crash')
+  }
+
+  if (browser === 'firefox') {
+    await context.page.goto('about:crashcontent')
+  }
+
+  throw new Error(`Browser crash not supported for ${browser}`)
+}
+
+export default defineConfig({
+  cacheDir: fileURLToPath(new URL("./node_modules/.vite", import.meta.url)),
+  test: {
+    browser: {
+      commands: { forceCrash },
+      enabled: true,
+      provider,
+      instances: instances.map(instance => ({
+        ...instance,
+        context: {
+          actionTimeout: 500,
+        },
+      })),
+    },
+    expect: {
+      poll: {
+        timeout: 500,
+      },
+    },
+  },
+})
diff --git a/test/browser/specs/browser-crash.test.ts b/test/browser/specs/browser-crash.test.ts
@@ -0,0 +1,17 @@
+import { expect, test } from 'vitest'
+import { instances, provider, runBrowserTests } from './utils'
+
+// TODO handle webdriverio. Currently they
+// expose no trustable way to detect browser crashes.
+test.runIf(provider === 'playwright')('fails gracefully when browser crashes', async () => {
+  const { stderr } = await runBrowserTests({
+    root: './fixtures/browser-crash',
+    reporters: [['verbose', { isTTY: false }]],
+    browser: {
+      // webkit has no support for simulating browser crash
+      instances: instances.filter(item => item.name !== 'webkit'),
+    },
+  })
+
+  expect(stderr).contains('Page crashed when executing tests')
+})
diff --git a/test/browser/test/__snapshots__/utils.test.ts.snap b/test/browser/test/__snapshots__/utils.test.ts.snap
@@ -35,3 +35,13 @@ exports[`prints the element with attributes 1`] = `
   </div>
 </body>"
 `;
+
+exports[`should handle DOM content bigger than maxLength 1`] = `
+"<body>
+  <div>
+    <div>
+      <div … />
+    </div>
+  </div>
+</body>..."
+`;
diff --git a/test/browser/test/utils.test.ts b/test/browser/test/utils.test.ts
@@ -37,3 +37,18 @@ test('prints the element with attributes', async () => {
 
   expect(await commands.stripVTControlCharacters(prettyDOM())).toMatchSnapshot()
 })
+
+test('should handle DOM content bigger than maxLength', async () => {
+  const depth = 200
+  const maxContent = 150
+
+  const openingTags = '<div>'.repeat(depth)
+  const closingTags = '</div>'.repeat(depth)
+  const domString = `${openingTags}${closingTags}`
+
+  const parentDiv = document.createElement('div')
+  parentDiv.innerHTML = domString
+
+  document.body.appendChild(parentDiv)
+  expect(await commands.stripVTControlCharacters(prettyDOM(undefined, maxContent))).toMatchSnapshot()
+})

Original file line number	Diff line number	Diff line change
`@@ -185,6 +185,12 @@ export class PlaywrightBrowserProvider implements BrowserProvider {`
`185`	`185`	`})`
`186`	`186`	`}`
`187`	`187`
	`188`	`+ // unhandled page crashes will hang vitest process`
	`189`	`+ page.on('crash', () => {`
	`190`	`+ const session = this.project.vitest._browserSessions.getSession(sessionId)`
	`191`	`+ session?.reject(new Error('Page crashed when executing tests'))`
	`192`	`+ })`
	`193`	`+`
`188`	`194`	`return page`
`189`	`195`	`}`
`190`	`196`
Original file line number	Diff line number	Diff line change
`@@ -73,8 +73,9 @@ export function stringify(`
`73`	`73`	`})`
`74`	`74`	`}`
`75`	`75`
	`76`	`+ // Prevents infinite loop https://github.com/vitest-dev/vitest/issues/7249`
`76`	`77`	`return result.length >= MAX_LENGTH && maxDepth > 1`
`77`		`- ? stringify(object, Math.floor(maxDepth / 2))`
	`78`	`+ ? stringify(object, Math.floor(Math.min(maxDepth, Number.MAX_SAFE_INTEGER) / 2), { maxLength, ...options })`
`78`	`79`	`: result`
`79`	`80`	`}`
`80`	`81`