Merge branch 'develop' into 10.0-release

* develop: feat: gray out the path to system node in cypress run header (#20121) feat: redesign server errors (#20072) test: fix awesome-typescript-loader test and remove test-binary job (#20131) fix: Fix issues with stack traces and command log in Chrome 99 (#20049) fix: `cy.type(' ')` fires click event on button-like elements. (#20067) fix: `change`, `input` events are not fired when the same option is selected again. (#19623) build: publish vue3 on latest (#20099) chore: release @cypress/webpack-preprocessor-v5.11.1 chore: release @cypress/webpack-dev-server-v1.8.1 fix: detect newly added specs in dev-server compilation (#17950) chore: Remove pkg/driver //@ts-nocheck part 3 (#19837) chore: set up semantic-pull-request GitHub Action (#20091) chore: release @cypress/react-v5.12.2 fix: remove nullish coalescing in js files to support node 12 (#20094) docs: update @cypress/webpack-preprocessor links (#19902) refactor: use aliases instead of meta (#19566)
2026-02-23 07:39:52 -06:00 · 2022-02-13 15:36:48 -05:00
parent 8a6768fee6 4b50f9eec3
commit 678bedeca6
263 changed files with 13901 additions and 1032 deletions
--- a/.gitattributes
+++ b/.gitattributes
@@ -1,3 +1,5 @@
 * text=auto

 *.json text eol=lf
+
+packages/errors/__snapshot-html__/** linguist-generated=true
--- a/.gitignore
+++ b/.gitignore
@@ -15,6 +15,8 @@ Cached Theme Material Design.pak

 # from data-context, compiled .js files
 packages/data-context/src/**/*.js
+packages/errors/src/**/*.js
+packages/errors/test/**/*.js

 # from driver
 packages/driver/cypress/videos
@@ -61,6 +63,7 @@ packages/socket/lib/*.js

 # from system-tests
 system-tests/.projects
+system-tests/.http-mitm-proxy
 system-tests/fixtures/large-img

 # from npm/react
@@ -76,6 +79,11 @@ system-tests/fixtures/large-img
 # from runner-ct
 /packages/runner-ct/cypress/screenshots

+# from errors
+/packages/errors/__snapshot-images__
+/packages/errors/__snapshot-md__
+/packages/errors/__snapshot-html-local__
+
 # graphql, auto-generated
 /packages/launchpad/src/generated
 /packages/app/src/generated
--- a/.vscode/settings.json
+++ b/.vscode/settings.json
@@ -36,6 +36,7 @@
  "i18n-ally.keystyle": "nested",

  // Volar is the main extension that powers Vue's language features.
-  "volar.autoCompleteRefs": false,
+  // These are commented out because they slow down node development
+  // "volar.autoCompleteRefs": false,
  // "volar.takeOverMode.enabled": true
 }
--- a/browser-versions.json
+++ b/browser-versions.json
@@ -1,4 +1,4 @@
 {
-  "chrome:beta": "98.0.4758.80",
+  "chrome:beta": "99.0.4844.27",
  "chrome:stable": "98.0.4758.80"
 }
--- a/circle.yml
+++ b/circle.yml
@@ -997,6 +997,7 @@ jobs:
      - run:
          name: Linting 🧹
          command: |
+            yarn clean
            git clean -df
            yarn lint
      - run:
@@ -1098,12 +1099,14 @@ jobs:
            # run type checking for each individual package
            - run: yarn lerna run types
            - verify-mocha-results:
-                expectedResultCount: 9
+                expectedResultCount: 10
      - store_test_results:
          path: /tmp/cypress
      # CLI tests generate HTML files with sample CLI command output
      - store_artifacts:
          path: cli/test/html
+      - store_artifacts:
+          path: packages/errors/__snapshot-images__
      - store-npm-logs

  unit-tests-release:
@@ -1941,14 +1944,6 @@ jobs:
          browser: "electron"
          pull_request_id: 524

-  test-binary-against-awesome-typescript-loader:
-    <<: *defaults
-    steps:
-      - test-binary-against-repo:
-          repo: cypress-test-awesome-typescript-loader
-          browser: "electron"
-          pull_request_id: 8
-
  test-binary-against-kitchensink-firefox:
    <<: *defaults
    resource_class: medium
@@ -2292,26 +2287,6 @@ linux-workflow: &linux-workflow
    - test-binary-against-kitchensink:
        requires:
          - create-build-artifacts
-    # when working on a feature or a fix,
-    # you are probably working in a branch
-    # and you want to run a specific PR in the cypress-example-recipes
-    # against this branch. This workflow job includes
-    # the job but only when it runs on specific branch
-    # DO NOT DELETE THIS JOB BEFORE MERGING TO DEVELOP
-    # on "develop" this branch will be ignored anyway
-    # and someone else might use this job definition for another
-    # feature branch and would just update the branch filter
-    # - test-binary-against-recipe-pull-request:
-    #     name: Test cypress run parsing
-    #     filters:
-    #       branches:
-    #         only:
-    #           - cli-to-module-api-7760
-        # requires:
-        #   - create-build-artifacts
-    - test-binary-against-awesome-typescript-loader:
-        requires:
-          - create-build-artifacts
    - test-binary-and-npm-against-other-projects:
        context: test-runner:trigger-test-jobs
        <<: *mainBuildFilters
--- a/guides/error-handling.md
+++ b/guides/error-handling.md
@@ -0,0 +1,85 @@
+## Error Handling in Cypress
+
+Clear, consistent, errors are one of the important parts of the Cypress experience. When something goes wrong, there should be clear, actionable feedback for the user about exactly *what* went wrong, *where* it went wrong, and next steps on how to fix.
+
+### @packages/errors
+
+All error related logic for the server should be added to `@packages/errors`. This logic has been separated out from the `@packages/server` to enable strict type checking & use in other packages we have added in the `10.0-release` branch.
+
+Summary of the Errors package:
+
+- `errors.ts`: A key/value mapping of known errors to functions returning "ErrorTemplates", described below, also includes/re-exports several helper utilities: 
+  - `get` / `getError`: builds & retrieves the error as a `CypressError`, should be the main way we retrieve errors throughout Cypress. Aliased as `errors.get` for existing use in the server package
+  - `throw` / `throwErr`: Get & throw the error, so we can spy/stub it in a test. Aliased as `errors.throw` for existing use in the server package
+  - `logWarning`: Logs the error as a warning to the console, aliased as `errors.log` for existing use in the server package
+- `errTemplate.ts`: Tagged template literal formatting the error as described below
+- `stackUtils.ts`: Utilities for working with a stack trace, extended by the driver package
+
+### errTemplate
+
+The `errTemplate` is a tagged template literal. It allows us to maintain consistent behavior & formatting in our error messages, when we see a variable, we format it depending on the target environment.
+
+The error message returns a message that defaults to being formatted for the terminal, and has a `forBrowser` method which returns the error message where the variables are wrapped in backticks '`' for Markdown display in the browser.
+
+Return Value of `errTemplate` (`ErrTemplateResult`):
+
+```ts
+{
+  // Will always exist, this is the terminal-formatted error message
+  message: string, 
+  // Will always exist, this is the browser-formatted error message
+  messageMarkdown: string, 
+  details?: string, // Exists if there is `details()` call in the errTemplate
+  originalError?: ErrorLike // Exists if an error was passed into the `details()`
+}
+```
+
+#### Example:
+
+```ts
+CANNOT_TRASH_ASSETS: (arg1: string) => {
+  return errTemplate`\
+      Warning: We failed to trash the existing run results.
+
+      This error will not alter the exit code.
+
+      ${details(arg1)}`
+},  
+```
+
+In this case, `arg1` will be highlighted in yellow when printed to the terminal.
+
+
+```ts
+PLUGINS_FILE_ERROR: (arg1: string, arg2: Error) => {
+  return errTemplate`\
+      The plugins file is missing or invalid.
+
+      Your \`pluginsFile\` is set to ${arg1}, but either the file is missing, it contains a syntax error, or threw an error when required. The \`pluginsFile\` must be a \`.js\`, \`.ts\`, or \`.coffee\` file.
+
+      Or you might have renamed the extension of your \`pluginsFile\`. If that's the case, restart the test runner.
+
+      Please fix this, or set \`pluginsFile\` to \`false\` if a plugins file is not necessary for your project.
+
+      ${details(arg2)}
+    `
+},
+```
+
+`arg1` will be highlighted in `blue` for the terminal, and wrapped in backticks when called with `forBrowser`. Details will be printed in `yellow` as a stack trace when printed to the terminal, or shown as a stack-trace in the browser.
+
+### Error Wrapping
+
+Any time we know about an edge case that is an error, we should define an error in `errors.ts`. This error should be retrieved by `getError`, which converts it to a `CypressError`. 
+
+The `CypressError` is an `Error` containing the message returned from the `errTemplate`. The `stack` is set to that of the `originalError` if it exists (i.e. the error object passed into `details`), otherwise it's the `stack` from where the `getError` / `throwError` is called.
+
+
+The `CypressError` has an `isCypressErr` prop which we use as a duck-type guard against exiting the process when logging exceptions. It also maintains a reference to the `originalError` if it exists.
+
+### Child-Process Errors
+
+All errors that occur in a child process spawned by Cypress should be sent over the `ipc` bridge using `util.serializeError`. 
+
+This ensures the `name`, `message`, `stack`, and any other relevant details are preserved and can be handled by the standard process of Cypress' error standardization / wrapping.
+
--- a/npm/vite-dev-server/src/makeCypressPlugin.ts
+++ b/npm/vite-dev-server/src/makeCypressPlugin.ts
@@ -55,7 +55,6 @@ export const makeCypressPlugin = (
      base = config.base
    },
    async transformIndexHtml () {
-      debug('transformIndexHtml with base', base)
      const indexHtmlPath = indexHtml ? resolve(projectRoot, indexHtml) : resolve(__dirname, '..', 'index.html')
      const indexHtmlContent = await readFile(indexHtmlPath, { encoding: 'utf8' })
      // find </body> last index
--- a/npm/vite-dev-server/src/resolveServerConfig.ts
+++ b/npm/vite-dev-server/src/resolveServerConfig.ts
@@ -25,7 +25,7 @@ export interface StartDevServerOptions {
  indexHtml?: string
 }

-export const resolveServerConfig = async ({ viteConfig, options, indexHtml }: StartDevServerOptions): Promise<InlineConfig> => {
+export const resolveServerConfig = async ({ viteConfig, options }: StartDevServerOptions): Promise<InlineConfig> => {
  const { projectRoot, supportFile, namespace } = options.config

  const requiredOptions: InlineConfig = {
--- a/package.json
+++ b/package.json
@@ -17,7 +17,7 @@
    "bump": "node ./scripts/binary.js bump",
    "check-node-version": "node scripts/check-node-version.js",
    "check-terminal": "node scripts/check-terminal.js",
-    "clean": "lerna run clean --parallel --no-bail",
+    "clean": "lerna run clean --parallel --no-bail || echo 'ok, errors while cleaning'",
    "check-ts": "gulp checkTs",
    "clean-deps": "find . -depth -name node_modules -type d -exec rm -rf {} \\;",
    "clean-untracked-files": "git clean -d -f",
@@ -28,6 +28,7 @@
    "cypress:open:debug": "node ./scripts/debug.js cypress:open",
    "precypress:run": "yarn ensure-deps",
    "cypress:run": "cypress run --dev",
+    "cypress:run:ct": "cypress run-ct --dev",
    "precypress:run:debug": "yarn ensure-deps",
    "cypress:run:debug": "node ./scripts/debug.js cypress:run",
    "cypress:verify": "cypress verify --dev",
@@ -50,7 +51,7 @@
    "stop-only": "npx stop-only --skip .cy,.publish,.projects,node_modules,dist,dist-test,fixtures,lib,bower_components,src,__snapshots__ --exclude cypress-tests.ts,*only.cy.js",
    "stop-only-all": "yarn stop-only --folder packages",
    "pretest": "yarn ensure-deps",
-    "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{config,data-context,electron,extension,https-proxy,launcher,net-stubbing,network,proxy,rewriter,socket}'\"",
+    "test": "yarn lerna exec yarn test --scope cypress --scope \"'@packages/{config,errors,data-context,electron,extension,https-proxy,launcher,net-stubbing,network,proxy,rewriter,socket}'\"",
    "test-debug": "lerna exec yarn test-debug --ignore \"'@packages/{driver,root,static,web-config}'\"",
    "pretest-e2e": "yarn ensure-deps",
    "test-integration": "lerna exec yarn test-integration --ignore \"'@packages/{driver,root,static,web-config}'\"",
@@ -125,7 +126,6 @@
    "@typescript-eslint/eslint-plugin": "4.18.0",
    "@typescript-eslint/parser": "4.18.0",
    "@urql/introspection": "^0.3.0",
-    "ansi-styles": "3.2.1",
    "arg": "4.1.2",
    "ascii-table": "0.0.9",
    "autobarrel": "^1.1.0",
@@ -213,7 +213,7 @@
    "snap-shot-it": "7.9.3",
    "start-server-and-test": "1.10.8",
    "stop-only": "3.0.1",
-    "strip-ansi": "4.0.0",
+    "strip-ansi": "6.0.0",
    "term-to-html": "1.2.0",
    "terminal-banner": "1.1.0",
    "through": "2.3.8",
--- a/packages/config/snapshots/validation_spec.js
+++ b/packages/config/snapshots/validation_spec.js
@@ -6,9 +6,12 @@ exports['empty list of browsers'] = `
 Expected at least one browser
 `

-exports['browsers list with a string'] = `
-Found an error while validating the \`browsers\` list. Expected \`name\` to be a non-empty string. Instead the value was: \`"foo"\`
-`
+exports['browsers list with a string'] = {
+  "key": "name",
+  "value": "foo",
+  "type": "a non-empty string",
+  "list": "browsers"
+}

 exports['src/validation .isValidBrowser passes valid browsers and forms error messages for invalid ones isValidBrowser 1'] = {
  "name": "isValidBrowser",
@@ -51,7 +54,14 @@ exports['src/validation .isValidBrowser passes valid browsers and forms error me
        "name": "No display name",
        "family": "chromium"
      },
-      "expect": "Expected `displayName` to be a non-empty string. Instead the value was: `{\"name\":\"No display name\",\"family\":\"chromium\"}`"
+      "expect": {
+        "key": "displayName",
+        "value": {
+          "name": "No display name",
+          "family": "chromium"
+        },
+        "type": "a non-empty string"
+      }
    },
    {
      "given": {
@@ -59,99 +69,158 @@ exports['src/validation .isValidBrowser passes valid browsers and forms error me
        "displayName": "Bad family browser",
        "family": "unknown family"
      },
-      "expect": "Expected `family` to be either chromium or firefox. Instead the value was: `{\"name\":\"bad family\",\"displayName\":\"Bad family browser\",\"family\":\"unknown family\"}`"
+      "expect": {
+        "key": "family",
+        "value": {
+          "name": "bad family",
+          "displayName": "Bad family browser",
+          "family": "unknown family"
+        },
+        "type": "either chromium or firefox"
+      }
    }
  ]
 }

-exports['not one of the strings error message'] = `
-Expected \`test\` to be one of these values: "foo", "bar". Instead the value was: \`"nope"\`
-`
+exports['not one of the strings error message'] = {
+  "key": "test",
+  "value": "nope",
+  "type": "one of these values: \"foo\", \"bar\""
+}

-exports['number instead of string'] = `
-Expected \`test\` to be one of these values: "foo", "bar". Instead the value was: \`42\`
-`
+exports['number instead of string'] = {
+  "key": "test",
+  "value": 42,
+  "type": "one of these values: \"foo\", \"bar\""
+}

-exports['null instead of string'] = `
-Expected \`test\` to be one of these values: "foo", "bar". Instead the value was: \`null\`
-`
+exports['null instead of string'] = {
+  "key": "test",
+  "value": null,
+  "type": "one of these values: \"foo\", \"bar\""
+}

-exports['not one of the numbers error message'] = `
-Expected \`test\` to be one of these values: 1, 2, 3. Instead the value was: \`4\`
-`
+exports['not one of the numbers error message'] = {
+  "key": "test",
+  "value": 4,
+  "type": "one of these values: 1, 2, 3"
+}

-exports['string instead of a number'] = `
-Expected \`test\` to be one of these values: 1, 2, 3. Instead the value was: \`"foo"\`
-`
+exports['string instead of a number'] = {
+  "key": "test",
+  "value": "foo",
+  "type": "one of these values: 1, 2, 3"
+}

-exports['null instead of a number'] = `
-Expected \`test\` to be one of these values: 1, 2, 3. Instead the value was: \`null\`
-`
+exports['null instead of a number'] = {
+  "key": "test",
+  "value": null,
+  "type": "one of these values: 1, 2, 3"
+}

-exports['src/validation .isStringOrFalse returns error message when value is neither string nor false 1'] = `
-Expected \`mockConfigKey\` to be a string or false. Instead the value was: \`null\`
-`
+exports['src/validation .isStringOrFalse returns error message when value is neither string nor false 1'] = {
+  "key": "mockConfigKey",
+  "value": null,
+  "type": "a string or false"
+}

-exports['src/validation .isBoolean returns error message when value is a not a string 1'] = `
-Expected \`mockConfigKey\` to be a string. Instead the value was: \`1\`
-`
+exports['src/validation .isBoolean returns error message when value is a not a string 1'] = {
+  "key": "mockConfigKey",
+  "value": 1,
+  "type": "a string"
+}

-exports['src/validation .isString returns error message when value is a not a string 1'] = `
-Expected \`mockConfigKey\` to be a string. Instead the value was: \`1\`
-`
+exports['src/validation .isString returns error message when value is a not a string 1'] = {
+  "key": "mockConfigKey",
+  "value": 1,
+  "type": "a string"
+}

-exports['src/validation .isArray returns error message when value is a non-array 1'] = `
-Expected \`mockConfigKey\` to be an array. Instead the value was: \`1\`
-`
+exports['src/validation .isArray returns error message when value is a non-array 1'] = {
+  "key": "mockConfigKey",
+  "value": 1,
+  "type": "an array"
+}

-exports['not string or array'] = `
-Expected \`mockConfigKey\` to be a string or an array of strings. Instead the value was: \`null\`
-`
+exports['not string or array'] = {
+  "key": "mockConfigKey",
+  "value": null,
+  "type": "a string or an array of strings"
+}

-exports['array of non-strings'] = `
-Expected \`mockConfigKey\` to be a string or an array of strings. Instead the value was: \`[1,2,3]\`
-`
+exports['array of non-strings'] = {
+  "key": "mockConfigKey",
+  "value": [
+    1,
+    2,
+    3
+  ],
+  "type": "a string or an array of strings"
+}

-exports['src/validation .isNumberOrFalse returns error message when value is a not number or false 1'] = `
-Expected \`mockConfigKey\` to be a number or false. Instead the value was: \`null\`
-`
+exports['src/validation .isNumberOrFalse returns error message when value is a not number or false 1'] = {
+  "key": "mockConfigKey",
+  "value": null,
+  "type": "a number or false"
+}

-exports['src/validation .isPlainObject returns error message when value is a not an object 1'] = `
-Expected \`mockConfigKey\` to be a plain object. Instead the value was: \`1\`
-`
+exports['src/validation .isPlainObject returns error message when value is a not an object 1'] = {
+  "key": "mockConfigKey",
+  "value": 1,
+  "type": "a plain object"
+}

-exports['src/validation .isNumber returns error message when value is a not a number 1'] = `
-Expected \`mockConfigKey\` to be a number. Instead the value was: \`"string"\`
-`
+exports['src/validation .isNumber returns error message when value is a not a number 1'] = {
+  "key": "mockConfigKey",
+  "value": "string",
+  "type": "a number"
+}

-exports['invalid retry value'] = `
-Expected \`mockConfigKey\` to be a positive number or null or an object with keys "openMode" and "runMode" with values of numbers or nulls. Instead the value was: \`"1"\`
-`
+exports['invalid retry value'] = {
+  "key": "mockConfigKey",
+  "value": "1",
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}

-exports['invalid retry object'] = `
-Expected \`mockConfigKey\` to be a positive number or null or an object with keys "openMode" and "runMode" with values of numbers or nulls. Instead the value was: \`{"fakeMode":1}\`
-`
+exports['invalid retry object'] = {
+  "key": "mockConfigKey",
+  "value": {
+    "fakeMode": 1
+  },
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}

-exports['src/validation .isValidClientCertificatesSet returns error message for certs not passed as an array array 1'] = `
-Expected \`mockConfigKey\` to be a positive number or null or an object with keys "openMode" and "runMode" with values of numbers or nulls. Instead the value was: \`"1"\`
-`
+exports['src/validation .isValidClientCertificatesSet returns error message for certs not passed as an array array 1'] = {
+  "key": "mockConfigKey",
+  "value": "1",
+  "type": "a positive number or null or an object with keys \"openMode\" and \"runMode\" with values of numbers or nulls"
+}

-exports['src/validation .isValidClientCertificatesSet returns error message for certs object without url 1'] = `
-Expected \`clientCertificates[0].url\` to be a URL matcher. Instead the value was: \`undefined\`
-`
+exports['src/validation .isValidClientCertificatesSet returns error message for certs object without url 1'] = {
+  "key": "clientCertificates[0].url",
+  "type": "a URL matcher"
+}

-exports['missing https protocol'] = `
-Expected \`clientCertificates[0].url\` to be an https protocol. Instead the value was: \`"http://url.com"\`
-`
+exports['missing https protocol'] = {
+  "key": "clientCertificates[0].url",
+  "value": "http://url.com",
+  "type": "an https protocol"
+}

-exports['invalid url'] = `
-Expected \`clientCertificates[0].url\` to be a valid URL. Instead the value was: \`"not *"\`
-`
+exports['invalid url'] = {
+  "key": "clientCertificates[0].url",
+  "value": "not *",
+  "type": "a valid URL"
+}

-exports['not qualified url'] = `
-Expected \`mockConfigKey\` to be a fully qualified URL (starting with \`http://\` or \`https://\`). Instead the value was: \`"url.com"\`
-`
+exports['not qualified url'] = {
+  "key": "mockConfigKey",
+  "value": "url.com",
+  "type": "a fully qualified URL (starting with `http://` or `https://`)"
+}

-exports['empty string'] = `
-Expected \`mockConfigKey\` to be a fully qualified URL (starting with \`http://\` or \`https://\`). Instead the value was: \`""\`
-`
+exports['empty string'] = {
+  "key": "mockConfigKey",
+  "value": "",
+  "type": "a fully qualified URL (starting with `http://` or `https://`)"
+}
--- a/packages/config/lib/validation.js
+++ b/packages/config/lib/validation.js
@@ -11,17 +11,12 @@ const path = require('path')
 const str = JSON.stringify
 const { isArray, isString, isFinite: isNumber } = _

-/**
- * Forms good Markdown-like string message.
- * @param {string} key - The key that caused the error
- * @param {string} type - The expected type name
- * @param {any} value - The actual value
- * @returns {string} Formatted error message
-*/
 const errMsg = (key, value, type) => {
-  return `Expected \`${key}\` to be ${type}. Instead the value was: \`${str(
+  return {
+    key,
    value,
-  )}\``
+    type,
+  }
 }

 const isFullyQualifiedUrl = (value) => {
@@ -91,10 +86,12 @@ const isValidBrowserList = (key, browsers) => {
  }

  for (let k = 0; k < browsers.length; k += 1) {
-    const err = isValidBrowser(browsers[k])
+    const validationResult = isValidBrowser(browsers[k])

-    if (err !== true) {
-      return `Found an error while validating the \`browsers\` list. ${err}`
+    if (validationResult !== true) {
+      validationResult.list = 'browsers'
+
+      return validationResult
    }
  }

--- a/packages/config/test/unit/index_spec.js
+++ b/packages/config/test/unit/index_spec.js
@@ -101,7 +101,8 @@ describe('src/index', () => {
        'baseUrl': ' ',
      }, errorFn)

-      expect(errorFn).to.have.been.calledWithMatch(/Expected `baseUrl`/)
+      expect(errorFn).to.have.been.calledWithMatch({ key: 'baseUrl' })
+      expect(errorFn).to.have.been.calledWithMatch({ type: 'a fully qualified URL (starting with `http://` or `https://`)' })
    })
  })

--- a/packages/driver/src/cy/chai/inspect.ts
+++ b/packages/driver/src/cy/chai/inspect.ts
@@ -54,6 +54,18 @@ export function create (chai) {
      typeof object.nodeName === 'string'
  }

+  // We can't just check if object instanceof ShadowRoot, because it might be the document of an iframe,
+  // which in Chrome 99+ is a separate class, and instanceof ShadowRoot returns false.
+  const isShadowRoot = function (object) {
+    return isDOMElement(object.host) && object.host.shadowRoot === object
+  }
+
+  // We can't just check if object instanceof Document, because it might be the document of an iframe,
+  // which in Chrome 99+ is a separate class, and instanceof Document returns false.
+  const isDocument = function (object) {
+    return object.defaultView && object.defaultView === object.defaultView.window
+  }
+
  let formatValueHook

  const setFormatValueHook = (fn) => formatValueHook = fn
@@ -124,6 +136,14 @@ export function create (chai) {
      }
    }

+    if (isShadowRoot(value)) {
+      return value.innerHTML
+    }
+
+    if (isDocument(value)) {
+      return value.documentElement.outerHTML
+    }
+
    // Look up the keys of the object.
    let visibleKeys = getEnumerableProperties(value)
    let keys = ctx.showHidden ? getProperties(value) : visibleKeys
--- a/packages/driver/src/cy/commands/navigation.ts
+++ b/packages/driver/src/cy/commands/navigation.ts
@@ -8,7 +8,6 @@ import $errUtils from '../../cypress/error_utils'
 import $Log from '../../cypress/log'
 import { bothUrlsMatchAndOneHasHash } from '../navigation'
 import { $Location } from '../../cypress/location'
-import type { RunState } from '../../cypress/runner'

 import debugFn from 'debug'
 const debug = debugFn('cypress:driver:navigation')
@@ -1013,7 +1012,7 @@ export default (Commands, Cypress, cy, state, config) => {
          // tell our backend we're changing domains
          // TODO: add in other things we want to preserve
          // state for like scrollTop
-          let s: RunState = {
+          let s: Record<string, any> = {
            currentId: id,
            tests: Cypress.runner.getTestsState(),
            startTime: Cypress.runner.getStartTime(),
--- a/packages/driver/src/cypress.ts
+++ b/packages/driver/src/cypress.ts
@@ -146,23 +146,30 @@ class $Cypress {
    this.config = $SetterGetter.create(config, (config) => {
      if (!window.top.__cySkipValidateConfig) {
        validateNoReadOnlyConfig(config, (errProperty) => {
-          let errMessage
+          const errPath = this.state('runnable')
+            ? 'config.invalid_cypress_config_override'
+            : 'config.invalid_test_config_override'

-          if (this.state('runnable')) {
-            errMessage = $errUtils.errByPath('config.invalid_cypress_config_override', {
-              errProperty,
-            })
-          } else {
-            errMessage = $errUtils.errByPath('config.invalid_test_config_override', {
-              errProperty,
-            })
-          }
+          const errMsg = $errUtils.errByPath(errPath, {
+            errProperty,
+          })

-          throw new this.state('specWindow').Error(errMessage)
+          throw new this.state('specWindow').Error(errMsg)
        })
      }

-      validate(config, (errMsg) => {
+      validate(config, (errResult) => {
+        const stringify = (str) => format(JSON.stringify(str))
+
+        const format = (str) => `\`${str}\``
+
+        // TODO: this does not use the @packages/error rewriting rules
+        // for stdout vs markdown - it always inserts backticks for markdown
+        // and those leak out into the stdout formatting.
+        const errMsg = _.isString(errResult)
+          ? errResult
+          : `Expected ${format(errResult.key)} to be ${errResult.type}.\n\nInstead the value was: ${stringify(errResult.value)}\``
+
        throw new this.state('specWindow').Error(errMsg)
      })
    })
--- a/packages/driver/src/cypress/commands.ts
+++ b/packages/driver/src/cypress/commands.ts
@@ -1,10 +1,8 @@
 import _ from 'lodash'
-
-import $errUtils from './error_utils'
-import $stackUtils from './stack_utils'
-
 import { allCommands } from '../cy/commands'
 import { addCommand } from '../cy/net-stubbing'
+import $errUtils from './error_utils'
+import $stackUtils from './stack_utils'

 const PLACEHOLDER_COMMANDS = ['mount', 'hover']

@@ -212,7 +210,7 @@ export default {
            errProps: {
              appendToStack: {
                title: 'From Cypress Internals',
-                content: $stackUtils.stackWithoutMessage((new Error('add command internal stack')).stack),
+                content: $stackUtils.stackWithoutMessage((new Error('add command internal stack')).stack || ''),
              } },
          })
        }
--- a/packages/driver/src/cypress/error_utils.ts
+++ b/packages/driver/src/cypress/error_utils.ts
@@ -1,12 +1,11 @@
 // See: ./errorScenarios.md for details about error messages and stack traces

-import _ from 'lodash'
 import chai from 'chai'
-
+import _ from 'lodash'
 import $dom from '../dom'
-import $utils from './utils'
-import $stackUtils, { StackAndCodeFrameIndex } from './stack_utils'
 import $errorMessages from './error_messages'
+import $stackUtils, { StackAndCodeFrameIndex } from './stack_utils'
+import $utils from './utils'

 const ERROR_PROPS = 'message type name stack sourceMappedStack parsedStack fileName lineNumber columnNumber host uncaught actual expected showDiff isPending docsUrl codeFrame'.split(' ')
 const ERR_PREPARED_FOR_SERIALIZATION = Symbol('ERR_PREPARED_FOR_SERIALIZATION')
@@ -405,7 +404,7 @@ const stackAndCodeFrameIndex = (err, userInvocationStack): StackAndCodeFrameInde
    return $stackUtils.stackWithUserInvocationStackSpliced(err, userInvocationStack)
  }

-  return { stack: $stackUtils.replacedStack(err, userInvocationStack) }
+  return { stack: $stackUtils.replacedStack(err, userInvocationStack) || '' }
 }

 const preferredStackAndCodeFrameIndex = (err, userInvocationStack) => {
--- a/packages/driver/src/cypress/stack_utils.ts
+++ b/packages/driver/src/cypress/stack_utils.ts
@@ -7,7 +7,7 @@ import { codeFrameColumns } from '@babel/code-frame'

 import $utils from './utils'
 import $sourceMapUtils from './source_map_utils'
-import { getStackLines, replacedStack, stackWithoutMessage, splitStack, unsplitStack } from '@packages/server/lib/util/stack_utils'
+import { getStackLines, replacedStack, stackWithoutMessage, splitStack, unsplitStack } from '@packages/errors/src/stackUtils'

 const whitespaceRegex = /^(\s*)*/
 const stackLineRegex = /^\s*(at )?.*@?\(?.*\:\d+\:\d+\)?$/
@@ -144,13 +144,21 @@ const captureUserInvocationStack = (ErrorConstructor, userInvocationStack?) => {
  if (!userInvocationStack) {
    const newErr = new ErrorConstructor('userInvocationStack')

+    userInvocationStack = newErr.stack
+
    // if browser natively supports Error.captureStackTrace, use it (chrome) (must be bound)
    // otherwise use our polyfill on top.Error
    const captureStackTrace = ErrorConstructor.captureStackTrace ? ErrorConstructor.captureStackTrace.bind(ErrorConstructor) : Error.captureStackTrace

    captureStackTrace(newErr, captureUserInvocationStack)

-    userInvocationStack = newErr.stack
+    // On Chrome 99+, captureStackTrace strips away the whole stack,
+    // leaving nothing beyond the error message. If we get back a single line
+    // (just the error message with no stack trace), then use the original value
+    // instead of the trimmed one.
+    if (newErr.stack.match('\n')) {
+      userInvocationStack = newErr.stack
+    }
  }

  userInvocationStack = normalizedUserInvocationStack(userInvocationStack)
--- a/packages/electron/lib/electron.js
+++ b/packages/electron/lib/electron.js
@@ -97,7 +97,7 @@ module.exports = {
    debug('dest path %s', dest)

    // make sure this path exists!
-    return fs.statAsync(appPath)
+    return fs.accessAsync(appPath)
    .then(() => {
      debug('appPath exists %s', appPath)

--- a/packages/errors/README.md
+++ b/packages/errors/README.md
@@ -0,0 +1,5 @@
+## @packages/errors
+
+Error definitions and utilities for Cypress
+
+See [Error Handling Guide](../../guides/error-handling.md) for more info
--- a/packages/errors/snapshot-html/AUTH_BROWSER_LAUNCHED.html
+++ b/packages/errors/snapshot-html/AUTH_BROWSER_LAUNCHED.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Check your browser to continue logging in.<span style="color:#e6e6e6"></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/AUTH_COULD_NOT_LAUNCH_BROWSER.html
+++ b/packages/errors/snapshot-html/AUTH_COULD_NOT_LAUNCH_BROWSER.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress was unable to open your installed browser. To continue logging in, please open this URL in your web browser:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4ec4ff">https://dashboard.cypress.io/login<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/AUTOMATION_SERVER_DISCONNECTED.html
+++ b/packages/errors/snapshot-html/AUTOMATION_SERVER_DISCONNECTED.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The automation client disconnected. Cannot continue running tests.<span style="color:#e6e6e6"></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BAD_POLICY_WARNING.html
+++ b/packages/errors/snapshot-html/BAD_POLICY_WARNING.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress detected policy settings on your computer that may cause issues.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The following policies were detected that may prevent Cypress from automating Chrome:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">HKEY_LOCAL_MACHINE\Software\Policies\Google\Chrome\ProxyServer<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">HKEY_CURRENT_USER\Software\Policies\Google\Chromium\ExtensionSettings<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">For more information, see https://on.cypress.io/bad-browser-policy<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BAD_POLICY_WARNING_TOOLTIP.html
+++ b/packages/errors/snapshot-html/BAD_POLICY_WARNING_TOOLTIP.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress detected policy settings on your computer that may cause issues with using this browser. For more information, see https://on.cypress.io/bad-browser-policy<span style="color:#e6e6e6"></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_NAME
+++ b/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_NAME
@@ -0,0 +1,67 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Can&#39;t run because you&#39;ve entered an invalid browser name.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Browser: <span style="color:#e5e510">canary<span style="color:#e05561"> was not found on your system or is not supported by Cypress.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress supports the following browsers:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">electron<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chromium<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can also use a custom browser: https://on.cypress.io/customize-browsers<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Available browsers found on your system are:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chromium<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:beta<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox:dev<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox:nightly<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:beta<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:dev<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Note: In Cypress version 4.0.0, Canary must be launched as <span style="color:#de73ff">chrome:canary<span style="color:#e05561">, not <span style="color:#de73ff">canary<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">See https://on.cypress.io/migration-guide for more information on breaking changes in 4.0.0.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_NAME.html
+++ b/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_NAME.html
@@ -0,0 +1,63 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Can&#39;t run because you&#39;ve entered an invalid browser name.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Browser: <span style="color:#e5e510">invalid-browser<span style="color:#e05561"> was not found on your system or is not supported by Cypress.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress supports the following browsers:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">electron<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chromium<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can also use a custom browser: https://on.cypress.io/customize-browsers<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Available browsers found on your system are:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chromium<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:beta<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">chrome:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox:dev<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">firefox:nightly<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:canary<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:beta<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">edge:dev<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_PATH.html
+++ b/packages/errors/snapshot-html/BROWSER_NOT_FOUND_BY_PATH.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We could not identify a known browser at the path you provided: <span style="color:#4ec4ff">/path/does/not/exist<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The output from the command we ran was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">fail whale<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/BUNDLE_ERROR.html
+++ b/packages/errors/snapshot-html/BUNDLE_ERROR.html
@@ -0,0 +1,51 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Oops...we found an error preparing this test file:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">/path/to/file<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The error was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e5e510">fail whale<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This occurred while Cypress was compiling and bundling your test code. This is usually caused by:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">- A missing file or dependency<span style="color:#e6e6e6">
+<span style="color:#e05561">- A syntax error in the file or one of its dependencies<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Fix the error in your code and re-run your tests.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL.html
+++ b/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress failed to verify that your server is running.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please start this server and then run Cypress again.<span style="color:#e6e6e6"></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_RETRYING
+++ b/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_RETRYING
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561"><span style="color:#4f5666">We will try connecting to it 60 more times...<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_RETRYING.html
+++ b/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_RETRYING.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress could not verify that this server is running:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">http://localhost:3000<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We are verifying this server because it has been configured as your <span style="color:#e5e510">baseUrl<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress automatically waits until your server is accessible before running tests.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">We will try connecting to it 60 more times...<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_WARNING.html
+++ b/packages/errors/snapshot-html/CANNOT_CONNECT_BASE_URL_WARNING.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress could not verify that this server is running:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">http://localhost:3000<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This server has been configured as your <span style="color:#e5e510">baseUrl<span style="color:#e05561">, and tests will likely fail if it is not running.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_CREATE_PROJECT_TOKEN.html
+++ b/packages/errors/snapshot-html/CANNOT_CREATE_PROJECT_TOKEN.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Can&#39;t create project&#39;s secret key.<span style="color:#e6e6e6"></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_FETCH_PROJECT_TOKEN.html
+++ b/packages/errors/snapshot-html/CANNOT_FETCH_PROJECT_TOKEN.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Can&#39;t find project&#39;s secret key.<span style="color:#e6e6e6"></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_RECORD_NO_PROJECT_ID.html
+++ b/packages/errors/snapshot-html/CANNOT_RECORD_NO_PROJECT_ID.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--record<span style="color:#e05561"> flag but this project has not been setup to record.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This project is missing the <span style="color:#e5e510">projectId<span style="color:#e05561"> inside of: <span style="color:#4ec4ff">/path/to/cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We cannot uniquely identify this project without this id.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You need to setup this project to record. This will generate a unique projectId.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Alternatively if you omit the <span style="color:#de73ff">--record<span style="color:#e05561"> flag this project will run without recording.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/recording-project-runs<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_REMOVE_OLD_BROWSER_PROFILES.html
+++ b/packages/errors/snapshot-html/CANNOT_REMOVE_OLD_BROWSER_PROFILES.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning: We failed to remove old browser profiles from previous runs.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This error will not alter the exit code.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at CANNOT_REMOVE_OLD_BROWSER_PROFILES (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CANNOT_TRASH_ASSETS.html
+++ b/packages/errors/snapshot-html/CANNOT_TRASH_ASSETS.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning: We failed to trash the existing run results.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This error will not alter the exit code.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at CANNOT_TRASH_ASSETS (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CDP_COULD_NOT_CONNECT.html
+++ b/packages/errors/snapshot-html/CDP_COULD_NOT_CONNECT.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress failed to make a connection to the Chrome DevTools Protocol after retrying for 50 seconds.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This usually indicates there was a problem opening the Chrome browser.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The CDP port requested was <span style="color:#e5e510">2345<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at CDP_COULD_NOT_CONNECT (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CDP_COULD_NOT_RECONNECT.html
+++ b/packages/errors/snapshot-html/CDP_COULD_NOT_RECONNECT.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">There was an error reconnecting to the Chrome DevTools protocol. Please restart the browser.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at CDP_COULD_NOT_RECONNECT (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CDP_RETRYING_CONNECTION.html
+++ b/packages/errors/snapshot-html/CDP_RETRYING_CONNECTION.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Still waiting to connect to Chrome, retrying in 1 second <span style="color:#4f5666">(attempt 1/62)<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CDP_VERSION_TOO_OLD
+++ b/packages/errors/snapshot-html/CDP_VERSION_TOO_OLD
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">A minimum CDP version of <span style="color:#e5e510">1.3<span style="color:#e05561"> is required, but the current browser has an older version.<span style="color:#e6e6e6"></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CDP_VERSION_TOO_OLD.html
+++ b/packages/errors/snapshot-html/CDP_VERSION_TOO_OLD.html
@@ -0,0 +1,38 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">A minimum CDP version of <span style="color:#e5e510">1.3<span style="color:#e05561"> is required, but the current browser has <span style="color:#e5e510">1.2<span style="color:#e05561">.<span style="color:#e6e6e6"></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CHROME_WEB_SECURITY_NOT_SUPPORTED.html
+++ b/packages/errors/snapshot-html/CHROME_WEB_SECURITY_NOT_SUPPORTED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your project has set the configuration option: <span style="color:#e5e510">chromeWebSecurity<span style="color:#e05561"> to <span style="color:#4ec4ff">false<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This option will not have an effect in Firefox. Tests that rely on web security being disabled will not run as expected.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_FILES_LANGUAGE_CONFLICT.html
+++ b/packages/errors/snapshot-html/CONFIG_FILES_LANGUAGE_CONFLICT.html
@@ -0,0 +1,43 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">There is both a <span style="color:#e5e510">cypress.config.js<span style="color:#e05561"> and a <span style="color:#e5e510">cypress.config.ts<span style="color:#e05561"> at the location below:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">/path/to/project/root<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress does not know which one to read for config. Please remove one of the two and try again.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_FILE_NOT_FOUND.html
+++ b/packages/errors/snapshot-html/CONFIG_FILE_NOT_FOUND.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Could not find a Cypress configuration file.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We looked but did not find a <span style="color:#e5e510">cypress.json<span style="color:#e05561"> file in this folder: <span style="color:#4ec4ff">/path/to/project/root<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">[<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  1,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  2,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  3<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">]<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">{<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  &quot;foo&quot;: &quot;bar&quot;<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">}<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#de73ff">&quot;1234&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,50 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The error occurred while validating the <span style="color:#de73ff">browsers<span style="color:#e05561"> list.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">displayName<span style="color:#e05561"> to be a non-empty string.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">{<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  &quot;name&quot;: &quot;chrome&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  &quot;version&quot;: &quot;1.2.3&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">  &quot;displayName&quot;: null<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">}<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">An invalid configuration value was set.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#de73ff">false<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">pluginsFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress/plugins/index.js<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#de73ff">false<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR.html
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_ERROR.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Expected <span style="color:#e5e510">defaultCommandTimeout<span style="color:#e05561"> to be a number.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Instead the value was: <span style="color:#de73ff">false<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_MSG_ERROR
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_MSG_ERROR
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">An invalid configuration value was set:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e5e510">`something` was not right<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CONFIG_VALIDATION_MSG_ERROR.html
+++ b/packages/errors/snapshot-html/CONFIG_VALIDATION_MSG_ERROR.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your <span style="color:#e5e510">configFile<span style="color:#e05561"> set an invalid value from: <span style="color:#4ec4ff">cypress.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e5e510">`something` was not right<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/COULD_NOT_FIND_SYSTEM_NODE.html
+++ b/packages/errors/snapshot-html/COULD_NOT_FIND_SYSTEM_NODE.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561"><span style="color:#e5e510">nodeVersion<span style="color:#e05561"> is set to <span style="color:#4ec4ff">system<span style="color:#e05561"> but Cypress could not find a usable Node executable on your <span style="color:#de73ff">PATH<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Make sure that your Node executable exists and can be run by the current user.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress will use the built-in Node version <span style="color:#de73ff">16.2.1<span style="color:#e05561"> instead.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/COULD_NOT_PARSE_ARGUMENTS.html
+++ b/packages/errors/snapshot-html/COULD_NOT_PARSE_ARGUMENTS.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress encountered an error while parsing the argument: <span style="color:#e5e510">--spec<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You passed: <span style="color:#4ec4ff">1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The error was: <span style="color:#de73ff">spec must be a string or comma-separated list<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/CT_NO_DEV_START_EVENT.html
+++ b/packages/errors/snapshot-html/CT_NO_DEV_START_EVENT.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">To run component-testing, cypress needs the <span style="color:#e5e510">dev-server:start<span style="color:#e05561"> event.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please implement it by adding this code to your <span style="color:#de73ff">pluginsFile<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4ec4ff"><span style="color:#4f5666">// /path/to/plugins/file.js<span style="color:#4ec4ff"><span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4ec4ff">module.exports = (on, config) =&gt; {<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4ec4ff">  on(&#39;dev-server:start&#39;, () =&gt; startDevServer(...)<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4ec4ff">}<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">See https://on.cypress.io/component-testing for help on setting up component testing.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_ALREADY_COMPLETE.html
+++ b/packages/errors/snapshot-html/DASHBOARD_ALREADY_COMPLETE.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The run you are attempting to access is already complete and will not accept new groups.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">When a run finishes all of its groups, it waits for a configurable set of time before finally completing. You must add more groups during that time period.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">true<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/already-complete<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_API_RESPONSE_FAILED_RETRYING
+++ b/packages/errors/snapshot-html/DASHBOARD_API_RESPONSE_FAILED_RETRYING
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We encountered an unexpected error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We will retry 1 more time in 5 seconds...<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The server&#39;s response was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_API_RESPONSE_FAILED_RETRYING.html
+++ b/packages/errors/snapshot-html/DASHBOARD_API_RESPONSE_FAILED_RETRYING.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We encountered an unexpected error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We will retry 3 more times in 5 seconds...<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The server&#39;s response was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_CANCEL_SKIPPED_SPEC.html
+++ b/packages/errors/snapshot-html/DASHBOARD_CANCEL_SKIPPED_SPEC.html
@@ -0,0 +1,39 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">  This spec and its tests were skipped because the run has been canceled.<span style="color:#e6e6e6"></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_CANNOT_CREATE_RUN_OR_INSTANCE.html
+++ b/packages/errors/snapshot-html/DASHBOARD_CANNOT_CREATE_RUN_OR_INSTANCE.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning: We encountered an error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This run will not be recorded.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This error will not alter the exit code.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_CANNOT_PROCEED_IN_PARALLEL.html
+++ b/packages/errors/snapshot-html/DASHBOARD_CANNOT_PROCEED_IN_PARALLEL.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We encountered an unexpected error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Because you passed the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag, this run cannot proceed because it requires a valid response from our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --ciBuildId flag you passed was: <span style="color:#e5e510">invalid<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The server&#39;s response was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_CANNOT_PROCEED_IN_SERIAL.html
+++ b/packages/errors/snapshot-html/DASHBOARD_CANNOT_PROCEED_IN_SERIAL.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We encountered an unexpected error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --ciBuildId flag you passed was: <span style="color:#e5e510">invalid<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The server&#39;s response was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_CANNOT_UPLOAD_RESULTS.html
+++ b/packages/errors/snapshot-html/DASHBOARD_CANNOT_UPLOAD_RESULTS.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning: We encountered an error while uploading results from your run.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">These results will not be recorded.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This error will not alter the exit code.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_INVALID_RUN_REQUEST.html
+++ b/packages/errors/snapshot-html/DASHBOARD_INVALID_RUN_REQUEST.html
@@ -0,0 +1,55 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Recording this run failed because the request was invalid.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e5e510">request should follow postRunRequest@2.0.0 schema<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Errors:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">[<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;data.commit has additional properties&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;data.ci.buildNumber is required&quot;<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">]<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Request Sent:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">{<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;foo&quot;: &quot;foo&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;bar&quot;: &quot;bar&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;baz&quot;: &quot;baz&quot;<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">}<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_PARALLEL_DISALLOWED.html
+++ b/packages/errors/snapshot-html/DASHBOARD_PARALLEL_DISALLOWED.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag, but this run group was originally created without the --parallel flag.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">true<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can not use the --parallel flag with this group.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/parallel-disallowed<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_PARALLEL_GROUP_PARAMS_MISMATCH.html
+++ b/packages/errors/snapshot-html/DASHBOARD_PARALLEL_GROUP_PARAMS_MISMATCH.html
@@ -0,0 +1,64 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag, but we do not parallelize tests across different environments.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This machine is sending different environment parameters than the first machine that started this parallel run.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">In order to run in parallel mode each machine must send identical environment parameters such as:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">specs<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">osName<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">osVersion<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">browserName<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">browserVersion (major)<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This machine sent the following parameters:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">{<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;osName&quot;: &quot;darwin&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;osVersion&quot;: &quot;v1&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;browserName&quot;: &quot;Electron&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;browserVersion&quot;: &quot;59.1.2.3&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;specs&quot;: [<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">    &quot;cypress/integration/app_spec.js&quot;<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  ]<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">}<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/parallel-group-params-mismatch<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_PARALLEL_REQUIRED.html
+++ b/packages/errors/snapshot-html/DASHBOARD_PARALLEL_REQUIRED.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You did not pass the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag, but this run&#39;s group was originally created with the --parallel flag.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">true<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You must use the --parallel flag with this group.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/parallel-required<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_PROJECT_NOT_FOUND.html
+++ b/packages/errors/snapshot-html/DASHBOARD_PROJECT_NOT_FOUND.html
@@ -0,0 +1,48 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We could not find a Dashboard project with the projectId: <span style="color:#e5e510">project-id-123<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This <span style="color:#de73ff">projectId<span style="color:#e05561"> came from your <span style="color:#4ec4ff">/path/to/cypress.json<span style="color:#e05561"> file or an environment variable.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please log into the Dashboard and find your project.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We will list the correct projectId in the &#39;Settings&#39; tab.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Alternatively, you can create a new project using the Desktop Application.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/dashboard<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_RECORD_KEY_NOT_VALID.html
+++ b/packages/errors/snapshot-html/DASHBOARD_RECORD_KEY_NOT_VALID.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Your Record Key <span style="color:#e5e510">record-key-123<span style="color:#e05561"> is not valid with this projectId: <span style="color:#de73ff">project-id-123<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">It may have been recently revoked by you or another user.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please log into the Dashboard to see the valid record keys.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/dashboard/projects/project-id-123<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_RUN_GROUP_NAME_NOT_UNIQUE.html
+++ b/packages/errors/snapshot-html/DASHBOARD_RUN_GROUP_NAME_NOT_UNIQUE.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--group<span style="color:#e05561"> flag, but this group name has already been used for this run.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">true<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">If you are trying to parallelize this run, then also pass the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag, else pass a different group name.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/run-group-name-not-unique<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_STALE_RUN.html
+++ b/packages/errors/snapshot-html/DASHBOARD_STALE_RUN.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You are attempting to pass the <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag to a run that was completed over 24 hours ago.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The existing run is: <span style="color:#4ec4ff">https://dashboard.cypress.io/project/abcd/runs/1<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You cannot parallelize a run that has been complete for that long.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">true<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/stale-run<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_UNKNOWN_CREATE_RUN_WARNING.html
+++ b/packages/errors/snapshot-html/DASHBOARD_UNKNOWN_CREATE_RUN_WARNING.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning from Cypress Dashboard: <span style="color:#e5e510">You are almost out of time<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Details:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">{<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;code&quot;: &quot;OUT_OF_TIME&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;name&quot;: &quot;OutOfTime&quot;,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;hadTime&quot;: 1000,<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">  &quot;spentTime&quot;: 999<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666">}<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DASHBOARD_UNKNOWN_INVALID_REQUEST.html
+++ b/packages/errors/snapshot-html/DASHBOARD_UNKNOWN_INVALID_REQUEST.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We encountered an unexpected error talking to our servers.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">There is likely something wrong with the request.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --ciBuildId flag you passed was: <span style="color:#e5e510">invalid<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The server&#39;s response was:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#de73ff">StatusCodeError: 500 - &quot;Internal Server Error&quot;<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DEPRECATED_BEFORE_BROWSER_LAUNCH_ARGS.html
+++ b/packages/errors/snapshot-html/DEPRECATED_BEFORE_BROWSER_LAUNCH_ARGS.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Deprecation Warning: The <span style="color:#e5e510">before:browser:launch<span style="color:#e05561"> plugin event changed its signature in Cypress version 4.0.0<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The event switched from yielding the second argument as an <span style="color:#de73ff">array<span style="color:#e05561"> of browser arguments to an options <span style="color:#de73ff">object<span style="color:#e05561"> with an <span style="color:#de73ff">args<span style="color:#e05561"> property.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">We&#39;ve detected that your code is still using the previous, deprecated interface signature.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This code will not work in a future version of Cypress. Please see the upgrade guide: https://on.cypress.io/deprecated-before-browser-launch-args<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/DUPLICATE_TASK_KEY.html
+++ b/packages/errors/snapshot-html/DUPLICATE_TASK_KEY.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Warning: Multiple attempts to register the following task(s):<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#e5e510">bar<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#e5e510">baz<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Only the last attempt will be registered.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/ERROR_READING_FILE.html
+++ b/packages/errors/snapshot-html/ERROR_READING_FILE.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Error reading from: <span style="color:#4ec4ff">/path/to/read/file.ts<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at ERROR_READING_FILE (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/ERROR_WRITING_FILE.html
+++ b/packages/errors/snapshot-html/ERROR_WRITING_FILE.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Error writing to: <span style="color:#4ec4ff">/path/to/write/file.ts<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at ERROR_WRITING_FILE (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXPERIMENTAL_COMPONENT_TESTING_REMOVED.html
+++ b/packages/errors/snapshot-html/EXPERIMENTAL_COMPONENT_TESTING_REMOVED.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalComponentTesting<span style="color:#e05561"> configuration option was removed in Cypress version 7.0.0.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please remove this flag from: <span style="color:#4ec4ff">/path/to/configFile.json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Component Testing is now a standalone command. You can now run your component tests with:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">  <span style="color:#4f5666">$<span style="color:#e05561"> <span style="color:#4ec4ff">cypress open-ct<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/migration-guide<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXPERIMENTAL_NETWORK_STUBBING_REMOVED.html
+++ b/packages/errors/snapshot-html/EXPERIMENTAL_NETWORK_STUBBING_REMOVED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalNetworkStubbing<span style="color:#e05561"> configuration option was removed in Cypress version 6.0.0.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">It is no longer necessary for using <span style="color:#de73ff">cy.intercept()<span style="color:#e05561">. You can safely remove this option from your config.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXPERIMENTAL_RUN_EVENTS_REMOVED.html
+++ b/packages/errors/snapshot-html/EXPERIMENTAL_RUN_EVENTS_REMOVED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalRunEvents<span style="color:#e05561"> configuration option was removed in Cypress version 6.7.0. It is no longer necessary when listening to run events in the plugins file.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can safely remove this option from your config.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXPERIMENTAL_SAMESITE_REMOVED.html
+++ b/packages/errors/snapshot-html/EXPERIMENTAL_SAMESITE_REMOVED.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalGetCookiesSameSite<span style="color:#e05561"> configuration option was removed in Cypress version 5.0.0.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Returning the <span style="color:#de73ff">sameSite<span style="color:#e05561"> property is now the default behavior of the <span style="color:#de73ff">cy.cookie<span style="color:#e05561"> commands.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can safely remove this option from your config.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXPERIMENTAL_SHADOW_DOM_REMOVED.html
+++ b/packages/errors/snapshot-html/EXPERIMENTAL_SHADOW_DOM_REMOVED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">experimentalShadowDomSupport<span style="color:#e05561"> configuration option was removed in Cypress version 5.2.0. It is no longer necessary when utilizing the <span style="color:#de73ff">includeShadowDom<span style="color:#e05561"> option.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can safely remove this option from your config.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/EXTENSION_NOT_LOADED.html
+++ b/packages/errors/snapshot-html/EXTENSION_NOT_LOADED.html
@@ -0,0 +1,40 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Electron could not install the extension at path: <span style="color:#4ec4ff">/path/to/extension<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please verify that this is the path to a valid, unpacked WebExtension.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FIREFOX_COULD_NOT_CONNECT.html
+++ b/packages/errors/snapshot-html/FIREFOX_COULD_NOT_CONNECT.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress failed to make a connection to Firefox.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">This usually indicates there was a problem opening the Firefox browser.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at FIREFOX_COULD_NOT_CONNECT (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FIREFOX_GC_INTERVAL_REMOVED.html
+++ b/packages/errors/snapshot-html/FIREFOX_GC_INTERVAL_REMOVED.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The <span style="color:#e5e510">firefoxGcInterval<span style="color:#e05561"> configuration option was removed in Cypress version 8.0.0. It was introduced to work around a bug in Firefox 79 and below.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Since Cypress no longer supports Firefox 85 and below in Cypress Cypress version 8.0.0, this option was removed.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">You can safely remove this option from your config.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FIREFOX_MARIONETTE_FAILURE.html
+++ b/packages/errors/snapshot-html/FIREFOX_MARIONETTE_FAILURE.html
@@ -0,0 +1,46 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">Cypress could not connect to Firefox.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">An unexpected error was received from Marionette: <span style="color:#de73ff">connection<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">To avoid this error, ensure that there are no other instances of Firefox launched by Cypress running.<span style="color:#e6e6e6">
+<span style="color:#c062de"><span style="color:#e6e6e6">
+<span style="color:#c062de">Error: fail whale<span style="color:#e6e6e6">
+<span style="color:#c062de">    at makeErr (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6">
+<span style="color:#c062de">    at FIREFOX_MARIONETTE_FAILURE (cypress/packages/errors/test/unit/visualSnapshotErrors_spec.ts)<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FIXTURE_NOT_FOUND.html
+++ b/packages/errors/snapshot-html/FIXTURE_NOT_FOUND.html
@@ -0,0 +1,47 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">A fixture file could not be found at any of the following paths:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">  <span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">file<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">  <span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">file<span style="color:#e05561">.[ext]<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Cypress looked for these file extensions at the provided path:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">  <span style="color:#4f5666">  &gt; <span style="color:#e05561"><span style="color:#4ec4ff">js, ts, json<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Provide a path to an existing fixture file.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FOLDER_NOT_WRITABLE.html
+++ b/packages/errors/snapshot-html/FOLDER_NOT_WRITABLE.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">This folder is not writable: <span style="color:#4ec4ff">/path/to/folder<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Writing to this directory is required by Cypress in order to store screenshots and videos.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Enable write permissions to this directory to ensure screenshots and videos are stored.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">If you don&#39;t require screenshots or videos to be stored you can safely ignore this warning.<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FREE_PLAN_EXCEEDS_MONTHLY_PRIVATE_TESTS.html
+++ b/packages/errors/snapshot-html/FREE_PLAN_EXCEEDS_MONTHLY_PRIVATE_TESTS.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You&#39;ve exceeded the limit of private test results under your free plan this month. The limit is <span style="color:#e5e510">500<span style="color:#e05561"> test results.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">To continue recording tests this month you must upgrade your account. Please visit your billing to upgrade to another billing plan.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://dashboard.cypress.io/project/abcd<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FREE_PLAN_EXCEEDS_MONTHLY_TESTS.html
+++ b/packages/errors/snapshot-html/FREE_PLAN_EXCEEDS_MONTHLY_TESTS.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You&#39;ve exceeded the limit of test results under your free plan this month. The limit is <span style="color:#e5e510">500<span style="color:#e05561"> test results.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">To continue recording tests this month you must upgrade your account. Please visit your billing to upgrade to another billing plan.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/set-up-billing<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_EXCEEDS_MONTHLY_PRIVATE_TESTS.html
+++ b/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_EXCEEDS_MONTHLY_PRIVATE_TESTS.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You&#39;ve exceeded the limit of private test results under your free plan this month. The limit is <span style="color:#e5e510">500<span style="color:#e05561"> test results.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Your plan is now in a grace period, which means your tests will still be recorded until the grace period ends. Please upgrade your plan to continue recording tests on the Cypress Dashboard in the future.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://dashboard.cypress.io/project/abcd<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_EXCEEDS_MONTHLY_TESTS.html
+++ b/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_EXCEEDS_MONTHLY_TESTS.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You&#39;ve exceeded the limit of test results under your free plan this month. The limit is <span style="color:#e5e510">500<span style="color:#e05561"> test results.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Your plan is now in a grace period, which means you will have the full benefits of your current plan until <span style="color:#e5e510">Feb 1, 2022<span style="color:#e05561">.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Please visit your billing to upgrade your plan.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/set-up-billing<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_PARALLEL_FEATURE.html
+++ b/packages/errors/snapshot-html/FREE_PLAN_IN_GRACE_PERIOD_PARALLEL_FEATURE.html
@@ -0,0 +1,42 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561"><span style="color:#de73ff">Parallelization<span style="color:#e05561"> is not included under your free plan.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Your plan is now in a grace period, which means your tests will still run in parallel until <span style="color:#e5e510">Feb 1, 2022<span style="color:#e05561">. Please upgrade your plan to continue running your tests in parallel in the future.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/set-up-billing<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/INCOMPATIBLE_PLUGIN_RETRIES.html
+++ b/packages/errors/snapshot-html/INCOMPATIBLE_PLUGIN_RETRIES.html
@@ -0,0 +1,45 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">We&#39;ve detected that the incompatible plugin <span style="color:#e5e510">cypress-plugin-retries<span style="color:#e05561"> is installed at: <span style="color:#4ec4ff">./path/to/cypress-plugin-retries<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Test retries is now natively supported in Cypress version 5.0.0.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Remove the plugin from your dependencies to silence this warning.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/test-retries<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/INCORRECT_CI_BUILD_ID_USAGE.html
+++ b/packages/errors/snapshot-html/INCORRECT_CI_BUILD_ID_USAGE.html
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--ci-build-id<span style="color:#e05561"> flag but did not provide either a <span style="color:#de73ff">--group<span style="color:#e05561"> or <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --ci-build-id flag you passed was: <span style="color:#e5e510">ciBuildId123<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --ci-build-id flag is used to either group or parallelize multiple runs together.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/incorrect-ci-build-id-usage<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/INDETERMINATE_CI_BUILD_ID.html
+++ b/packages/errors/snapshot-html/INDETERMINATE_CI_BUILD_ID.html
@@ -0,0 +1,73 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">You passed the <span style="color:#de73ff">--group<span style="color:#e05561"> or <span style="color:#de73ff">--parallel<span style="color:#e05561"> flag but we could not automatically determine or generate a ciBuildId.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --group flag you passed was: <span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The --parallel flag you passed was: <span style="color:#e5e510">false<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">In order to use either of these features a ciBuildId must be determined.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">The ciBuildId is automatically detected if you are running Cypress in any of the these CI providers:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">appveyor<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">azure<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">awsCodeBuild<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">bamboo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">bitbucket<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">buildkite<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">circle<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">codeshipBasic<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">codeshipPro<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">concourse<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">codeFresh<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">drone<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">githubActions<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">gitlab<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">goCD<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">googleCloud<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">jenkins<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">semaphore<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">shippable<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">teamfoundation<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">travis<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">netlify<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#4ec4ff">layerci<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">Because the ciBuildId could not be auto-detected you must pass the --ci-build-id flag manually.<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/indeterminate-ci-build-id<span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/packages/errors/snapshot-html/INVALID_CONFIG_OPTION
+++ b/packages/errors/snapshot-html/INVALID_CONFIG_OPTION
@@ -0,0 +1,44 @@
+<!DOCTYPE html>
+    <html>
+    <head>
+      <meta charset="utf-8" />
+      
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
+    <link href="https://fonts.googleapis.com/css2?family=Courier+Prime&display=swap" rel="stylesheet">
+    <style>
+  
+        body {
+          font-family: "Courier Prime", Courier, monospace;
+          padding: 0 1em;
+          line-height: 1.4;
+          color: #eee;
+          background-color: #111;
+        }
+        pre {
+          padding: 0 0;
+          margin: 0 0;
+          font-family: "Courier Prime", Courier, monospace;
+        }
+      
+    body {
+      margin: 5px;
+      padding: 0;
+      overflow: hidden;
+    }
+    pre {
+      white-space: pre-wrap;
+      word-break: break-word;
+      -webkit-font-smoothing: antialiased;
+    }
+    </style>
+  
+    </head>
+    <body><pre><span style="color:#e05561">The following configuration options are invalid:<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#e5e510">foo<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#4f5666"> - <span style="color:#e05561"><span style="color:#e5e510">bar<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6">
+<span style="color:#e05561">https://on.cypress.io/configuration<span style="color:#e6e6e6">
+<span style="color:#e05561"><span style="color:#e6e6e6"></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span></span>
+</pre></body></html>
--- a/Show More
+++ b/Show More