[test] Resolve elementByCSS and waitForElementByCSS once visible (#83301)

Author: eps1lon

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

@@ -1,10 +1,11 @@
 import { check, retry } from 'next-test-utils'
+import type { Playwright } from 'next-webdriver'
 import { FileRef, nextTestSetup } from 'e2e-utils'
 import path from 'path'
 import { createSandbox } from 'development-sandbox'
 import { outdent } from 'outdent'
 
-async function clickSourceFile(browser: any) {
+async function clickSourceFile(browser: Playwright) {
   await browser.waitForElementByCss(
     '[data-with-open-in-editor-link-source-file]'
   )
@@ -13,7 +14,7 @@ async function clickSourceFile(browser: any) {
     .click()
 }
 
-async function clickImportTraceFiles(browser: any) {
+async function clickImportTraceFiles(browser: Playwright) {
   await browser.waitForElementByCss(
     '[data-with-open-in-editor-link-import-trace]'
   )

test/development/app-dir/react-performance-track/react-performance-track.test.ts

@@ -10,7 +10,9 @@ describe('react-performance-track', () => {
 
   it('should show setTimeout', async () => {
     const browser = await next.browser('/set-timeout')
-    await browser.elementByCss('[data-react-server-requests-done]')
+    await browser.elementByCss('[data-react-server-requests-done]', {
+      state: 'attached',
+    })
 
     const track = await browser.eval('window.reactServerRequests.getSnapshot()')
     expect(track).toEqual(
@@ -23,7 +25,9 @@ describe('react-performance-track', () => {
 
   it('should show fetch', async () => {
     const browser = await next.browser('/fetch')
-    await browser.elementByCss('[data-react-server-requests-done]')
+    await browser.elementByCss('[data-react-server-requests-done]', {
+      state: 'attached',
+    })
 
     const track = await browser.eval('window.reactServerRequests.getSnapshot()')
     expect(track).toEqual(

test/development/app-dir/segment-explorer/segment-explorer.test.ts

@@ -92,7 +92,7 @@ describe('segment-explorer', () => {
       `"app/ [global-error.js]"`
     )
     // FIXME: handle preserve the url when hitting global-error
-    expect(await getSegmentExplorerRoute(browser)).toBe('')
+    expect(await getSegmentExplorerRoute(browser)).toBe('<empty>')
   })
 
   it('should show navigation boundaries of the segment', async () => {

test/development/app-hmr/hmr.test.ts

@@ -123,7 +123,9 @@ describe(`app-dir-hmr`, () => {
       await browser
         .elementByCss('a')
         .click()
-        .waitForElementByCss('[data-testid="new-runtime-functionality-page"]')
+        .waitForElementByCss('[data-testid="new-runtime-functionality-page"]', {
+          state: 'attached',
+        })
 
       const logs = await browser.log()
       // TODO: Should assert on all logs but these are cluttered with logs from our test utils (e.g. playwright tracing or webdriver)

test/development/basic/define-class-fields/define-class-fields.test.ts

@@ -1,5 +1,4 @@
 import { join } from 'path'
-import webdriver from 'next-webdriver'
 import { nextTestSetup } from 'e2e-utils'
 import { check } from 'next-test-utils'
 
@@ -16,32 +15,18 @@ describe('useDefineForClassFields SWC option', () => {
   })
 
   it('tsx should compile with useDefineForClassFields enabled', async () => {
-    let browser
-    try {
-      browser = await webdriver(next.url, '/')
-      await browser.elementByCss('#action').click()
-      await check(
-        () => browser.elementByCss('#name').text(),
-        /this is my name: next/
-      )
-    } finally {
-      if (browser) {
-        await browser.close()
-      }
-    }
+    const browser = await next.browser('/')
+    await browser.elementByCss('#action').click()
+    await check(
+      () => browser.elementByCss('#name').text(),
+      /this is my name: next/
+    )
   })
 
   it("Initializes resident to undefined after the call to 'super()' when with useDefineForClassFields enabled", async () => {
-    let browser
-    try {
-      browser = await webdriver(next.url, '/animal')
-      expect(await browser.elementByCss('#dog').text()).toBe('')
-      expect(await browser.elementByCss('#dogDecl').text()).toBe('dog')
-    } finally {
-      if (browser) {
-        await browser.close()
-      }
-    }
+    const browser = await next.browser('/animal')
+    expect(await browser.elementByCss('#dog').text()).toBe('undefined')
+    expect(await browser.elementByCss('#dogDecl').text()).toBe('dog')
   })
 
   async function matchLogs$(browser) {
@@ -62,17 +47,10 @@ describe('useDefineForClassFields SWC option', () => {
   }
 
   it('set accessors from base classes won’t get triggered with useDefineForClassFields enabled', async () => {
-    let browser
-    try {
-      browser = await webdriver(next.url, '/derived')
-      await matchLogs$(browser).then(([data_foundLog, name_foundLog]) => {
-        expect(data_foundLog).toBe(true)
-        expect(name_foundLog).toBe(false)
-      })
-    } finally {
-      if (browser) {
-        await browser.close()
-      }
-    }
+    const browser = await next.browser('/derived')
+    await matchLogs$(browser).then(([data_foundLog, name_foundLog]) => {
+      expect(data_foundLog).toBe(true)
+      expect(name_foundLog).toBe(false)
+    })
   })
 })

test/development/basic/define-class-fields/fixture/pages/animal.tsx

@@ -46,7 +46,7 @@ export default function AnimalView() {
   })
   return (
     <>
-      <div id={'dog'}>{dog.resident}</div>
+      <div id={'dog'}>{String(dog.resident)}</div>
       <div id={'dogDecl'}>{dogDeclare.resident?.dogStuff}</div>
     </>
   )

test/development/basic/define-class-fields/fixture/tsconfig.json

@@ -17,5 +17,5 @@
     "isolatedModules": true
   },
   "include": ["next-env.d.ts", "**/*.ts", "**/*.tsx"],
-  "exclude": ["node_modules"]
+  "exclude": ["node_modules", "**/*.test.ts", "**/*.test.tsx"]
 }

test/e2e/404-page-router/app/components/debug.js

@@ -2,7 +2,7 @@ export default function Debug({ name, value }) {
   return (
     <>
       <dt>{name}</dt>
-      <dd id={name}>{value}</dd>
+      <dd id={name}>{value || '<empty>'}</dd>
     </>
   )
 }

test/e2e/404-page-router/index.test.ts

@@ -1,6 +1,5 @@
 import path from 'path'
 import fs from 'fs-extra'
-import webdriver from 'next-webdriver'
 import { createNext, FileRef, type NextInstance } from 'e2e-utils'
 import { check, retry } from 'next-test-utils'
 
@@ -122,29 +121,23 @@ describe('404-page-router', () => {
 
       describe.each(urls)('for $url', ({ url, pathname, asPath }) => {
         it('should have the correct router parameters after it is ready', async () => {
-          const query = url.split('?', 2)[1] ?? ''
-          const browser = await webdriver(next.url, url)
+          const query = url.split('?', 2)[1] ?? '<empty>'
+          const browser = await next.browser(url)
 
-          try {
-            await check(
-              () => browser.eval('next.router.isReady ? "yes" : "no"'),
-              'yes'
-            )
-            expect(await browser.elementById('pathname').text()).toEqual(
-              pathname
-            )
-            expect(await browser.elementById('asPath').text()).toEqual(asPath)
-            expect(await browser.elementById('query').text()).toEqual(query)
-          } finally {
-            await browser.close()
-          }
+          await check(
+            () => browser.eval('next.router.isReady ? "yes" : "no"'),
+            'yes'
+          )
+          expect(await browser.elementById('pathname').text()).toEqual(pathname)
+          expect(await browser.elementById('asPath').text()).toEqual(asPath)
+          expect(await browser.elementById('query').text()).toEqual(query)
         })
       })
 
       // It should not throw any errors when re-fetching the route info:
       // https://github.com/vercel/next.js/issues/44293
       it('should not throw any errors when re-fetching the route info', async () => {
-        const browser = await webdriver(next.url, '/?test=1')
+        const browser = await next.browser('/?test=1')
         await check(
           () => browser.eval('next.router.isReady ? "yes" : "no"'),
           'yes'

test/e2e/app-dir/actions/app-action-progressive-enhancement.test.ts

@@ -71,7 +71,7 @@ describe('app-dir action progressive enhancement', () => {
       await browser.elementById('set-cookie').click()
 
       await retry(async () => {
-        expect(await browser.elementById('referer').text()).toBe('')
+        expect(await browser.elementById('referer').text()).toBe('<null>')
       })
 
       await browser.elementById('get-cookie').click()