From 8364ee988ed978169cbcd46140af9d05a365075f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Greg=20Berg=C3=A9?= Date: Wed, 19 Mar 2025 16:04:45 +0100 Subject: [PATCH] Fix Argos flakies (#2999) --- bun.lock | 20 +++---- packages/gitbook/e2e/customers.spec.ts | 54 ++++++++++++------- packages/gitbook/e2e/util.ts | 21 ++++---- packages/gitbook/package.json | 4 +- .../components/Header/HeaderMobileMenu.tsx | 10 +--- .../src/components/Search/SearchButton.tsx | 23 +++----- 6 files changed, 66 insertions(+), 66 deletions(-) diff --git a/bun.lock b/bun.lock index 5b976e535..455b94a28 100644 --- a/bun.lock +++ b/bun.lock @@ -102,10 +102,10 @@ "usehooks-ts": "^3.1.0", }, "devDependencies": { - "@argos-ci/playwright": "^3.10.0", + "@argos-ci/playwright": "^4.1.0", "@cloudflare/next-on-pages": "1.13.7", "@cloudflare/workers-types": "^4.20241230.0", - "@playwright/test": "^1.49.1", + "@playwright/test": "^1.51.1", "@types/js-cookie": "^3.0.6", "@types/jsontoxml": "^1.0.5", "@types/jsonwebtoken": "^9.0.6", @@ -268,15 +268,15 @@ "@alloc/quick-lru": ["@alloc/quick-lru@5.2.0", "", {}, "sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw=="], - "@argos-ci/api-client": ["@argos-ci/api-client@0.7.2", "", { "dependencies": { "debug": "^4.4.0", "openapi-fetch": "0.13.4" } }, "sha512-ojKOhb4CXugJcHNzGH4Gp7G6gqqBEbhO2B5FNfU/ieBCDsYY+urE0hQ5L7+4TfmMoKb/xVpvtu2mQdEpMt4JVg=="], + "@argos-ci/api-client": ["@argos-ci/api-client@0.8.0", "", { "dependencies": { "debug": "^4.4.0", "openapi-fetch": "0.13.4" } }, "sha512-UHa1vAf8gwHVpkqM/RaSryrFe1juqWH6dHpPeMtT4e/ZMB9hNYwYFinaGq/KRWe88JEi2WeAu776YdoeUSZQkQ=="], - "@argos-ci/browser": ["@argos-ci/browser@2.2.2", "", {}, "sha512-pxoUKAVA/3whUKZU1BV93vI4JBYD6utKOd8yfMdZk70kRBL+ZEY+wIPDgQCXiDk02/od64xTn3YiD+N20V45RA=="], + "@argos-ci/browser": ["@argos-ci/browser@3.0.1", "", {}, "sha512-dqRXWCllulbKlqzwNE2bjbCtNqxVnUUrYpI1iIJQCMvyStmPdGHOYD7BoQQQ2uNPT2pCHeDyysrxc5T3mDyScg=="], - "@argos-ci/core": ["@argos-ci/core@3.0.0", "", { "dependencies": { "@argos-ci/api-client": "0.7.2", "@argos-ci/util": "2.2.2", "axios": "^1.7.9", "convict": "^6.2.4", "debug": "^4.4.0", "fast-glob": "^3.3.3", "sharp": "^0.33.5", "tmp": "^0.2.3" } }, "sha512-00xNAPwE8O7sKCgn9oeiKGE0cyZYuC3ouCxN+DBAMqZLIG+8zoUZUuB+ZJsKwjMHA9un/bzFX9l8z2Z8rgkQ7w=="], + "@argos-ci/core": ["@argos-ci/core@3.1.0", "", { "dependencies": { "@argos-ci/api-client": "0.8.0", "@argos-ci/util": "2.3.0", "axios": "^1.7.9", "convict": "^6.2.4", "debug": "^4.4.0", "fast-glob": "^3.3.3", "sharp": "^0.33.5", "tmp": "^0.2.3" } }, "sha512-bo/pNKk6P0pz4NRdymgU1letwQrRbMPTeFyMsUEW8fhKNdesSFnFIWZBFGsGkkh05uw75PBjl2ZN4PvQ2TxSog=="], - "@argos-ci/playwright": ["@argos-ci/playwright@3.10.0", "", { "dependencies": { "@argos-ci/browser": "2.2.2", "@argos-ci/core": "3.0.0", "@argos-ci/util": "2.2.2", "chalk": "^5.4.1", "debug": "^4.4.0" } }, "sha512-kL83M8+KJ+A3bVbAWwPUMZNVlzP1FZMi3E5Y8Er4LnpqAutkbmL+YNeSamgX61WjOS8Zq3tIwf9923/rWvEkiQ=="], + "@argos-ci/playwright": ["@argos-ci/playwright@4.1.0", "", { "dependencies": { "@argos-ci/browser": "3.0.1", "@argos-ci/core": "3.1.0", "@argos-ci/util": "2.3.0", "chalk": "^5.4.1", "debug": "^4.4.0" } }, "sha512-7/6/fRQvs/ZObZG76qNVHRyv5nK21oBLxzzd8T1OmJMC/+UmV9omiuOO3x75H5kc5e3vlKsCc0hClFCqtbye7A=="], - "@argos-ci/util": ["@argos-ci/util@2.2.2", "", {}, "sha512-MpKAz/3dMNjsUO49sEMYfw+qZFUrEeji8EmSbr0rgL8bw+Q7hIYNesRtEIQnFPub0FgX1/AV3sRZ9yqWTgGgUw=="], + "@argos-ci/util": ["@argos-ci/util@2.3.0", "", {}, "sha512-tkxnCpaj7yN9nCFzo9MX0FJ5YjUepEOGYfdvF8COQqp+EdY1qubOPpc4Z0l1B60BlC8YtjQv/oRxHSh1XzxWFg=="], "@ast-grep/napi": ["@ast-grep/napi@0.34.3", "", { "optionalDependencies": { "@ast-grep/napi-darwin-arm64": "0.34.3", "@ast-grep/napi-darwin-x64": "0.34.3", "@ast-grep/napi-linux-arm64-gnu": "0.34.3", "@ast-grep/napi-linux-arm64-musl": "0.34.3", "@ast-grep/napi-linux-x64-gnu": "0.34.3", "@ast-grep/napi-linux-x64-musl": "0.34.3", "@ast-grep/napi-win32-arm64-msvc": "0.34.3", "@ast-grep/napi-win32-ia32-msvc": "0.34.3", "@ast-grep/napi-win32-x64-msvc": "0.34.3" } }, "sha512-2yrnMrUw3NVm9hf+YKO+BOY3Aci/qau2vDo0lGtA7qGMma18XPUIOTdzm601k5gPHo4MfxPPZLoe9QdTUviANg=="], @@ -776,7 +776,7 @@ "@pkgjs/parseargs": ["@pkgjs/parseargs@0.11.0", "", {}, "sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg=="], - "@playwright/test": ["@playwright/test@1.49.1", "", { "dependencies": { "playwright": "1.49.1" }, "bin": { "playwright": "cli.js" } }, "sha512-Ky+BVzPz8pL6PQxHqNRW1k3mIyv933LML7HktS8uik0bUXNCdPhoS/kLihiO1tMf/egaJb4IutXd7UywvXEW+g=="], + "@playwright/test": ["@playwright/test@1.51.1", "", { "dependencies": { "playwright": "1.51.1" }, "bin": { "playwright": "cli.js" } }, "sha512-nM+kEaTSAoVlXmMPH10017vn3FSiFqr/bh4fKg9vmAdMfd9SDqRZNvPSiAHADc/itWak+qPvMPZQOPwCBW7k7Q=="], "@popperjs/core": ["@popperjs/core@2.11.8", "", {}, "sha512-P1st0aksCrn9sGZhp8GMYwBnQsbvAWsZAX44oXNNvLHGqAOcoVxmjZiohstwQ7SqKnbR47akdNi+uleWD8+g6A=="], @@ -2378,9 +2378,9 @@ "pkg-types": ["pkg-types@1.3.1", "", { "dependencies": { "confbox": "^0.1.8", "mlly": "^1.7.4", "pathe": "^2.0.1" } }, "sha512-/Jm5M4RvtBFVkKWRu2BLUTNP8/M2a+UwuAX+ae4770q1qVGtfjG+WTCupoZixokjmHiry8uI+dlY8KXYV5HVVQ=="], - "playwright": ["playwright@1.49.1", "", { "dependencies": { "playwright-core": "1.49.1" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-VYL8zLoNTBxVOrJBbDuRgDWa3i+mfQgDTrL8Ah9QXZ7ax4Dsj0MSq5bYgytRnDVVe+njoKnfsYkH3HzqVj5UZA=="], + "playwright": ["playwright@1.51.1", "", { "dependencies": { "playwright-core": "1.51.1" }, "optionalDependencies": { "fsevents": "2.3.2" }, "bin": { "playwright": "cli.js" } }, "sha512-kkx+MB2KQRkyxjYPc3a0wLZZoDczmppyGJIvQ43l+aZihkaVvmu/21kiyaHeHjiFxjxNNFnUncKmcGIyOojsaw=="], - "playwright-core": ["playwright-core@1.49.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-BzmpVcs4kE2CH15rWfzpjzVGhWERJfmnXmniSyKeRZUs9Ws65m+RGIi7mjJK/euCegfn3i7jvqWeWyHe9y3Vgg=="], + "playwright-core": ["playwright-core@1.51.1", "", { "bin": { "playwright-core": "cli.js" } }, "sha512-/crRMj8+j/Nq5s8QcvegseuyeZPxpQCZb6HNk3Sos3BlZyAknRjoyJPFWkpNn8v0+P3WiwqFF8P+zQo4eqiNuw=="], "postcss": ["postcss@8.4.47", "", { "dependencies": { "nanoid": "^3.3.7", "picocolors": "^1.1.0", "source-map-js": "^1.2.1" } }, "sha512-56rxCq7G/XfB4EkXq9Egn5GCqugWvDFjafDOThIdMBsI15iqPqR5r15TfSr1YPYeEI19YeaXMCbY6u88Y76GLQ=="], diff --git a/packages/gitbook/e2e/customers.spec.ts b/packages/gitbook/e2e/customers.spec.ts index 224a57559..7b3b0ce26 100644 --- a/packages/gitbook/e2e/customers.spec.ts +++ b/packages/gitbook/e2e/customers.spec.ts @@ -1,4 +1,4 @@ -import { type TestsCase, runTestCases } from './util'; +import { type TestsCase, runTestCases, waitForCookiesDialog } from './util'; /** A list of test cases to run on the customers' docs sites. */ const testCases: TestsCase[] = [ @@ -6,14 +6,21 @@ const testCases: TestsCase[] = [ name: 'Snyk', contentBaseURL: 'https://docs.snyk.io', tests: [ - { name: 'Home', url: '/' }, - { name: 'OpenAPI', url: '/snyk-api/reference/apps' }, + { name: 'Home', url: '/', run: waitForCookiesDialog }, + { name: 'OpenAPI', url: '/snyk-api/reference/apps', run: waitForCookiesDialog }, ], }, { name: 'Nexthink', contentBaseURL: 'https://docs.nexthink.com', - tests: [{ name: 'Home', url: '/', screenshot: { waitForTOCScrolling: false } }], + tests: [ + { + name: 'Home', + url: '/', + screenshot: { waitForTOCScrolling: false }, + run: waitForCookiesDialog, + }, + ], }, { name: 'asiksupport-stg.dto.kemkes.go.id', @@ -33,7 +40,7 @@ const testCases: TestsCase[] = [ { name: 'docs.dify.ai', contentBaseURL: 'https://docs.dify.ai', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'seeddao.gitbook.io', @@ -63,27 +70,27 @@ const testCases: TestsCase[] = [ { name: 'docs.portainer.io', contentBaseURL: 'https://docs.portainer.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.chirptoken.io', contentBaseURL: 'https://docs.chirptoken.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.dexscreener.com', contentBaseURL: 'https://docs.dexscreener.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.pancakeswap.finance', contentBaseURL: 'https://docs.pancakeswap.finance', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'book.character.ai', contentBaseURL: 'https://book.character.ai', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.tradeonnova.io', @@ -103,7 +110,7 @@ const testCases: TestsCase[] = [ { name: 'docs.keeper.io', contentBaseURL: 'https://docs.keeper.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'adiblar.gitbook.io', @@ -138,12 +145,12 @@ const testCases: TestsCase[] = [ { name: 'meshnet.nordvpn.com', contentBaseURL: 'https://meshnet.nordvpn.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'manual.bubble.io', contentBaseURL: 'https://manual.bubble.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.tickettool.xyz', @@ -158,12 +165,12 @@ const testCases: TestsCase[] = [ { name: 'docs.cherry-ai.com', contentBaseURL: 'https://docs.cherry-ai.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.snyk.io', contentBaseURL: 'https://docs.snyk.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.realapp.link', @@ -188,7 +195,14 @@ const testCases: TestsCase[] = [ { name: 'docs.umbraco.com', contentBaseURL: 'https://docs.umbraco.com', - tests: [{ name: 'Home', url: '/welcome', screenshot: { waitForTOCScrolling: false } }], + tests: [ + { + name: 'Home', + url: '/welcome', + run: waitForCookiesDialog, + screenshot: { waitForTOCScrolling: false }, + }, + ], }, { name: 'sosovalue-white-paper.gitbook.io', @@ -198,12 +212,12 @@ const testCases: TestsCase[] = [ { name: 'docs.revrobotics.com', contentBaseURL: 'https://docs.revrobotics.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'chartschool.stockcharts.com', contentBaseURL: 'https://chartschool.stockcharts.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.soniclabs.com', @@ -218,7 +232,7 @@ const testCases: TestsCase[] = [ { name: 'docs.thousandeyes.com', contentBaseURL: 'https://docs.thousandeyes.com', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, { name: 'docs.raydium.io', @@ -228,7 +242,7 @@ const testCases: TestsCase[] = [ { name: 'docs.fluentbit.io', contentBaseURL: 'https://docs.fluentbit.io', - tests: [{ name: 'Home', url: '/' }], + tests: [{ name: 'Home', url: '/', run: waitForCookiesDialog }], }, ]; diff --git a/packages/gitbook/e2e/util.ts b/packages/gitbook/e2e/util.ts index 69482ad1d..c75eae4e8 100644 --- a/packages/gitbook/e2e/util.ts +++ b/packages/gitbook/e2e/util.ts @@ -133,11 +133,8 @@ export const headerLinks: CustomizationHeaderItem[] = [ ]; export async function waitForCookiesDialog(page: Page) { - const dialog = page.getByRole('dialog', { name: 'Cookies' }); - const accept = dialog.getByRole('button', { name: 'Accept' }); - const reject = dialog.getByRole('button', { name: 'Reject' }); - await expect(accept).toBeVisible(); - await expect(reject).toBeVisible(); + const dialog = page.getByTestId('cookies-dialog'); + await expect(dialog).toBeVisible(); } /** @@ -190,14 +187,20 @@ export function runTestCases(testCases: TestsCase[]) { await argosScreenshot(page, `${testCase.name} - ${testEntry.name}`, { viewports: ['macbook-16', 'macbook-13', 'ipad-2', 'iphone-x'], argosCSS: ` - /* Hide Intercom */ - .intercom-lightweight-app { - display: none !important; + /* Hide Intercom */ + .intercom-lightweight-app { + display: none !important; + } + + /* Switch image rendering to pixelated */ + img { + image-rendering: pixelated; } `, threshold: screenshotOptions?.threshold ?? undefined, fullPage: testEntry.fullPage ?? false, - beforeScreenshot: async () => { + beforeScreenshot: async ({ runStabilization }) => { + await runStabilization(); await waitForIcons(page); if (screenshotOptions?.waitForTOCScrolling !== false) { await waitForTOCScrolling(page); diff --git a/packages/gitbook/package.json b/packages/gitbook/package.json index d6d5c1198..85cc147bf 100644 --- a/packages/gitbook/package.json +++ b/packages/gitbook/package.json @@ -67,11 +67,11 @@ "jwt-decode": "^4.0.0" }, "devDependencies": { - "@argos-ci/playwright": "^3.10.0", + "@argos-ci/playwright": "^4.1.0", "@cloudflare/next-on-pages": "1.13.7", "vercel": "^39.3.0", "@cloudflare/workers-types": "^4.20241230.0", - "@playwright/test": "^1.49.1", + "@playwright/test": "^1.51.1", "@types/js-cookie": "^3.0.6", "@types/jsontoxml": "^1.0.5", "@types/jsonwebtoken": "^9.0.6", diff --git a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx index c5a246d54..3b1668579 100644 --- a/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx +++ b/packages/gitbook/src/components/Header/HeaderMobileMenu.tsx @@ -47,17 +47,11 @@ export function HeaderMobileMenu(props: Partial - + ); } diff --git a/packages/gitbook/src/components/Search/SearchButton.tsx b/packages/gitbook/src/components/Search/SearchButton.tsx index 97c2544b0..5244dbb60 100644 --- a/packages/gitbook/src/components/Search/SearchButton.tsx +++ b/packages/gitbook/src/components/Search/SearchButton.tsx @@ -99,7 +99,7 @@ export function SearchButton(props: { children?: React.ReactNode; style?: ClassV ); } -const Shortcut = () => { +function Shortcut() { const [operatingSystem, setOperatingSystem] = useState(null); useEffect(() => { @@ -117,20 +117,7 @@ const Shortcut = () => { return operatingSystem ? ( - ) : null; -}; + ) : ( + + ); +}