Repository: vercel/next.js
Pull request: [test] Keep Playwright stackframes out of tests

[Failed test was already flaky](https://app.datadoghq.com/ci/test/runs?query=test_level%3Atest%20%40test.source.file%3A%22test%2Fdevelopment%2Facceptance-app%2FReactRefreshLogBox.test.ts%22%20%40test.status%3Afail%20%40test.name%3A%22ReactRefreshLogBox%20app%20Can%27t%20resolve%20%40import%20in%20CSS%20file%22&agg_m=count&agg_m_source=base&agg_t=count&currentTab=overview&eventStack=&fromUser=true&index=citest&start=1746367085234&end=1751551085234&paused=false)

Any error triggered from within Playwright's `evaluate` will have the anonymous function from the test in its stack. This breaks when moving test actions and is generally irrelevant to the behavior we're asserting on. 

In all existing cases we could just use CDP (i.e. `browser.elementByCSS(css).click()` instead of `browser.evaluate(() => document.querySelector(css).click())`) which will keep test locations out of the generated stackframes.

Resolves https://github.com/vercel/next.js/pull/81223#discussion_r2182677367

Changed files:
filename: test/development/acceptance-app/ReactRefreshLogBox.test.ts
patch: @@ -34,7 +34,7 @@ describe('ReactRefreshLogBox app', () => {
         }
       `
     )
-    await session.evaluate(() => document.querySelector('a').click())
+    await browser.elementByCss('a').click()
 
     if (isTurbopack) {
       await expect(browser).toDisplayRedbox(
@@ -517,7 +517,7 @@ describe('ReactRefreshLogBox app', () => {
       `
     )
 
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     // TODO(veil): Why Owner Stack location different?
     if (isTurbopack) {
@@ -531,8 +531,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page index.js (9:30)",
@@ -550,8 +548,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page app/page.js (4:10)",
@@ -600,7 +596,7 @@ describe('ReactRefreshLogBox app', () => {
       `
     )
 
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     // TODO(veil): Why Owner Stack location different?
     if (isTurbopack) {
@@ -614,8 +610,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page index.js (9:30)",
@@ -633,8 +627,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page app/page.js (4:10)",
@@ -682,7 +674,7 @@ describe('ReactRefreshLogBox app', () => {
       `
     )
 
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     // TODO(veil): Why Owner Stack location different?
     if (isTurbopack) {
@@ -696,8 +688,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page index.js (9:30)",
@@ -715,8 +705,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page app/page.js (4:10)",
@@ -764,7 +752,7 @@ describe('ReactRefreshLogBox app', () => {
       `
     )
 
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     // TODO(veil): Why Owner Stack location different?
     if (isTurbopack) {
@@ -778,8 +766,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page index.js (9:30)",
@@ -797,8 +783,6 @@ describe('ReactRefreshLogBox app', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (9:7)",
            "Page app/page.js (4:10)",

filename: test/development/acceptance-app/error-recovery.test.ts
patch: @@ -35,7 +35,7 @@ describe('Error recovery app', () => {
       `
     )
 
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('1')
@@ -279,7 +279,7 @@ describe('Error recovery app', () => {
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('0')
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('1')
@@ -296,8 +296,6 @@ describe('Error recovery app', () => {
             |           ^",
          "stack": [
            "Index.useCallback[increment] index.js (7:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (12:7)",
            "Page index.js (10:6)",
@@ -315,8 +313,6 @@ describe('Error recovery app', () => {
             |           ^",
          "stack": [
            "Index.useCallback[increment] index.js (7:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
            "button <anonymous>",
            "Index index.js (12:7)",
            "Page app/page.js (4:10)",
@@ -349,7 +345,7 @@ describe('Error recovery app', () => {
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Count: 1')
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Count: 2')

filename: test/development/acceptance/ReactRefreshLogBox.test.ts
patch: @@ -41,7 +41,7 @@ describe('ReactRefreshLogBox', () => {
         }
       `
     )
-    await session.evaluate(() => document.querySelector('a').click())
+    await browser.elementByCss('a').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -54,8 +54,6 @@ describe('ReactRefreshLogBox', () => {
             |                           ^",
          "stack": [
            "onClick index.js (8:27)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -70,8 +68,6 @@ describe('ReactRefreshLogBox', () => {
             |                           ^",
          "stack": [
            "onClick index.js (8:27)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -654,7 +650,7 @@ describe('ReactRefreshLogBox', () => {
     )
 
     await session.assertNoRedbox()
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -667,8 +663,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -683,8 +677,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -709,7 +701,7 @@ describe('ReactRefreshLogBox', () => {
     )
 
     await session.assertNoRedbox()
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -722,8 +714,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -738,8 +728,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -764,7 +752,7 @@ describe('ReactRefreshLogBox', () => {
     )
 
     await session.assertNoRedbox()
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -777,8 +765,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -793,8 +779,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -819,7 +803,7 @@ describe('ReactRefreshLogBox', () => {
     )
 
     await session.assertNoRedbox()
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -832,8 +816,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -848,8 +830,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -874,7 +854,7 @@ describe('ReactRefreshLogBox', () => {
     )
 
     await session.assertNoRedbox()
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
 
     if (isReact18) {
       await expect(browser).toDisplayRedbox(`
@@ -887,8 +867,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)
@@ -903,8 +881,6 @@ describe('ReactRefreshLogBox', () => {
            |           ^",
          "stack": [
            "Index.useCallback[boom] index.js (5:11)",
-           "UtilityScript.evaluate <anonymous>",
-           "UtilityScript.<anonymous> <anonymous>",
          ],
        }
       `)

filename: test/development/acceptance/error-recovery.test.ts
patch: @@ -153,7 +153,7 @@ describe('pages/ error recovery', () => {
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('0')
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('1')
@@ -168,8 +168,6 @@ describe('pages/ error recovery', () => {
           |           ^",
        "stack": [
          "Index.useCallback[increment] index.js (7:11)",
-         "UtilityScript.evaluate <anonymous>",
-         "UtilityScript.<anonymous> <anonymous>",
        ],
      }
     `)
@@ -196,7 +194,7 @@ describe('pages/ error recovery', () => {
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Count: 1')
-    await session.evaluate(() => document.querySelector('button').click())
+    await browser.elementByCss('button').click()
     expect(
       await session.evaluate(() => document.querySelector('p').textContent)
     ).toBe('Count: 2')