From ebd9c82ba01b2b2b20762760b460bbf3cf8a95b4 Mon Sep 17 00:00:00 2001 From: David Crespo Date: Thu, 23 Oct 2025 18:05:36 -0500 Subject: [PATCH] chore: upgrade playwright, use page.consoleMessages() --- package-lock.json | 43 +++++++++++++------------------- package.json | 4 +-- test/e2e/error-pages.e2e.ts | 7 ++---- test/e2e/instance-metrics.e2e.ts | 11 +++----- test/e2e/utils.ts | 5 ++++ 5 files changed, 29 insertions(+), 41 deletions(-) diff --git a/package-lock.json b/package-lock.json index f897fb02b..d6626490e 100644 --- a/package-lock.json +++ b/package-lock.json @@ -58,7 +58,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", @@ -79,7 +79,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", @@ -1903,13 +1903,13 @@ } }, "node_modules/@playwright/test": { - "version": "1.54.1", - "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.54.1.tgz", - "integrity": "sha512-FS8hQ12acieG2dYSksmLOF7BNxnVf2afRJdCuM1eMSxj6QTSE6G4InGF7oApGgDb65MX7AwMVlIkpru0yZA4Xw==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/@playwright/test/-/test-1.56.1.tgz", + "integrity": "sha512-vSMYtL/zOcFpvJCW71Q/OEGQb7KYBPAdKh35WNSkaZA75JlAO8ED8UN6GUNTm3drWomcbcqRPFqQbLae8yBTdg==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright": "1.54.1" + "playwright": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -8799,14 +8799,11 @@ } }, "node_modules/eslint-plugin-playwright": { - "version": "1.8.3", - "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-1.8.3.tgz", - "integrity": "sha512-h87JPFHkz8a6oPhn8GRGGhSQoAJjx0AkOv1jME6NoMk2FpEsfvfJJNaQDxLSqSALkCr0IJXPGTnp6SIRVu5Nqg==", + "version": "2.2.2", + "resolved": "https://registry.npmjs.org/eslint-plugin-playwright/-/eslint-plugin-playwright-2.2.2.tgz", + "integrity": "sha512-j0jKpndIPOXRRP9uMkwb9l/nSmModOU3452nrFdgFJoEv/435J1onk8+aITzjDW8DfypxgmVaDMdmVIa6F7I0w==", "dev": true, "license": "MIT", - "workspaces": [ - "examples" - ], "dependencies": { "globals": "^13.23.0" }, @@ -8814,13 +8811,7 @@ "node": ">=16.6.0" }, "peerDependencies": { - "eslint": ">=8.40.0", - "eslint-plugin-jest": ">=25" - }, - "peerDependenciesMeta": { - "eslint-plugin-jest": { - "optional": true - } + "eslint": ">=8.40.0" } }, "node_modules/eslint-plugin-playwright/node_modules/globals": { @@ -12781,13 +12772,13 @@ } }, "node_modules/playwright": { - "version": "1.54.1", - "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.54.1.tgz", - "integrity": "sha512-peWpSwIBmSLi6aW2auvrUtf2DqY16YYcCMO8rTVx486jKmDTJg7UAhyrraP98GB8BoPURZP8+nxO7TSd4cPr5g==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright/-/playwright-1.56.1.tgz", + "integrity": "sha512-aFi5B0WovBHTEvpM3DzXTUaeN6eN0qWnTkKx4NQaH4Wvcmc153PdaY2UBdSYKaGYw+UyWXSVyxDUg5DoPEttjw==", "dev": true, "license": "Apache-2.0", "dependencies": { - "playwright-core": "1.54.1" + "playwright-core": "1.56.1" }, "bin": { "playwright": "cli.js" @@ -12800,9 +12791,9 @@ } }, "node_modules/playwright-core": { - "version": "1.54.1", - "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.54.1.tgz", - "integrity": "sha512-Nbjs2zjj0htNhzgiy5wu+3w09YetDx5pkrpI/kZotDlDUaYk0HVA5xrBVPdow4SAUIlhgKcJeJg4GRKW6xHusA==", + "version": "1.56.1", + "resolved": "https://registry.npmjs.org/playwright-core/-/playwright-core-1.56.1.tgz", + "integrity": "sha512-hutraynyn31F+Bifme+Ps9Vq59hKuUCz7H1kDOcBs+2oGguKkWTU50bBWrtz34OUWmIwpBTWDxaRPXrIXkgvmQ==", "dev": true, "license": "Apache-2.0", "bin": { diff --git a/package.json b/package.json index bbe4d116f..0649b20c7 100644 --- a/package.json +++ b/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", diff --git a/test/e2e/error-pages.e2e.ts b/test/e2e/error-pages.e2e.ts index d175aa844..c92d74304 100644 --- a/test/e2e/error-pages.e2e.ts +++ b/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 diff --git a/test/e2e/instance-metrics.e2e.ts b/test/e2e/instance-metrics.e2e.ts index 55020c801..effaecc08 100644 --- a/test/e2e/instance-metrics.e2e.ts +++ b/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() diff --git a/test/e2e/utils.ts b/test/e2e/utils.ts index a08aa8282..b9a27bb2e 100644 --- a/test/e2e/utils.ts +++ b/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)) +}