chore: Upgrade Cypress from v9 to v12 (#37810)

Author: LekoArts

.circleci/config.yml

@@ -315,11 +315,8 @@ jobs:
 
   e2e_tests_path-prefix:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: pzj19c
-      CYPRESS_RECORD_KEY: c9ea1b91-eed6-4bac-be41-eccd75a48969
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_PATH_PREFIX}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/path-prefix
 
@@ -375,75 +372,60 @@ jobs:
 
   e2e_tests_development_runtime_with_react_18:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: nusozx
-      CYPRESS_RECORD_KEY: 6500fa9b-7710-4968-b321-1a544c9a1fdc
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_DEV_RUNTIME_REACT_18}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/development-runtime
 
   e2e_tests_production_runtime_with_react_18:
     <<: *e2e-executor
     steps:
+      - run: echo 'export CY_CLOUD_PROD_RUNTIME_OFFLINE_REACT_18="${CY_CLOUD_PROD_RUNTIME_OFFLINE_REACT_18}"' >> "$BASH_ENV"
+      - run: echo 'export CY_CLOUD_PROD_RUNTIME_REACT_18="${CY_CLOUD_PROD_RUNTIME_REACT_18}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/production-runtime
-          test_command: CYPRESS_PROJECT_ID=5k8zbj CYPRESS_RECORD_KEY=ec36ff6b-3db9-48a9-8f7b-2faf301ab800 yarn test && CYPRESS_PROJECT_ID=yvdct2 CYPRESS_RECORD_KEY=2a4f4f31-0dfb-4a56-80e0-9ed42a1131a4 yarn test:offline
+          test_command: CYPRESS_PROJECT_ID=5k8zbj CYPRESS_RECORD_KEY=${CY_CLOUD_PROD_RUNTIME_REACT_18} yarn test && CYPRESS_PROJECT_ID=yvdct2 CYPRESS_RECORD_KEY=${CY_CLOUD_PROD_RUNTIME_OFFLINE_REACT_18} yarn test:offline
 
   themes_e2e_tests_development_runtime:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: 9parq5
-      CYPRESS_RECORD_KEY: 3fb49000-4143-4bd8-9ab4-219389060910
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_THEMES_DEV_RUNTIME}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/themes
           test_command: cd development-runtime; yarn test
 
   themes_e2e_tests_production_runtime:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: c9rs27
-      CYPRESS_RECORD_KEY: e4e7b3b8-e1e7-4a74-a0c9-9ac76585236b
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_THEMES_PROD_RUNTIME}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/themes
           test_command: cd production-runtime; yarn test
 
   e2e_tests_mdx:
     <<: *e2e-executor
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_MDX}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/mdx
-          test_command: CYPRESS_PROJECT_ID=spbj28 CYPRESS_RECORD_KEY=af30ea46-121f-4fb7-97dd-f17ec224402e yarn test
 
   e2e_tests_visual-regression:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: nz99aw
-      CYPRESS_RECORD_KEY: ed4b1af1-bd97-47d4-bb09-3cab2435a147
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_VISUAL_REGRESSION}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/visual-regression
-          test_command: yarn test
       - store_artifacts:
           path: e2e-tests/visual-regression/__diff_output__
       - store_test_results:
           path: e2e-tests/visual-regression/cypress/results
 
   e2e_tests_contentful:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: 2193cm
-      CYPRESS_RECORD_KEY: 57e9563e-af49-494c-837c-5af53c2d6f76
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_CONTENTFUL}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/contentful
-          test_command: yarn test
       # we build a second time to see if warm/cached builds are successful
       - e2e-test:
           test_path: e2e-tests/contentful
@@ -455,14 +437,10 @@ jobs:
 
   e2e_tests_trailing-slash:
     <<: *e2e-executor
-    environment:
-      <<: *e2e-executor-env
-      CYPRESS_PROJECT_ID: ofxgw8
-      CYPRESS_RECORD_KEY: 29c32742-6b85-40e0-9b45-a4c722749d52
     steps:
+      - run: echo 'export CYPRESS_RECORD_KEY="${CY_CLOUD_TRAILING_SLASH}"' >> "$BASH_ENV"
       - e2e-test:
           test_path: e2e-tests/trailing-slash
-          test_command: yarn test
       - store_test_results:
           path: e2e-tests/trailing-slash/cypress/results
 

e2e-tests/contentful/cypress.config.ts

@@ -0,0 +1,30 @@
+import { defineConfig } from "cypress"
+import { addMatchImageSnapshotPlugin } from "@simonsmith/cypress-image-snapshot/plugin"
+
+export default defineConfig({
+  e2e: {
+    baseUrl: `http://localhost:9000`,
+    specPattern: `cypress/integration/**/*.{js,ts}`,
+    projectId: `2193cm`,
+    viewportWidth: 1440,
+    viewportHeight: 900,
+    retries: {
+      runMode: 0,
+      openMode: 0
+    },
+    videoUploadOnPasses: false,
+    setupNodeEvents(on, config) {
+      addMatchImageSnapshotPlugin(on, config)
+      on("before:browser:launch", (browser = {} as Cypress.Browser, launchOptions) => {
+        if (browser.family === "chromium" || browser.name === "chrome") {
+          // Make retina screens run at 1x density so they match the versions in CI
+          launchOptions.args.push("--force-device-scale-factor=1")
+        }
+        return launchOptions
+      })
+    },
+  },
+  env: {
+    requireSnapshots: true,
+  }
+})

e2e-tests/contentful/cypress.json

@@ -1,5 +1,3 @@
-import { parseSrcset } from "srcset"
-
 const testConfig = {
   retries: {
     runMode: 2,

e2e-tests/contentful/cypress/integration/gatsby-image-cdn.js

@@ -0,0 +1,14 @@
+import "gatsby-cypress"
+import { addMatchImageSnapshotCommand } from "@simonsmith/cypress-image-snapshot/command"
+import { register } from "@cypress/snapshot"
+
+addMatchImageSnapshotCommand({
+  customDiffDir: `/__diff_output__`,
+  customDiffConfig: {
+    threshold: 0.1,
+  },
+  failureThreshold: 0.08,
+  failureThresholdType: `percent`,
+})
+
+register()

e2e-tests/contentful/cypress/plugins/index.js

@@ -0,0 +1,8 @@
+{
+  "compilerOptions": {
+    "target": "es5",
+    "lib": ["es5", "dom"],
+    "types": ["cypress", "node"]
+  },
+  "include": ["**/*.ts"]
+}

e2e-tests/contentful/cypress/snapshots/gatsby-image-cdn.js/gatsby-image-cdn-0.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-image-cdn.js/gatsby-image-cdn-0.snap.png

@@ -19,13 +19,15 @@
   },
   "devDependencies": {
     "@cypress/snapshot": "^2.1.7",
+    "@simonsmith/cypress-image-snapshot": "^6.0.1",
+    "@types/simonsmith__cypress-image-snapshot": "npm:@types/cypress-image-snapshot",
     "cross-env": "^7.0.3",
-    "cypress": "^9.7.0",
-    "cypress-image-snapshot": "^4.0.1",
+    "cypress": "^12.9.0",
     "gatsby-cypress": "next",
     "prettier": "^2.8.7",
     "srcset": "^5.0.0",
-    "start-server-and-test": "^1.15.3"
+    "start-server-and-test": "^2.0.0",
+    "typescript": "^5.0.2"
   },
   "keywords": [
     "gatsby"
@@ -39,8 +41,8 @@
     "test": "cross-env CYPRESS_SUPPORT=y npm run build && npm run start-server-and-test",
     "start-server-and-test": "start-server-and-test serve http://localhost:9000 cy:run",
     "serve": "gatsby serve",
-    "cy:open": "cypress open",
-    "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome"
+    "cy:open": "cypress open --browser chrome --e2e",
+    "cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome --e2e"
   },
   "repository": {
     "type": "git",

e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/blurred-0.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-plugin-image.js/blurred-0.snap.png

@@ -0,0 +1,34 @@
+import { defineConfig } from "cypress"
+import { addMatchImageSnapshotPlugin } from "@simonsmith/cypress-image-snapshot/plugin"
+import { gatsbyConfigUtils } from "./cypress/utils/gatsby-config"
+import { blockResourcesUtils } from "./cypress/utils/block-resources"
+
+export default defineConfig({
+  e2e: {
+    baseUrl: `http://localhost:8000`,
+    specPattern: `cypress/integration/**/*.{js,ts}`,
+    projectId: `nusozx`,
+    experimentalRunAllSpecs: true,
+    chromeWebSecurity: false,
+    defaultCommandTimeout: 30000,
+    retries: 2,
+    videoUploadOnPasses: false,
+    setupNodeEvents(on, config) {
+      addMatchImageSnapshotPlugin(on, config)
+      on(`task`, {
+        ...blockResourcesUtils,
+        ...gatsbyConfigUtils,
+      })
+      on(`before:browser:launch`, (browser = {} as Cypress.Browser, launchOptions) => {
+        if (browser.family === `chromium` || browser.name === `chrome`) {
+          // Make retina screens run at 1x density so they match the versions in CI
+          launchOptions.args.push(`--force-device-scale-factor=1`)
+        }
+        return launchOptions
+      })
+    },
+  },
+  env: {
+    requireSnapshots: true,
+  }
+})

e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/blurred-1.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-plugin-image.js/blurred-1.snap.png

@@ -14,8 +14,11 @@ const errorPlaceholder = `// compile-error`
 const errorReplacement = `a b`
 
 describe(`testing error overlay and ability to automatically recover from webpack compile errors`, () => {
-  it(`displays content initially (no errors yet)`, () => {
+  beforeEach(() => {
     cy.visit(`/error-handling/compile-error/`).waitForRouteChange()
+  })
+
+  it(`displays content initially (no errors yet)`, () => {
     cy.findByTestId(`hot`).should(`contain.text`, `Working`)
   })
 

e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/constrained-0.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-plugin-image.js/constrained-0.snap.png

@@ -27,15 +27,18 @@ after(() => {
 const errorPlaceholder = `false`
 const errorReplacement = `true`
 
-describe(`testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`, () => {
-  it(`displays content initially (no errors yet)`, () => {
+describe(`testing error overlay and ability to automatically recover runtime errors cause by content changes (page queries variant)`, { testIsolation: false } , () => {
+  before(() => {
     cy.visit(`/error-handling/page-query-result-runtime-error/`, {
       // Hacky way to disable "uncaught:exception" message in error message itself
       // See https://github.com/cypress-io/cypress/issues/254#issuecomment-292190924
       onBeforeLoad: win => {
         win.onerror = null
       },
     }).waitForRouteChange()
+  })
+
+  it(`displays content initially (no errors yet)`, () => {
     cy.findByTestId(`hot`).should(`contain.text`, `Working`)
     cy.findByTestId(`results`).should(`contain.text`, `"hasError": false`)
   })

e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/constrained-1.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-plugin-image.js/constrained-1.snap.png

@@ -13,9 +13,12 @@ after(() => {
 const errorPlaceholder = `# query-validation-error`
 const errorReplacement = `fieldThatDoesNotExistOnSiteMapType`
 
-describe(`testing error overlay and ability to automatically recover from query extraction validation errors`, () => {
-  it(`displays content initially (no errors yet)`, () => {
+describe(`testing error overlay and ability to automatically recover from query extraction validation errors`, { testIsolation: false }, () => {
+  before(() => {
     cy.visit(`/error-handling/query-validation-error/`).waitForRouteChange()
+  })
+
+  it(`displays content initially (no errors yet)`, () => {
     cy.findByTestId(`hot`).should(`contain.text`, `Working`)
   })
 

e2e-tests/contentful/cypress/snapshots/gatsby-plugin-image.js/dominant-color-0.snap.png renamed to e2e-tests/contentful/cypress/snapshots/cypress/integration/gatsby-plugin-image.js/dominant-color-0.snap.png

@@ -21,15 +21,18 @@ after(() => {
 const errorPlaceholder = `// runtime-error`
 const errorReplacement = `window.a.b.c.d.e.f.g()`
 
-describe(`testing error overlay and ability to automatically recover from runtime errors`, () => {
-  it(`displays content initially (no errors yet)`, () => {
+describe(`testing error overlay and ability to automatically recover from runtime errors`, { testIsolation: false }, () => {
+  before(() => {
     cy.visit(`/error-handling/runtime-error/`, {
       // Hacky way to disable "uncaught:exception" message in error message itself
       // See https://github.com/cypress-io/cypress/issues/254#issuecomment-292190924
       onBeforeLoad: win => {
         win.onerror = null
       },
     }).waitForRouteChange()
+  })
+
+  it(`displays content initially (no errors yet)`, () => {
     cy.findByTestId(`hot`).should(`contain.text`, `Working`)
   })