cypress example kitchensink
v3.1.2
これは、cypress.ioエンドツーエンド（E2E）テストを紹介するために使用されるアプリの例です。アプリケーションは、ほとんどのサイプレスAPIコマンドの使用を示しています。さらに、この例アプリは、さまざまなCIプラットフォームでE2Eテストを実行するように構成されています。いくつかのワークフローは、サイプレスに便利で事前に構成された互換性のある環境を提供するサイプレスドッカー画像のCI使用を示しています。テストも大幅にコメントされています。
キッチンシンクのアプリケーションを表示し、アプリによって実証されたサイプレスAPIコマンドを表示するには、example.cypress.ioにアクセスしてください。
ドキュメントの完全な参照については、docs.cypress.ioにアクセスしてください。
cypress.ioエンドツーエンド（E2E）テストの実際の使用を実証する支払いアプリケーションの例については、cypress-io/cypress-realworld-appリポジトリに移動します。
次の表には、さまざまなCIプロバイダーからのライブワークフローを示します。これらはそれぞれ、この例リポジトリの内容を独立してテストします。サイプレスクラウドのProjectID 4b7344の下で中心に表示される結果を使用して、Cypress Cloudを使用して実行および録音します。各CIプロバイダーは、独自のサイトにビルドステータスを表示します。
| CIプロバイダー | ワークフロー | ステータスを構築します | Dockerの例 |
|---|---|---|---|
| Appveyor | appveyor.yml | ||
| Circleci | .circleci/config.yml | ✅ | |
| Cypress-io/github-action | 使用-comps.yml | ||
| githubアクション | single.yml | ||
| githubアクション | Parallel.yml |
サイプレスクラウドに記録されているすべてのCI結果を見つけることができます
この表は、CIワークフローの追加例を示しています。 GitHubアクションワークフローを除き、これらは上記の表のようなライブ例ではなく、使用前に変更が必要になる場合があります。 GitHubアクションワークフローはライブであり、Cypress Cloudに録音せずに実行されます。
| CIプロバイダー | 基本設定 | 完全な平行構成 | Dockerの例 |
|---|---|---|---|
| AWS増幅 | amplify.yml | ||
| AWS CodeBuild | BASIC/BUILDSPEC.yml | buildspec.yml | |
| Azureパイプライン | Basic/Azure-Ci.yml | azure-ci.yml | |
| Buddy.Works | Buddy.yml | ✅ | |
| buildkite | .buildkite/pipeline.yml | ||
| Circleci | BASIC/.CIRCLECI/config.yml | ✅ | |
| Cloudbees Codeship Pro | BASIC/CODESHIP-PRO | codeship-services.yml | ✅ |
| githubアクション | Chrome.yml | ||
| githubアクション | Chrome-docker.yml | ✅ | |
| gitlab | BASIC/.GITLAB-CI.YML | .gitlab-ci.yml | ✅ |
| ジェンキンス | BASIC/JENKINSFILE | Jenkinsfile | ✅ |
| セマフォ2.0 | BASIC/.SEMAPHORE.yml | .semaphore/semaphore.yml | |
| トラビスCI | BASIC/.TRAVIS.yml | .travis.yml |
CypressドキュメントページCIプロバイダーの例は、最も人気のあるCIプロバイダーでサイプレスを使用するための広範なガイドを備えたいくつかの例を提供します。
ローカルマシンでこのリポジトリからテストを実行するには、最初に、ファイル.Node-versionで指定されたバージョンに従って、node.jsのインストールを含むサイプレスシステムの要件を満たしていることを確認してください。
次の手順を実行すると、リポジトリをクローンし、依存関係をインストールし、サイプレスを実行します。
git clone https://github.com/cypress-io/cypress-example-kitchensink.git
cd cypress-example-kitchensink
npm ci # install dependencies
npm run local:run # run Cypress headlessly local:runはPackage.jsonスクリプトで、ローカルWebサーバーを起動し、サイプレスランを使用してサイプレスを操作します。サイプレステストをインタラクティブに実行したい場合は、サイプレスオープンを使用してヘッドモードでサイプレスを実行する次のコマンドを実行します。個々のテストを選択して実行できます。
npm run local:open local:open and local:run Scriptsを使用する代わりに、サーバーを1つのステップで起動してから2番目のステップでサイプレスを実行することもできます。
npm start # start server on port 8080 Webブラウザを開き、 http://localhost:8080に移動すると、サーバーが実行されていることを確認できます。
次に、別の端子ウィンドウで実行されます
npx cypress run # for headless modeまたは
npx cypress open # for headed interactive mode スクリプトlocal:runおよびlocal:open npmモジュールのstart-testエイリアスを使用して、Webサーバーを起動する/scripts/start.jsを実行するためにspart-server-and-testを実行します。サイプレスを起動します。
startスクリプトは、NPMモジュールサーブを使用してWebサーバーを生成し、ポート8080にキッチンシンクアプリを表示します。
Dockerがローカルにインストールされている場合、たとえばDockerデスクトップを使用して、このリポジトリのテストをDockerコンテナでインタラクティブに実行できます。サイプレスを実行するためのすべての前提条件で構築されたサイプレスDocker画像を使用します。これらは、ベース、ブラウザ、Docker HubおよびAmazon ECR（Elastic Container Registry）パブリックギャラリーのオプションとして入手できます。
上記のように、レポをクローニングして依存関係をインストールすることから始めます。
git clone https://github.com/cypress-io/cypress-example-kitchensink
cd cypress-example-kitchensink
npm ci注記
簡単にするために、以下のDockerの例は、 latestバージョンのタグを備えたcypress/baseなどのリポジトリリファレンスを使用します。以前のバージョンを選択するには、 latestタグ、たとえばcypress/base:20.15.1に置き換えます。実稼働には明示的なバージョンタグが推奨されます。タグの選択では、使用がさらに説明されています。
次の例では、それ自体にブラウザが含まれていないサイプレス/ベース画像を使用しています。代わりにサイプレスにバンドルされた電子ブラウザを使用します。 Dockerコンテナを実行するには、以下を実行します。
docker run -it --rm -v .:/e2e -w /e2e cypress/base:latestコンテナプロンプトが表示されたら、入力してください。
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
exit サイプレス/ブラウザの画像を使用すると、Chrome、Edge、Firefoxブラウザーの追加の選択肢があります。以下を実行します。
docker run -it --rm -v .:/e2e -w /e2e cypress/browsers:latestコンテナプロンプトが表示されたら、入力してください。
npx cypress install # install Cypress binary
npm run test:ci # start server and run tests in Electron browser
npm run test:ci:chrome # start server and run tests in Chrome browser
npm run test:ci:edge # start server and run tests in Edge browser
npm run test:ci:firefox # start server and run tests in Firefox browser
exit サイプレス/含まれている画像は、サイプレス/ブラウザと比較して完全なサイプレスのインストールを追加します。以下を実行して、Chromeブラウザでテストする1行コマンドでコンテナを実行します。
docker run -it --rm -v .:/e2e -w /e2e --entrypoint bash cypress/included:latest -c ' npm run test:ci:chrome ' # use for matching Cypress versionsこのリポジトリがまだリリースされた最新のサイプレスバージョンに更新されていない場合は、Repo's Package.jsonのサイプレスバージョンを使用して上記のコマンドのlatestタグを交換してください。不一致のバージョンはエラーを引き起こすことに注意してください。
注記
追加のブラウザChrome、Edge、およびFirefoxは、 linux/amd64アーキテクチャ画像cypress/browsersとcypress/included 。ブラウザはlinux/arm64アーキテクチャ画像用にプリインストールされていません。サイプレスに組み込まれた電子ブラウザは、すべての画像とアーキテクチャで利用できます。
継続的な統合（CI）プロバイダーでランニングテストを試してみたい場合は、最初にリポジトリをフォークして、独自のコピーを作成する必要があります。 GitHubドキュメントを参照して、 remote upstream （このレポー）とremote origin （フォークに）のエイリアスを正しく設定してください。また、テストしたいCIプロバイダーにアカウントが必要です。
貢献ガイドラインをご覧ください。
リリースを参照してください。
