chore: upgrade playwright, use page.consoleMessages()

package.json

@@ -83,7 +83,7 @@
     "@ianvs/prettier-plugin-sort-imports": "^4.4.1",
     "@mswjs/http-middleware": "^0.10.3",
     "@oxide/openapi-gen-ts": "~0.9.0",
-    "@playwright/test": "^1.54.1",
+    "@playwright/test": "^1.56.1",
     "@testing-library/dom": "^10.4.0",
     "@testing-library/jest-dom": "^6.6.3",
     "@testing-library/react": "^16.2.0",
@@ -104,7 +104,7 @@
     "eslint-config-prettier": "^9.1.0",
     "eslint-plugin-import": "^2.31.0",
     "eslint-plugin-jsx-a11y": "^6.10.2",
-    "eslint-plugin-playwright": "^1.8.3",
+    "eslint-plugin-playwright": "^2.2.2",
     "eslint-plugin-prettier": "^5.2.1",
     "eslint-plugin-react": "^7.37.3",
     "eslint-plugin-react-hook-form": "^0.3.0",

test/e2e/error-pages.e2e.ts

@@ -7,7 +7,7 @@
  */
 import { expect, test } from '@playwright/test'
 
-import { getPageAsUser } from './utils'
+import { getPageAsUser, hasConsoleMessage } from './utils'
 
 test('Shows 404 page when a resource is not found', async ({ page }) => {
   await page.goto('/nonexistent')
@@ -20,9 +20,6 @@ test('Shows 404 page when a resource is not found', async ({ page }) => {
 })
 
 test('Shows something went wrong page on other errors', async ({ page, browserName }) => {
-  const messages: string[] = []
-  page.on('console', (e) => messages.push(e.text()))
-
   await page.goto('/projects/error-503') // specially handled in mock server
   await expect(page.getByText('Something went wrong')).toBeVisible()
 
@@ -36,7 +33,7 @@ test('Shows something went wrong page on other errors', async ({ page, browserNa
     const error =
       'Expected query to be prefetched.\nKey: ["projectView",{"path":{"project":"error-503"}}]'
     // eslint-disable-next-line playwright/no-conditional-expect
-    expect(messages.some((m) => m.includes(error))).toBeTruthy()
+    expect(await hasConsoleMessage(page, error)).toBeTruthy()
   }
 
   // test clicking sign out

test/e2e/instance-metrics.e2e.ts

@@ -10,7 +10,7 @@ import { expect, test } from '@playwright/test'
 
 import { OXQL_GROUP_BY_ERROR } from '~/api'
 
-import { getPageAsUser } from './utils'
+import { getPageAsUser, hasConsoleMessage } from './utils'
 
 test('Click through instance metrics', async ({ page }) => {
   await page.goto('/projects/mock-project/instances/db1/metrics/cpu')
@@ -45,9 +45,6 @@ test('Instance metrics work for non-fleet viewer', async ({ browser }) => {
 })
 
 test('empty and loading states', async ({ page }) => {
-  const messages: string[] = []
-  page.on('console', (e) => messages.push(e.text()))
-
   // we have special handling in the API to return special data for this project
   await page.goto('/projects/other-project/instances/failed-restarting-soon/metrics/cpu')
 
@@ -70,16 +67,14 @@ test('empty and loading states', async ({ page }) => {
   await expect(noData).toBeVisible()
 
   // idle state returns group_by must be aligned error, treated as empty
-  const hasGroupByError = () => messages.some((m) => m.includes(OXQL_GROUP_BY_ERROR))
-
-  expect(hasGroupByError()).toBe(false) // error not in console
+  expect(await hasConsoleMessage(page, OXQL_GROUP_BY_ERROR)).toBe(false) // error not in console
   await statePicker.click()
   await page.getByRole('option', { name: 'State: Idle' }).click()
   await expect(loading).toBeVisible()
   await expect(loading).toBeHidden()
   await expect(page.getByText('Something went wrong')).toBeHidden()
   await expect(noData).toBeVisible()
-  expect(hasGroupByError()).toBe(true) // error present in console
+  expect(await hasConsoleMessage(page, OXQL_GROUP_BY_ERROR)).toBe(true) // error present in console
 
   // make sure empty state goes away again for the first one
   await statePicker.click()

test/e2e/utils.ts

@@ -263,3 +263,8 @@ export async function addTlsCert(page: Page) {
   await chooseFile(page, page.getByLabel('Key'), 'small')
   await page.getByRole('button', { name: 'Add Certificate' }).click()
 }
+
+export async function hasConsoleMessage(page: Page, msg: string) {
+  const messages = await page.consoleMessages()
+  return messages.some((m) => m.text().includes(msg))
+}