E-commerce Test Automation with Cypress

Cypress を使用した E コマースのテスト自動化

このプロジェクトには、Cypress と TypeScript を使用し、ページオブジェクトモデルパターンを採用した、モック E コマースアプリケーションのエンドツーエンドテストが含まれています。

概要

テストでは、次の 2 つの主要なフローを自動化します。

1. 注文成功フロー — 購入を正常に完了できるユーザー
2. 注文失敗フロー — 決済が常に拒否されるユーザー

プロジェクト構成

cypress/
  ├── e2e/                  # Test files
  │   ├── successful-order-flow.cy.ts
  │   └── failed-order-flow.cy.ts
  ├── fixtures/             # Test data
  │   ├── users.json
  │   ├── products.json
  │   └── payment.json
  ├── pages/                # Page Objects
  │   ├── LoginPage.ts
  │   ├── ProductsPage.ts
  │   ├── CartPage.ts
  │   └── CheckoutPage.ts
  └── support/              # Support files
      ├── commands.ts
      └── e2e.ts

セットアップ

1. リポジトリをクローンします
2. 依存関係をインストールします。

   npm install
   

3. 環境変数を設定します。
   • cypress.env.json ファイルを作成します（すでに含まれていますが、実際のプロジェクトではバージョン管理にコミットしないでください）
   • または、必要な認証情報を含む .env ファイルを使用します

テストの実行

すべてのテストを実行します。

npm test

ヘッドレスモードでテストを実行します。

npm run test:headless

特定のテストフローを実行します。

npm run test:success  # Successful order flow
npm run test:failure  # Failed order flow

Cypress GUI を開きます。

npm run cypress:open

環境変数

次の環境変数を使用します。

• CYPRESS_USERNAME：ログイン成功ユーザーのユーザー名
• CYPRESS_PASSWORD：両ユーザーのパスワード
• CYPRESS_FAILURE_USERNAME：決済に失敗するユーザーのユーザー名

これらは次の場所で設定できます。

1. cypress.env.json ファイル（ローカル開発用）
2. .env ファイル
3. CI/CD パイプラインの環境変数

テスト対象アプリケーション

テストは、次の場所にあるモック E コマースアプリケーションを対象としています。
https://v0-imagine-deals.vercel.app

注意事項

• これはテスト目的のみのデモプロジェクトです
• アプリケーションは決済のシナリオをシミュレートします。
  • 合計金額の末尾が .99 の場合、決済が拒否される動作をシミュレートします
  • 合計金額の末尾が .88 の場合、ネットワークエラーをシミュレートします