厨房水槽

这是一个用于展示 Cypress.io 端到端 (E2E) 测试的示例应用。该应用程序演示了大多数 Cypress API 命令的使用。此外，这个示例应用程序配置为在各种 CI 平台上运行 E2E 测试。几个工作流程演示了 Cypress Docker 镜像在 CI 中的使用，这些镜像为 Cypress 提供了方便、预配置的兼容环境。测试也有大量注释。

要查看厨房水槽应用程序，并查看应用程序演示的 Cypress API 命令，请访问 example.cypress.io。

有关我们文档的完整参考，请访问 docs.cypress.io。

有关演示 Cypress.io 端到端 (E2E) 测试实际使用的示例支付应用程序，请访问 cypress-io/cypress-realworld-app 仓库。

CI 状态

下表列出了来自各种 CI 提供商的实时工作流程。这些工作流程各自独立地测试此示例仓库的内容。它们使用 Cypress Cloud 运行和记录，其结果集中显示在 Cypress Cloud ProjectId 4b7344 下。每个 CI 提供商在其自己的网站上显示其构建状态：

CI 提供商	工作流程	Docker 示例
AppVeyor	appveyor.yml
CircleCI	.circleci/config.yml	:white_check_mark:
cypress-io/github-action	using-action.yml
GitHub Actions	single.yml
GitHub Actions	parallel.yml

你可以在 Cypress Cloud 上找到所有记录的 CI 结果

CI 工作流程示例

此表显示了额外的 CI 工作流程示例。除了 GitHub Actions 工作流程外，这些不是像上表中那样的实时示例，在使用前可能需要修改。GitHub Actions 工作流程是实时的，它们运行时不会记录到 Cypress Cloud。

CI 提供商	基本配置	完整并行配置	Docker 示例
AWS Amplify	amplify.yml
AWS CodeBuild	basic/buildspec.yml	buildspec.yml
Azure Pipelines	basic/azure-ci.yml	azure-ci.yml
Buddy.works	buddy.yml		:white_check_mark:
Buildkite	.buildkite/pipeline.yml
CircleCI	basic/.circleci/config.yml		:white_check_mark:
CloudBees CodeShip Pro	basic/codeship-pro	codeship-services.yml	:white_check_mark:
GitHub Actions	chrome.yml
GitHub Actions	chrome-docker.yml		:white_check_mark:
GitLab	basic/.gitlab-ci.yml	.gitlab-ci.yml	:white_check_mark:
Jenkins	basic/Jenkinsfile	Jenkinsfile	:white_check_mark:
Semaphore 2.0	basic/.semaphore.yml	.semaphore/semaphore.yml
Travis CI	basic/.travis.yml	.travis.yml

Cypress 文档页面 CI 提供商示例提供了更多示例，并为使用 Cypress 与一些最流行的 CI 提供商提供了详细指南。

运行测试

本地测试

要在本地机器上运行此仓库中的测试，首先确保你的机器满足 Cypress 系统要求，包括按照文件 .node-version 中指定的版本安装 Node.js。

执行以下指令将克隆仓库、安装依赖项并运行 Cypress：

git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
npm ci # 安装依赖项
npm run local:run # 无头模式运行 Cypress

local:run是一个package.json脚本，它启动本地网络服务器，然后使用cypress run以无头模式运行Cypress。如果您想交互式地运行Cypress测试，请运行以下命令，它使用cypress open以有头模式运行Cypress。您可以选择单个测试来运行。

npm run local:open

作为使用local:open和local:run脚本的替代方案，您也可以先启动服务器，然后在第二步运行Cypress。

npm start # 在8080端口启动服务器

您可以通过在网络浏览器中打开http://localhost:8080来检查服务器是否正在运行。

然后在另一个终端窗口中执行以下命令之一

npx cypress run # 无头模式

或

npx cypress open # 有头交互模式

脚本和服务器结构

local:run和local:open脚本使用npm模块start-server-and-test的start-test别名来运行./scripts/start.js，该脚本启动网络服务器，等待服务器准备就绪，然后启动Cypress。

start脚本使用npm模块serve启动一个网络服务器，并在8080端口显示Kitchen Sink应用。

Docker测试

如果您在本地安装了Docker，例如使用Docker Desktop，您可以在Docker容器中交互式地运行此仓库的测试。使用Cypress Docker镜像，这些镜像已经预装了运行Cypress所需的所有先决条件。它们以base、browsers和included选项从Docker Hub和Amazon ECR (Elastic Container Registry) Public Gallery提供。

首先，克隆仓库并安装依赖项：

git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ci

[!注意] 为简单起见，下面的Docker示例使用诸如cypress/base这样的仓库引用，带有latest版本标签。要选择早期版本，请将latest替换为明确的标签，例如cypress/base:20.15.1。对于生产环境，推荐使用明确的版本标签。使用方法在标签选择中有进一步解释。

cypress/base

以下示例使用cypress/base镜像，该镜像本身不包含任何浏览器。您将使用Cypress捆绑的Electron浏览器。要运行Docker容器，执行以下命令：

docker run -it --rm -v .:/e2e -w /e2e cypress/base:latest

当容器提示出现时，输入：

npx cypress install     # 安装Cypress二进制文件
npm run test:ci         # 启动服务器并在Electron浏览器中运行测试
exit

cypress/browsers

使用cypress/browsers镜像，您可以额外选择Chrome、Edge和Firefox浏览器。执行以下命令：

docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latest

当容器提示出现时，输入：

npx cypress install     # 安装Cypress二进制文件
npm run test:ci         # 启动服务器并在Electron浏览器中运行测试
npm run test:ci:chrome  # 启动服务器并在Chrome浏览器中运行测试
npm run test:ci:edge    # 启动服务器并在Edge浏览器中运行测试
npm run test:ci:firefox # 启动服务器并在Firefox浏览器中运行测试
exit

cypress/included

cypress/included镜像与cypress/browsers相比，增加了完整的Cypress安装。执行以下命令以一行命令运行容器，使用Chrome浏览器进行测试：

docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c 'npm run test:ci:chrome' # 用于匹配Cypress版本

如果此仓库尚未更新到最新发布的Cypress版本，请使用仓库的package.json中的Cypress版本替换上述命令中的latest标签。请注意，版本不匹配将导致错误。

[!注意] 额外的Chrome、Edge和Firefox浏览器仅在linux/amd64架构的cypress/browsers和cypress/included镜像中预装。linux/arm64架构镜像不提供预装浏览器。Electron浏览器（Cypress内置）在所有镜像和架构中都可用。