Cypress 10.7: What’s New and How to Upgrade

Cypress 10.7.0 was released on August 30, 2022. It reintroduced Cypress Studio as an experimental end-to-end testing feature, added alpha Svelte component testing support, updated a few Cypress Dashboard interface details, and added Cypress.require() support for dependencies inside cy.origin() callbacks. These are historical release notes, not a current compatibility guide.

Before changing versions, check which Cypress major your project uses and follow the official migration guide for the next major version. Cypress recommends upgrading one major at a time. If you are on Cypress 9, first work through the Cypress 10 migration; do not jump straight to 10.7 just because that is the release covered here. Cypress 10.7.0 release notes · Cypress migration guide.

What’s new in Cypress 10.7?

The release included four announced highlights and an API addition:

• Cypress Studio returned as an experimental feature. In end-to-end tests, it can record interactions and generate tests. Enable it with e2e.experimentalStudio. Experimental status means you should treat it as early access and check the documentation for the Cypress version you use.
• Svelte component testing arrived as an alpha. Cypress cautioned that alpha features may change in future releases, including in ways that require changes to your project.
• Specs list hover actions were added. The Latest Runs and Average Duration columns gained actions intended to help connect a project to Cypress Dashboard.
• Dashboard informational banners were added. They provided instructions for connecting a project and recording a first test run.
• Cypress.require() support was added for cy.origin() callbacks. The callback runs in a separate context, so this API can make dependencies available there. Its version history is important: Cypress removed it in 10.11 in favor of CommonJS require() or ES module import(), then added it again in 12.6. Check the API history for your installed version before relying on it.

See Cypress’s release stages documentation for how it describes experimental and alpha features. The 10.7 labels should not be read as a promise that these features have the same status or behavior in later versions.

How do I choose the right upgrade path?

1. Find your installed version. Check the project’s package manifest and lockfile, or run npx cypress version from the project directory.
2. Choose the next major version, not an arbitrary target. Use the official migration index for the next major after your current one, then repeat the process until you reach your intended version.
3. Inventory how the project uses Cypress. Note whether it runs end-to-end tests, component tests, or both; which framework and dev server component tests use; where configuration and plugin code live; and whether tests depend on experimental features.
4. Read that migration guide before editing. Review configuration changes, defaults, removed options, support-file conventions, and APIs for the specific step.
5. Apply the migration and verify the project. Run the Cypress checks and test suite appropriate to the project, inspect failures, and resolve migration issues before moving to the next major.

The current migration index includes guidance for later major versions and recommends sequential major upgrades. Cypress 10.7’s release notes do not establish a compatibility matrix for today’s versions or your project. Consult the guide for each step rather than assuming a direct jump is supported.

How do I upgrade from Cypress 9 to Cypress 10?

The Cypress 9-to-10 migration is a separate step from upgrading Cypress 10 to 10.7. The central change is configuration: Cypress 10 removed support for cypress.json and requires a JavaScript or TypeScript configuration file. Plugin event handling also moves into the configuration’s setupNodeEvents function.

1. Replace cypress.json with a config file

Create cypress.config.js or cypress.config.ts at the project root. This minimal JavaScript example shows the configuration shape and plugin-event location:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    baseUrl: 'http://localhost:3000',
    setupNodeEvents(on, config) {
      // Move Node-side plugin event handling here.
      return config
    },
  },
})

Use the project’s real base URL and move its existing event handlers into setupNodeEvents; the comment is only a placeholder, not a plugin implementation. For TypeScript or component testing, follow the matching migration guide and project setup rather than copying this end-to-end example unchanged.

2. Move plugin event handling

Plugin logic commonly stored in cypress/plugins/index.js belongs in setupNodeEvents(on, config). Move the relevant Node-side handlers and preserve any configuration values they read or return. Check each plugin’s compatibility with the Cypress version you are installing.

3. Review testing-type configuration

• baseUrl belongs inside the e2e configuration object.
• componentFolder was replaced by testing-type specPattern configuration.
• Component dev-server configuration belongs inside component.
• Review spec and support file defaults, removed options, and APIs in the migration guide.

Do not mechanically apply component-testing changes to an end-to-end-only project, or assume a framework’s component setup is interchangeable with another’s. Use the migration instructions for the testing type and framework you actually have.

4. Install the intended version and verify

Update the project’s Cypress dependency to the version for this migration step using its package manager, then use the project’s normal install process to update the lockfile. Run the Cypress verification checks and the relevant test suite. Review failures alongside the migration guide; do not treat a successful dependency installation as proof that the project migration is complete.

What should I check when moving from Cypress 10 to 10.7?

If the project is already on Cypress 10, consult the official migration index for any intervening major versions between the installed version and your target. For a 10.x project targeting 10.7, inspect the 10.7 release notes for features your team wants to adopt, but still validate dependency and project compatibility for the exact package version. The release notes do not provide a universal upgrade command or guarantee that a particular project will work without changes.

Adopt Studio or Svelte component testing only if the project needs them and you accept their maturity at the time described by this release: Studio was experimental and Svelte component testing was alpha. For Cypress.require(), check its documented version history rather than inferring availability from the 10.7 notes alone.

How do I enable Cypress Studio?

In the 10.7 release, Studio was an experimental end-to-end testing feature controlled by e2e.experimentalStudio. In a Cypress configuration file, that setting takes this general form:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
  e2e: {
    experimentalStudio: true,
  },
})

Merge the setting into the project’s existing configuration rather than replacing its other keys. Studio records interactions to generate tests and is limited to end-to-end tests in the release description. Confirm current behavior and availability in the documentation for the version installed in your project.

Can Cypress 10.7 test Svelte components?

Cypress 10.7 introduced Svelte component testing as an alpha. That means it was an early-stage option, and Cypress warned that alpha features could have breaking changes in future releases. Check the current component-testing setup documentation and migration notes before adopting it; the 10.7 release announcement alone is not enough to configure a present-day Svelte project.

Does Cypress.require work inside cy.origin()?

It was added in Cypress 10.7 for loading dependencies inside a cy.origin() callback. However, the API was removed in 10.11 and restored in 12.6. The exact version matters, so check the official Cypress.require() API history and the cy.origin() documentation before choosing an import form.

Or skip the browser setup

If your work also needs website screenshots—for example, capturing a rendered page while documenting a test flow—ScreenshotNeo is a website screenshot API and MCP server. One GET request returns a PNG, JPEG, WebP, or PDF. Its browser handles the capture, while the API can accept a URL directly.

curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webp

import requests

r = requests.get(
    "https://api.screenshotneo.com/v1/shot",
    params={"access_key": "YOUR_API_KEY", "url": "https://stripe.com"},
    timeout=90,
)
r.raise_for_status()
open("shot.webp", "wb").write(r.content)

const q = new URLSearchParams({ access_key: 'YOUR_API_KEY', url: 'https://stripe.com' })
const res = await fetch(`https://api.screenshotneo.com/v1/shot?${q}`)
if (!res.ok) throw new Error(`Screenshot request failed: ${res.status}`)
const bytes = new Uint8Array(await res.arrayBuffer())
await import('node:fs/promises').then(fs => fs.writeFile('shot.webp', bytes))

See the ScreenshotNeo API documentation for authentication and request options. Cookie banners, newsletter popups, and chat widgets are removed before capture; each step can be turned off. Bot checks, blank pages, failed loads, timeouts, and cache hits are not billed, and response headers identify the page verdict and billing status. An MCP server provides take_screenshot, get_page_info, and capture_pdf tools for AI agents. The free plan includes 1,000 screenshots a month without a card; paid plans start at $5 for 3,000 screenshots.

Sign up for 1,000 free screenshots a month, no card required.

Troubleshooting upgrade problems

Symptom	Likely cause	What to check
Cypress reports that cypress.json is unsupported.	The project is running Cypress 10 or later with the old configuration file.	Create cypress.config.js or cypress.config.ts, move supported settings into it, and follow the Cypress 10 migration guide.
Plugin setup no longer runs.	Node event handling remains in the old plugin file rather than the config.	Move event registration into setupNodeEvents(on, config) and check the handler’s expected inputs and return value.
Tests use the wrong base URL or spec files are not found.	Configuration keys or defaults changed during migration.	Put baseUrl under e2e, inspect the testing-type specPattern, and compare support-file defaults with the migration guide.
Component tests fail to start.	Component dev-server settings, framework integration, or testing-type configuration may not match the project.	Place component dev-server configuration under component and use the migration instructions for the project’s framework and Cypress version.
Cypress.require is unavailable.	The installed version may be one where the API was removed, or the code may be running outside the supported callback context.	Check the API history for the exact version. Cypress removed the API in 10.11 and restored it in 12.6; use the documented import form for the installed version.
A feature behaves differently from the 10.7 announcement.	The announcement describes a historical release, and experimental or alpha features can change.	Use the documentation and migration notes for the installed version; do not assume the 10.7 behavior is still current.

Performance, reliability, and upgrade cost

The release notes cited here do not provide performance benchmarks, and there is no basis here for claiming a specific speed improvement from 10.7. Treat an upgrade as a compatibility change: sequential major-version steps make it easier to identify which migration introduced a failure. Keep verification focused on the test types and integrations the project actually uses, including any experimental or alpha feature adopted by the team.

Plan the work around configuration review, dependency compatibility, test updates, and CI verification. The Cypress migration guide is the source for version-specific breaking changes; the 10.7 changelog is the source for what that release announced. No project-specific outcome can be inferred without inspecting and running that project.

FAQ

When was Cypress 10.7.0 released?

August 30, 2022.

Was Cypress Studio stable in 10.7?

No. It was described as experimental and was limited to end-to-end tests.

Should a Cypress 9 project upgrade directly to 10.7?

Follow the migration guide one major version at a time, starting with Cypress 10 for a project on Cypress 9.

Did 10.7 make Svelte component testing generally stable?

No. The release introduced it as an alpha.

Where can I find the current migration steps?

Use the official Cypress migration guide for the next major version in your project’s path.