Skip to main content
Cypress应用

Cypress 配置

info
你将学习到
  • 如何配置 Cypress 以改变其默认行为
  • Cypress 中可用的配置选项
  • 如何在运行时查看和覆盖配置
caution

本指南适用于 Cypress 10+。

有关升级到 Cypress 10 的更多信息,请参阅 迁移指南

配置文件

首次启动 Cypress 时,向导将引导你创建一个 Cypress 配置文件。对于 JavaScript 应用,该文件为 cypress.config.js;对于 TypeScript 应用,则为 cypress.config.ts。此文件用于存储 Cypress 特有的配置。

Cypress 还支持 .mjs.cjs 扩展名的配置文件。

使用 .mjs 文件允许你在配置中使用 ESM 模块 语法,而无需转译步骤。

.cjs 文件使用 CommonJS 模块语法,这是 JavaScript 文件的默认格式。我们文档中的所有 JavaScript 配置示例均使用 CommonJS 格式。

如果你 配置测试以记录 结果到 Cypress CloudprojectId 也将存储在配置文件中。

智能代码补全

defineConfig 辅助函数由 Cypress 导出,它在许多流行的代码编辑器中为配置提供自动代码补全。虽然 Cypress 解析你的配置并不严格要求使用它,但我们建议像这样用 defineConfig() 包装你的配置对象:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
baseUrl: 'http://localhost:1234',
},
})

选项

可以通过提供以下任何配置选项来修改 Cypress 的默认行为。以下是可用选项及其默认值的列表。

全局

选项默认值描述
clientCertificates[]可选的 客户端证书 数组。
env{}要设置为 环境变量 的任何值。
includeShadowDomfalse是否遍历 shadow DOM 边界并在查询命令(如 cy.get())的结果中包含 shadow DOM 中的元素。
numTestsKeptInMemory基于 runopen 模式的默认值内存中保留的快照和命令数据的测试数量。numTestsKeptInMemorycypress open 期间默认为 50,在 cypress run 期间默认为 0。如果在测试运行期间浏览器内存消耗过高,可以减小此值。
portnull用于托管 Cypress 的端口。通常这是一个随机生成的端口。
redirectionLimit20被测应用在出错前可以重定向的次数。
reporterspeccypress run 期间使用的 报告器
reporterOptionsnull使用的 报告器选项。支持的选项取决于报告器。
retries{ "runMode": 0, "openMode": 0 }重试失败测试的次数。可以配置为分别应用于 cypress runcypress open。从 Cypress 13.4.0 开始,还可以配置实验性的 Flake Detection 策略。更多信息请参阅 测试重试
watchForFileChanges基于 runopen 模式的默认值Cypress 是否监视并在测试文件更改时重新启动测试。watchForFileChangescypress open 期间默认为 true,在 cypress run 期间默认为 false

超时

tip
核心概念

超时是一个核心概念,你应该充分理解。这里列出的默认值是有意义的。

选项默认值描述
defaultCommandTimeout4000大多数基于 DOM 的命令在被视为超时前等待的时间(毫秒)。
execTimeout60000cy.exec() 命令期间等待系统命令完成执行的时间(毫秒)。
taskTimeout60000cy.task() 命令期间等待任务完成执行的时间(毫秒)。
pageLoadTimeout60000等待 页面过渡事件cy.visit()cy.go()cy.reload() 命令触发其页面 load 事件的时间(毫秒)。网络请求受底层操作系统限制,如果增加此值,仍可能超时。
requestTimeout5000cy.wait() 命令中等待请求发出的时间(毫秒)。
responseTimeout30000cy.request()cy.wait()cy.fixture()cy.getCookie()cy.getCookies()cy.setCookie()cy.clearCookie()cy.clearCookies()cy.screenshot() 命令中等待响应的时间(毫秒)。

文件夹/文件

选项默认值描述
downloadsFoldercypress/downloads测试期间下载的文件保存的文件夹路径。
fileServerFolder项目根文件夹尝试从中提供应用文件的文件夹路径。
fixturesFoldercypress/fixtures包含夹具文件的文件夹路径(传递 false 以禁用)。
screenshotsFoldercypress/screenshotscy.screenshot() 命令或测试在 cypress run 期间失败后保存屏幕截图的文件夹路径。
videosFoldercypress/videoscypress run 期间保存视频的文件夹路径。

屏幕截图

选项默认值描述
screenshotOnRunFailuretrue测试在 cypress run 期间失败时,Cypress 是否拍摄屏幕截图。
screenshotsFoldercypress/screenshotscy.screenshot() 命令或测试在 cypress run 期间失败后保存屏幕截图的文件夹路径。
trashAssetsBeforeRunstruecypress run 运行测试之前,Cypress 是否清理 downloadsFolderscreenshotsFoldervideosFolder 中的资源。

有关屏幕截图的更多选项,请查看 Cypress.Screenshot API

视频

caution

目前,Cypress仅支持为受支持的基于Chromium的浏览器(Chrome/Electron/Edge)录制视频。对Firefox的支持进度可在此issue中追踪。

选项默认值描述
trashAssetsBeforeRunstruecypress run 运行测试之前,Cypress 是否清理 downloadsFolderscreenshotsFoldervideosFolder 中的资源。
videoCompressionfalse视频压缩的质量设置,以恒定速率因子(CRF)表示。值可以是 false0 以禁用压缩,或介于 151 之间的 CRF,较低的值会导致更好的质量(但文件大小更大)。将此选项设置为 true 将导致默认 CRF 为 32
videosFoldercypress/videosCypress 在 cypress run 运行测试时自动保存测试运行视频的位置。
videofalseCypress 是否捕获 cypress run 运行测试的视频。

下载

选项默认值描述
downloadsFoldercypress/downloads测试期间下载的文件保存的文件夹路径。
trashAssetsBeforeRunstruecypress run 运行测试之前,Cypress 是否清理 downloadsFolderscreenshotsFoldervideosFolder 中的资源。

浏览器

选项默认值描述
defaultBrowsernull如果未提供 "--browser" 命令行选项,则启动的默认浏览器。此选项仅影响首次浏览器启动;浏览器已启动后更改此选项将无效。
chromeWebSecuritytrue是否启用基于 Chromium 的浏览器的 Web Security,以执行同源策略和不安全的混合内容。
blockHostsnull要阻止其流量的主机字符串或数组。请阅读注释以了解使用示例。
modifyObstructiveCodetrueCypress 是否在 .js.html 文件中搜索并替换阻碍性 JS 代码。请阅读注释以了解有关此设置的更多信息。
userAgentnull覆盖浏览器在所有请求标头中发送的默认用户代理。用户代理值通常由服务器用于帮助识别操作系统、浏览器和浏览器版本。有关示例用户代理值,请参阅 User-Agent MDN 文档

视口

选项默认值描述
viewportHeight660被测应用视口的默认高度(像素)。(使用 cy.viewport() 命令覆盖)
viewportWidth1000被测应用视口的默认宽度(像素)。(使用 cy.viewport() 命令覆盖)

可操作性

选项默认值描述
animationDistanceThreshold5元素必须随时间超过的像素距离才能被视为动画。
waitForAnimationstrue在执行命令之前是否等待元素完成动画。
scrollBehaviortop在执行命令之前将元素滚动到的视口位置。可以是 'center''top''bottom''nearest'falsefalse 禁用滚动。

更多信息,请参阅 可操作性 文档。

实验性

配置可能包括当前正在测试的实验性选项。请参阅 实验性 页面。

测试类型特定选项

你可以通过在 Cypress 配置中创建 e2ecomponent 对象来为 端到端测试组件测试 提供配置选项。

e2e

这些选项可以在 e2e 配置对象中指定:

选项默认值描述
baseUrlnull用作 cy.visit()cy.request() 命令 URL 前缀的 URL。
setupNodeEventsnull可以注册节点事件并修改配置的函数。取代(已移除的)pluginFile 选项。请阅读注释以了解使用示例。
supportFilecypress/support/e2e.{js,jsx,ts,tsx}在规范文件加载之前加载的文件路径。此文件会被编译和打包。(传递 false 以禁用)
specPatterncypress/e2e/**/*.cy.{js,jsx,ts,tsx}要加载的测试文件的 glob 模式字符串或数组。
excludeSpecPattern*.hot-update.js用于忽略在测试列表中显示的测试文件的 glob 模式字符串或数组。请阅读有关使用此选项的注释。
experimentalRunAllSpecsfalse启用 "Run All Specs" UI 功能,允许顺序执行多个规范。
slowTestThreshold10000cypress run 期间认为测试“慢”的时间(毫秒)。慢测试将在默认报告器中显示为橙色文本。
testIsolationtrue是否启用 测试隔离 以确保测试之间的浏览器上下文干净。
injectDocumentDomain deprecatedfalse指示 Cypress 使用 document.domain 属性来减少对 cy.origin 的需求。请阅读有关使用此选项的注释。
const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
// e2e 选项在此
},
})

component

这些选项可以在 component 配置对象中指定:

选项默认值描述
devServernull用于配置组件测试开发服务器的必需选项。请阅读注释以了解使用示例。
indexHtmlFilecypress/support/component-index.htmlCypress 渲染组件并允许你添加全局资源(如样式、字体和外部脚本)的位置。
justInTimeCompiletrue为 webpack 直接编译与你的规范相关的资源,在规范执行前“即时”编译它们。
setupNodeEventsnull可以注册节点事件并修改配置的函数。取代(已移除的)插件文件。请阅读注释以了解使用示例。
supportFilecypress/support/component.js在规范文件加载之前加载的文件路径。此文件会被编译和打包。(传递 false 以禁用)
specPattern**/*.cy.{js,jsx,ts,tsx}要加载的规范文件的 glob 模式字符串或数组。

注意,任何与 e2e.specPattern 值匹配的文件将自动 排除。
excludeSpecPattern['/snapshots/*', '/image_snapshots/*']用于忽略在规范列表中显示的规范文件的 glob 模式字符串或数组。请阅读有关使用此选项的注释。
experimentalSingleTabRunModefalse在单个标签页中运行所有规范,而不是为每个规范创建新标签页。这可以提高运行模式性能,但可能影响大型测试套件的规范隔离和可靠性。此实验目前仅适用于组件测试。
slowTestThreshold250cypress run 期间认为测试“慢”的时间(毫秒)。慢测试将在默认报告器中显示为橙色文本。
devServerPublicPathRoute/__cypress/src正在使用的开发服务器的公共路径。覆盖默认值时要小心,因为它可能会产生意外后果。请参阅 框架配置 或特定开发服务器文档(特别是 @cypress/vite-dev-server)。
const { defineConfig } = require('cypress')

module.exports = defineConfig({
component: {
// 组件选项在此
},
})

覆盖选项

Cypress 允许你动态更改配置选项。这在多个环境和多个开发人员机器上运行 Cypress 时非常有用。

覆盖单个选项

从命令行运行 Cypress 时,可以传递 --config 标志来覆盖单个配置选项。

例如,要覆盖 viewportWidthviewportHeight,可以运行:

cypress run --browser firefox --config viewportWidth=1280,viewportHeight=720

指定替代配置文件

在 Cypress CLI 中,可以使用 --config-file 标志更改 Cypress 将使用的配置文件。

cypress run --config-file tests/cypress.config.js

更多示例请参阅 命令行 指南。

测试类型特定覆盖

除了设置 测试类型特定选项 外,你还可以为 端到端测试组件测试 覆盖其他配置选项。

例如:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
// 这些设置在所有地方适用,除非被覆盖
defaultCommandTimeout: 5000,
viewportWidth: 1000,
viewportHeight: 600,
// 组件测试的视口设置被覆盖
component: {
viewportWidth: 500,
viewportHeight: 500,
},
// 端到端测试的命令超时被覆盖
e2e: {
defaultCommandTimeout: 10000,
},
})

环境变量

配置选项可以通过 环境变量 覆盖。这在 持续集成 或本地工作时特别有用。这使你可以更改配置选项而无需修改任何代码或构建脚本。

例如,命令行中的这些环境变量将覆盖 Cypress 配置中设置的任何 viewportWidthviewportHeight 选项:

export CYPRESS_VIEWPORT_WIDTH=800
export CYPRESS_VIEWPORT_HEIGHT=600

更多示例请参阅 环境变量 指南。

测试配置

我们提供了两种选项来在测试运行时覆盖配置:Cypress.config() 和特定于套件或测试的配置覆盖。

⚠️ 注意: 以下配置值都是可写的,并且可以通过每个测试的配置 更改。任何其他配置值都是只读的,不能在运行时更改。

  • animationDistanceThreshold
  • baseUrl
  • blockHosts
  • defaultCommandTimeout
  • env 注意: 提供的环境变量将与当前环境变量合并。
  • execTimeout
  • includeShadowDom
  • keystrokeDelay
  • numTestsKeptInMemory
  • pageLoadTimeout
  • redirectionLimit
  • requestTimeout
  • responseTimeout
  • retries
  • screenshotOnRunFailure
  • scrollBehavior
  • slowTestThreshold
  • taskTimeout
  • testIsolation - 此选项只能在套件特定覆盖级别覆盖
  • viewportHeight
  • viewportWidth
  • waitForAnimations

Cypress.config()

你也可以在测试中使用 Cypress.config() 覆盖配置值。

这会更改 当前规范文件剩余执行时间 的配置。在规范完成后,值将重置为之前的默认值。

Cypress.config('pageLoadTimeout', 100000)

Cypress.config('pageLoadTimeout') // => 100000

测试特定配置

要将特定的 Cypress 配置 值应用于套件或测试,将配置对象作为第二个参数传递给测试或套件函数。

传入的配置值仅在设置它们的套件或测试期间生效。在套件或测试完成后,值将重置为之前的默认值。

语法

describe(name, config, fn)
context(name, config, fn)
it(name, config, fn)
specify(name, config, fn)

套件配置

如果你想针对一组测试在特定浏览器中运行或排除,可以在套件配置中覆盖 browser 配置。browser 选项接受与 Cypress.isBrowser() 相同的参数。

你可以配置在 cypress runcypress open 期间分别重试失败的测试套件的次数。

describe(
'login',
{
retries: {
runMode: 3,
openMode: 2,
},
},
() => {
it('should redirect unauthenticated user to sign-in page', () => {
// ...
})

it('allows user to login', () => {
// ...
})
}
)

单个测试配置

如果你想针对一个测试在特定浏览器中运行或排除,可以在测试配置中覆盖 browser 配置。browser 选项接受与 Cypress.isBrowser() 相同的参数。

it('Show warning outside Chrome', { browser: '!chrome' }, () => {
cy.get('.browser-warning').should(
'contain',
'For optimal viewing, use Chrome browser'
)
})

解析后的配置

当你打开一个 Cypress 项目时,在 设置 下展开项目设置面板将显示解析后的配置。这有助于你理解和查看不同值的来源。每个设置的值都会高亮显示,以显示它是通过以下哪种方式设置的:

查看解析后的配置

注释

blockHosts

通过传递一个字符串或字符串数组,你可以阻止对一个或多个主机的请求。

要阻止一个主机:

  • ✅ 仅传递主机
  • ✅ 使用通配符 * 模式
  • ✅ 包括 80443 以外的端口
  • 不要 包括协议:http://https://
info

不确定 URL 的哪部分是主机? 使用此指南作为参考。

阻止主机时,我们使用 minimatch 来检查主机。如有疑问,你可以自行测试是否匹配。

给定以下 URL:

https://www.google-analytics.com/ga.js

http://localhost:1234/some/user.json

这将匹配以下被阻止的主机:

www.google-analytics.com
*.google-analytics.com
*google-analytics.com

localhost:1234

因为 localhost:1234 使用了 80443 以外的端口,所以 必须包括端口

caution
子域名

对于没有子域名的 URL 要小心。

例如给定 URL:https://google.com/search?q=cypress

  • ✅ 匹配 google.com
  • ✅ 匹配 *google.com
  • ❌ 不匹配 *.google.com

当 Cypress 阻止对匹配主机的请求时,它会自动发送 503 状态码。为了方便起见,它还设置了一个 x-cypress-matched-blocked-host 标头,以便你可以看到它匹配了哪个规则。

开发者工具的网络标签显示被阻止的主机

devServer

devServer 选项是 component 测试必需的,允许你注册一个组件测试开发服务器。

通常,你会在 devServer 中为你的框架和 UI 库指定 frameworkbundler 选项,如下所示:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
component: {
devServer: {
framework: 'create-react-app',
bundler: 'webpack',
},
},
})

有关所有可用的 frameworkbundler 选项以及其他配置选项的更多信息,请参阅 框架配置 指南。

自定义开发服务器

可以自定义 devServer 并提供自己的函数以实现自定义或高级设置。

devServer 函数接收一个 cypressConfig 参数:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
component: {
devServer(cypressConfig) {
// 返回开发服务器实例或解析为开发服务器实例的 promise
},
},
})

更多信息请参阅 自定义开发服务器 指南。

excludeSpecPattern

Cypress 使用 minimatch 和选项:{dot: true, matchBase: true}。我们建议使用 https://globster.xyz 来测试哪些文件会匹配。

**/node_modules/** 模式会自动添加到 excludeSpecPattern,无需指定(也无法覆盖)。请参阅 e2ecomponent 测试特定选项。

injectDocumentDomain

此选项已 弃用,并将在未来的 Cypress 版本中移除。

将此配置选项设置为 true 以指示 Cypress 注入 document.domain 到你的测试应用中。 这可以减少在 子域之间导航 时对 cy.origin() 的需求, 但对于某些站点存在兼容性问题。

此配置选项用于缓解 Cypress 13 和 Cypress 14 默认行为之间的 cy.origin() 行为差异。 阅读 Cypress 14 迁移指南 以了解如何更新你的测试以移除设置此标志的需求。

如果你正在运行支持实验性 WebKit 的测试,此配置值 必须 设置为 true,因为 WebKit 尚不支持 cy.origin()

caution

已知不兼容性

将此配置值设置为 true 可能导致你正在测试的应用行为异常。如果你的测试访问的站点设置了 Origin-Agent-Cluster 标头,这一点尤其明显。

目前,我们知道以下站点在此选项设置为 true 时无法正确测试:

  • Azure AD B2C 认证流程
  • Salesforce
  • Google
const { defineConfig } = require('cypress')

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

isInteractive

你可以通过 cypress open 命令以交互模式打开 Cypress,通过 cypress run 命令以运行模式打开。要从测试代码中检测模式,可以查询 Cypress.config 上的 isInteractive 属性。

if (Cypress.config('isInteractive')) {
// 交互式 "cypress open" 模式!
} else {
// "cypress run" 模式
}

modifyObstructiveCode

启用此选项后,Cypress 将在来自服务器的 .html.js 文件的响应流中搜索并替换常见于防框架破坏的代码模式。

这些脚本模式是过时和弃用的安全技术,用于防止点击劫持和防框架破坏。它们是过去的遗物,在现代浏览器中不再必要。然而,许多站点和应用仍然实现它们。

这些技术阻止 Cypress 工作,并且可以在不改变应用行为的情况下安全移除。

Cypress 在网络级别修改这些脚本,因此搜索响应流中的这些模式会有微小的性能成本。

如果你测试的应用或站点 没有 实现这些安全措施,可以关闭此选项。此外,我们搜索的模式可能会意外重写有效的 JS 代码。如果发生这种情况,请禁用此选项。

experimentalModifyObstructiveThirdPartyCode 的详细信息可以在 这里 找到。

setupNodeEvents

setupNodeEvents 函数允许你使用 onconfig 参数来接入、修改或扩展 Cypress 的内部行为,并且作为 e2ecomponent 测试特定选项有效。

const { defineConfig } = require('cypress')

module.exports = defineConfig({
e2e: {
setupNodeEvents(on, config) {
// 端到端测试节点事件设置代码
},
},
component: {
setupNodeEvents(on, config) {
// 组件测试节点事件设置代码
},
},
})

更多信息请参阅 插件指南

常见问题

baseUrl 未设置

确保你没有意外将 baseUrl 配置选项放入 env 对象中。以下配置是 不正确 的,将不起作用:

const { defineConfig } = require('cypress')

module.exports = defineConfig({
// ⛔️ 不起作用
env: {
baseUrl: 'http://localhost:3030',
FOO: 'bar',
},
})

解决方案:将 baseUrl 属性放在 env 对象之外,放在 e2e 测试类型特定对象内。

const { defineConfig } = require('cypress')

module.exports = defineConfig({
// ✅ 正确方式
env: {
FOO: 'bar',
},
e2e: {
baseUrl: 'http://localhost:3030',
},
})

你还可以在这个 短视频 中找到一些关于设置 baseUrl 的技巧。

使用 spec 参数时未找到测试文件

使用 --spec <路径或掩码> 参数时,请使其相对于项目文件夹。如果仍然缺少规范,请使用 DEBUG 日志 运行 Cypress,并设置以下选项以查看 Cypress 如何查找规范文件:

DEBUG=cypress:cli,cypress:data-context:sources:FileDataSource,cypress:data-context:sources:ProjectDataSource

历史

版本变更
14.0.0添加了通过 injectDocumentDomain 配置选项重新启用超级域名导航的支持
13.16.0添加了 defaultBrowser 选项。
13.4.0添加了通过 retries.experimentalStrategyretries.experimentalOptions 配置实验性 Flake Detection 策略的支持。
13.0.0移除了 nodeVersion 选项。
13.0.0移除了 videoUploadOnPasses 选项。
11.0.0移除了 e2e.experimentalSessionAndOrigin 选项。
10.4.0添加了 e2e.testIsolation 选项。
10.0.0重新设计了页面以支持新的 cypress.config.js 并弃用 cypress.json 文件。
8.7.0添加了 slowTestThreshold 选项。
8.0.0添加了 clientCertificates 选项并移除了 firefoxGcInterval 配置。
7.0.0添加了 e2ecomponent 选项。
7.0.0添加了 redirectionLimit 选项。
6.1.0添加了 scrollBehavior 选项。
5.2.0添加了 includeShadowDom 选项。
5.0.0添加了 retries 配置。
5.0.0blacklistHosts 配置重命名为 blockHosts
4.1.0添加了 screenshotOnRunFailure 配置。
4.0.0添加了 firefoxGcInterval 配置。
3.5.0添加了 nodeVersion 配置。

另请参阅