Attach a stable testid to default baseElement

package.json

@@ -83,6 +83,7 @@
     "@types/react-dom": "^19.0.0",
     "@vitejs/plugin-react": "^4.3.3",
     "@vitest/browser-playwright": "^4.0.0-beta.15",
+    "@vitest/utils": "^4.0.17",
     "bumpp": "^9.4.2",
     "changelogithub": "^0.13.9",
     "eslint": "^9.8.0",

src/pure.tsx

@@ -1,11 +1,16 @@
 import type { Locator, LocatorSelectors, PrettyDOMOptions } from 'vitest/browser'
-import { page, utils } from 'vitest/browser'
+import { page, server, utils } from 'vitest/browser'
 import React from 'react'
 import type { Container } from 'react-dom/client'
 import ReactDOMClient from 'react-dom/client'
+import { nanoid } from '@vitest/utils/helpers'
 
 const { debug, getElementLocatorSelectors } = utils
 
+function getTestIdAttribute() {
+  return server.config.browser.locators.testIdAttribute
+}
+
 let activeActs = 0
 
 function setActEnvironment(env: boolean | undefined): void {
@@ -74,6 +79,9 @@ export async function render(
     // default to document.body instead of documentElement to avoid output of potentially-large
     // head elements (such as JSS style blocks) in debug output
     baseElement = document.body
+    if (!document.body.hasAttribute(getTestIdAttribute())) {
+      document.body.setAttribute(getTestIdAttribute(), nanoid())
+    }
   }
 
   if (!container) {

test/render.test.tsx

@@ -49,3 +49,26 @@ test('waits for suspended boundaries', async ({ onTestFinished }) => {
   await result
   expect(page.getByText('Hello Vitest')).toBeInTheDocument()
 })
+
+test('should use default testid as the root selector', async () => {
+  const stuff = document.createElement('div')
+  stuff.textContent = 'foo'
+  document.body.appendChild(stuff)
+
+  const screen = await render(<div>Render</div>)
+  const selector = page.elementLocator(screen.baseElement).selector
+
+  expect(selector).toMatch(/^internal:testid=\[[^\]]*\]$/)
+})
+
+test('should not override testid attribute if already set', async () => {
+  document.body.setAttribute('data-testid', 'custom-id')
+  const stuff = document.createElement('div')
+  stuff.textContent = 'foo'
+  document.body.appendChild(stuff)
+
+  const screen = await render(<div>Render</div>)
+  const selector = page.elementLocator(screen.baseElement).selector
+
+  expect(selector).toBe(`internal:testid=[data-testid="custom-id"s]`)
+})