test: migrate webdriver callers to next.browser (vercel#93941)

### What?

Migrate remaining direct `next-webdriver` test callers that have a
`NextInstance` to `next.browser()`, and expose the shared `Playwright`
browser type from `e2e-utils`.

### Why?

`NextInstance.browser` should be the supported browser-opening interface
for test fixtures, with `next-webdriver` kept as the private
implementation detail.

### How?

Updated affected development, e2e, and production tests to call
`next.browser()` directly, passing `baseUrl` where tests intentionally
target a manually spawned or proxied server. Shared helpers now receive
browser callbacks from the test context, and browser types import
`Playwright` from `e2e-utils` instead of deriving from `next.browser` or
importing from private paths.

<!-- NEXT_JS_LLM_PR -->

Author: timneutkens

test/development/acceptance-app/editor-links.test.ts

@@ -1,6 +1,5 @@
 import { check, retry } from 'next-test-utils'
-import type { Playwright } from 'next-webdriver'
-import { FileRef, nextTestSetup } from 'e2e-utils'
+import { FileRef, nextTestSetup, type Playwright } from 'e2e-utils'
 import path from 'path'
 import { createSandbox } from 'development-sandbox'
 import { outdent } from 'outdent'

test/development/acceptance-app/version-staleness.test.ts

@@ -1,9 +1,8 @@
 /* eslint-env jest */
 import { createSandbox } from 'development-sandbox'
-import { FileRef, nextTestSetup } from 'e2e-utils'
+import { FileRef, nextTestSetup, type Playwright } from 'e2e-utils'
 import path from 'path'
 import { outdent } from 'outdent'
-import { Playwright } from 'next-webdriver'
 
 function getStaleness(browser: Playwright) {
   return browser

test/development/app-dir/cache-components-dev-warmup/cache-components.dev-warmup.test.ts

@@ -1,7 +1,6 @@
-import { nextTestSetup } from 'e2e-utils'
+import { nextTestSetup, type Playwright } from 'e2e-utils'
 import { retry } from 'next-test-utils'
 import * as nodePath from 'node:path'
-import type { Playwright } from '../../../lib/next-webdriver'
 
 describe.each([
   {

test/development/app-dir/cache-components-tasks/cache-components-tasks.test.ts

@@ -1,7 +1,6 @@
-import { nextTestSetup } from 'e2e-utils'
+import { nextTestSetup, type Playwright } from 'e2e-utils'
 import { retry } from 'next-test-utils'
 import * as nodePath from 'node:path'
-import type { Playwright } from '../../../lib/next-webdriver'
 
 describe.each([
   {

test/development/app-dir/devtools-position/utils.ts

@@ -1,4 +1,4 @@
-import type { Playwright } from '../../../lib/next-webdriver'
+import type { Playwright } from 'e2e-utils'
 import { waitForDevToolsIndicator } from 'next-test-utils'
 
 export async function getDevIndicatorPosition(browser: Playwright) {

test/development/app-dir/instant-navs-devtools/instant-navs-devtools.test.ts

@@ -1,6 +1,5 @@
-import { nextTestSetup } from 'e2e-utils'
+import { nextTestSetup, type Playwright } from 'e2e-utils'
 import { retry, toggleDevToolsIndicatorPopover } from 'next-test-utils'
-import { Playwright } from 'next-webdriver'
 
 describe('instant-nav-panel', () => {
   const { isNextDev, isTurbopack, next } = nextTestSetup({

test/development/basic/allowed-dev-origins.test.ts

@@ -1,6 +1,5 @@
 import http from 'http'
 import { join } from 'path'
-import webdriver from 'next-webdriver'
 import { FileRef, NextInstance, nextTestSetup } from 'e2e-utils'
 import { fetchViaHTTP, findPort, retry } from 'next-test-utils'
 
@@ -169,7 +168,9 @@ describe.each(['', '/docs'])(
             })()`
 
           // ensure direct port with mismatching port is blocked
-          const browser = await webdriver(`http://127.0.0.1:${port}`, '/about')
+          const browser = await next.browser('/about', {
+            baseUrl: `http://127.0.0.1:${port}`,
+          })
           await browser.eval(websocketSnippet)
           await retry(async () => {
             expect(await browser.elementByCss('#status').text()).toBe('error')
@@ -303,7 +304,9 @@ describe.each(['', '/docs'])(
               })
             })()`
 
-          const browser = await webdriver(`http://127.0.0.1:${port}`, '/about')
+          const browser = await next.browser('/about', {
+            baseUrl: `http://127.0.0.1:${port}`,
+          })
           await browser.get(`https://example.vercel.sh/`)
           await browser.eval(websocketSnippet)
           await retry(async () => {
@@ -370,7 +373,9 @@ describe.each(['', '/docs'])(
             })()`
 
           // ensure direct port with mismatching port is allowed when configured
-          const browser = await webdriver(`http://127.0.0.1:${port}`, '/about')
+          const browser = await next.browser('/about', {
+            baseUrl: `http://127.0.0.1:${port}`,
+          })
           await browser.eval(websocketSnippet)
           await retry(async () => {
             expect(await browser.elementByCss('#status').text()).toBe(
@@ -447,7 +452,9 @@ describe.each(['', '/docs'])(
       it('should load images regardless of allowed origins', async () => {
         const { server, port } = await createHostServer()
         try {
-          const browser = await webdriver(`http://127.0.0.1:${port}`, '/about')
+          const browser = await next.browser('/about', {
+            baseUrl: `http://127.0.0.1:${port}`,
+          })
 
           const imageSnippet = `(() => {
             const statusEl = document.createElement('p')
@@ -511,7 +518,9 @@ describe.each(['', '/docs'])(
         })
 
         try {
-          const browser = await webdriver(`http://127.0.0.1:${port}`, '/')
+          const browser = await next.browser('/', {
+            baseUrl: `http://127.0.0.1:${port}`,
+          })
 
           await retry(async () => {
             expect(await browser.elementByCss('#status').text()).toBe('error')

test/development/basic/gssp-ssr-change-reloading/test/index.test.ts

@@ -1,7 +1,6 @@
 /* eslint-env jest */
 
 import { join } from 'path'
-import webdriver from 'next-webdriver'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import { waitForNoRedbox, check } from 'next-test-utils'
 
@@ -31,7 +30,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should not reload page when client-side is changed too GSP', async () => {
-    const browser = await webdriver(next.url, '/gsp-blog/first')
+    const browser = await next.browser('/gsp-blog/first')
     await check(() => browser.elementByCss('#change').text(), 'change me')
     await browser.eval(`window.beforeChange = 'hi'`)
 
@@ -52,7 +51,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update page when getStaticProps is changed only', async () => {
-    const browser = await webdriver(next.url, '/gsp-blog/first')
+    const browser = await next.browser('/gsp-blog/first')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -81,7 +80,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should show indicator when re-fetching data', async () => {
-    const browser = await webdriver(next.url, '/gsp-blog/second')
+    const browser = await next.browser('/gsp-blog/second')
     await installCheckVisible(browser)
     await browser.eval(`window.beforeChange = 'hi'`)
 
@@ -112,7 +111,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update page when getStaticPaths is changed only', async () => {
-    const browser = await webdriver(next.url, '/gsp-blog/first')
+    const browser = await next.browser('/gsp-blog/first')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -130,7 +129,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update page when getStaticProps is changed only for /index', async () => {
-    const browser = await webdriver(next.url, '/')
+    const browser = await next.browser('/')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -148,7 +147,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update page when getStaticProps is changed only for /another/index', async () => {
-    const browser = await webdriver(next.url, '/another')
+    const browser = await next.browser('/another')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -171,7 +170,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should keep scroll position when updating from change in getStaticProps', async () => {
-    const browser = await webdriver(next.url, '/another')
+    const browser = await next.browser('/another')
     await browser.eval(
       'document.getElementById("scroll-target").scrollIntoView()'
     )
@@ -203,7 +202,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should not reload page when client-side is changed too GSSP', async () => {
-    const browser = await webdriver(next.url, '/gssp-blog/first')
+    const browser = await next.browser('/gssp-blog/first')
     await check(() => browser.elementByCss('#change').text(), 'change me')
     await browser.eval(`window.beforeChange = 'hi'`)
 
@@ -224,7 +223,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update page when getServerSideProps is changed only', async () => {
-    const browser = await webdriver(next.url, '/gssp-blog/first')
+    const browser = await next.browser('/gssp-blog/first')
     await check(
       async () =>
         JSON.parse(await browser.elementByCss('#props').text()).count + '',
@@ -258,7 +257,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update on props error in getStaticProps', async () => {
-    const browser = await webdriver(next.url, '/')
+    const browser = await next.browser('/')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -294,7 +293,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should update on thrown error in getStaticProps', async () => {
-    const browser = await webdriver(next.url, '/')
+    const browser = await next.browser('/')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())
@@ -336,7 +335,7 @@ describe('GS(S)P Server-Side Change Reloading', () => {
   })
 
   it('should refresh data when server import is updated', async () => {
-    const browser = await webdriver(next.url, '/')
+    const browser = await next.browser('/')
     await browser.eval(`window.beforeChange = 'hi'`)
 
     const props = JSON.parse(await browser.elementByCss('#props').text())

test/development/basic/legacy-decorators.test.ts

@@ -1,5 +1,4 @@
 import { join } from 'path'
-import webdriver from 'next-webdriver'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import { check } from 'next-test-utils'
 
@@ -24,7 +23,7 @@ describe('Legacy decorators SWC option', () => {
     it('should compile with legacy decorators enabled from extended config', async () => {
       let browser
       try {
-        browser = await webdriver(next.url, '/')
+        browser = await next.browser('/')
         const text = await browser.elementByCss('#count').text()
         expect(text).toBe('Current number: 0')
         await browser.elementByCss('#increase').click()
@@ -57,7 +56,7 @@ describe('Legacy decorators SWC option', () => {
     it('should compile with legacy decorators enabled', async () => {
       let browser
       try {
-        browser = await webdriver(next.url, '/')
+        browser = await next.browser('/')
         const text = await browser.elementByCss('#count').text()
         expect(text).toBe('Current number: 0')
         await browser.elementByCss('#increase').click()

test/development/basic/misc.test.ts

@@ -1,5 +1,4 @@
 import { join } from 'path'
-import webdriver from 'next-webdriver'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import { fetchViaHTTP, renderViaHTTP } from 'next-test-utils'
 
@@ -17,7 +16,7 @@ describe.each([[''], ['/docs']])(
     })
 
     it('should set process.env.NODE_ENV in development', async () => {
-      const browser = await webdriver(next.url, basePath + '/process-env')
+      const browser = await next.browser(basePath + '/process-env')
       const nodeEnv = await browser.elementByCss('#node-env').text()
       expect(nodeEnv).toBe('development')
       await browser.close()