Skip to content

chore: Upgrade Cypress from v9 to v12 #37810

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Merged
merged 41 commits into from
Apr 6, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
41 commits
Select commit Hold shift + click to select a range
4af2acc
run-with-conditional-flag: Use CYPRESS_GROUP_NAME env var
LekoArts Mar 30, 2023
275cce3
mdx
LekoArts Mar 30, 2023
499d5f4
path-prefix
LekoArts Mar 30, 2023
aea5d66
visual-regression config changes
LekoArts Mar 30, 2023
6ec0c80
visual-regression move snapshots
LekoArts Mar 30, 2023
3fb82e4
trailing-slash
LekoArts Mar 30, 2023
3c08b34
then don't use TS for configs... :tableflip:
LekoArts Mar 30, 2023
43d3e66
Revert "then don't use TS for configs... :tableflip:"
LekoArts Mar 30, 2023
1ba432e
add typescript dep
LekoArts Mar 30, 2023
f65ce0c
add tsconfig
LekoArts Mar 30, 2023
6cab274
themes
LekoArts Mar 30, 2023
83c8405
contentful YOLO
LekoArts Mar 30, 2023
f87a444
themes add tsconfig
LekoArts Mar 30, 2023
a76f50e
Merge branch 'master' into cypress-9-to-12
LekoArts Apr 3, 2023
d4926a2
begin development-runtime
LekoArts Apr 3, 2023
a6dd961
fix contentful image snapshots location
LekoArts Apr 3, 2023
6bbae5d
development-runtime: fix snapshot location
LekoArts Apr 3, 2023
422f5c6
contentful remove unused import
LekoArts Apr 4, 2023
2e68303
finish development-runtime?
LekoArts Apr 4, 2023
bd3d618
fix specPattern lel
LekoArts Apr 4, 2023
75def60
finish production-runtime
LekoArts Apr 4, 2023
d03b139
videoUploadOnPasses: false
LekoArts Apr 4, 2023
baf8c53
add typescript
LekoArts Apr 4, 2023
6d00a75
update package.json stuff
LekoArts Apr 4, 2023
eb4ce16
use cypress-split
LekoArts Apr 4, 2023
e2a1409
Revert "use cypress-split"
LekoArts Apr 4, 2023
32e5b90
fix typo
LekoArts Apr 4, 2023
08cc49d
fix production-runtime
LekoArts Apr 4, 2023
a3243b6
development run all specs experiment
LekoArts Apr 4, 2023
7cd422c
fix styling
LekoArts Apr 4, 2023
22125dc
fix error-handling
LekoArts Apr 4, 2023
738488c
update lifecycle-methods
LekoArts Apr 5, 2023
60e9206
move project ids to config files
LekoArts Apr 5, 2023
711683b
add group names to trailing-slash
LekoArts Apr 5, 2023
d34d6f4
use env vars
LekoArts Apr 5, 2023
439eec0
fix record script
LekoArts Apr 5, 2023
4157003
does now this work lol?
LekoArts Apr 5, 2023
5c8aaa6
setup env vars
LekoArts Apr 5, 2023
71b32d5
try again
LekoArts Apr 5, 2023
82c5a36
skip redirects
LekoArts Apr 6, 2023
c55c243
add requireSnapshots
LekoArts Apr 6, 2023
File filter

Filter by extension

Filter by extension


Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
44 changes: 11 additions & 33 deletions .circleci/config.yml
Original file line number Diff line number Diff line change
Expand Up @@ -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

Expand Down Expand Up @@ -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
Expand All @@ -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

Expand Down
30 changes: 30 additions & 0 deletions e2e-tests/contentful/cypress.config.ts
Original file line number Diff line number Diff line change
@@ -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,
}
})
9 changes: 0 additions & 9 deletions e2e-tests/contentful/cypress.json

This file was deleted.

2 changes: 0 additions & 2 deletions e2e-tests/contentful/cypress/integration/gatsby-image-cdn.js
Original file line number Diff line number Diff line change
@@ -1,5 +1,3 @@
import { parseSrcset } from "srcset"
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Unused import


const testConfig = {
retries: {
runMode: 2,
Expand Down
24 changes: 0 additions & 24 deletions e2e-tests/contentful/cypress/plugins/index.js

This file was deleted.

14 changes: 14 additions & 0 deletions e2e-tests/contentful/cypress/support/e2e.ts
Original file line number Diff line number Diff line change
@@ -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()
28 changes: 0 additions & 28 deletions e2e-tests/contentful/cypress/support/index.js

This file was deleted.

8 changes: 8 additions & 0 deletions e2e-tests/contentful/cypress/tsconfig.json
Original file line number Diff line number Diff line change
@@ -0,0 +1,8 @@
{
"compilerOptions": {
"target": "es5",
"lib": ["es5", "dom"],
"types": ["cypress", "node"]
},
"include": ["**/*.ts"]
}
12 changes: 7 additions & 5 deletions e2e-tests/contentful/package.json
Original file line number Diff line number Diff line change
Expand Up @@ -19,13 +19,15 @@
},
"devDependencies": {
"@cypress/snapshot": "^2.1.7",
"@simonsmith/cypress-image-snapshot": "^6.0.1",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

cypress-image-snapshot doesn't work with Cypress 12 and this is a fork

"@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"
Expand All @@ -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",
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Cypress now also has component testing so this tells it to directly open the e2e test suite with the chrome browser

"cy:run": "node ../../scripts/cypress-run-with-conditional-record-flag.js --browser chrome --e2e"
},
"repository": {
"type": "git",
Expand Down
34 changes: 34 additions & 0 deletions e2e-tests/development-runtime/cypress.config.ts
Original file line number Diff line number Diff line change
@@ -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,
}
})
8 changes: 0 additions & 8 deletions e2e-tests/development-runtime/cypress.json

This file was deleted.

Original file line number Diff line number Diff line change
Expand Up @@ -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`)
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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 } , () => {
Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

New default in Cypress 12 is test isolation but these tests kinda rely on them so we opt-out

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`)
})
Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
})

Expand Down
Original file line number Diff line number Diff line change
Expand Up @@ -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`)
})

Expand Down
Loading