Vite と Playwright を利用した E2E テスト (#490)

* serve から vite へ

* ちまちまと

* 整理

* webkit はテストから外す

* actions/upload-artifact@v4

* playwright-report はいったん停止

* 変更履歴を更新する

* ファイル名タイポ

* 修正

* pnpm run examples をとりあえず追加

* 注意書き追加

* 整理

* ファイル名を変更

* テスト書き換えた

* chromium だけにする

* run build は必要

* firefox も入れてみる

* 一旦 firefox はなしで

* コード整理

* コード整理

* コード整理

* e2ee の e2e test 追加

* simulcast のサンプルを全面的に書き直す

* e2ee は一旦 skip

* messaging のテスト追加

* コメント追加

* サンプルと E2E テストについて更新

* E2E テストは毎日実行する

* タイポ

* SUFFIX を追加し、GitHub Actions の github.run_id を利用する

* SUFFIX 追加

* fullyParallel を無効にする

* run_id は削除

* SUFFIX がきいているか確認

* node 20 のみ

* messaging を skip

* 片方向だけ

* 18,20,21

* コメント

* node 20 のみにする

* id 指定する

* すまない、レースだった

* すまないレースだった

* すまない、レースだった

* コード整理

* 18,20,21

* 戻す

* messaging skip してみる

* コメントを追加する

* node

* シングル

* chromium に限定する

.github/workflows/e2e-test.yml

@@ -0,0 +1,54 @@
+name: e2e-test
+
+on:
+  push:
+    branches:
+      - develop
+      - feature/*
+  schedule:
+    # UTC 時間で毎日 2:00 (JST で 11:00) に実行、月曜日から金曜日
+    - cron: "0 2 * * 1-5"
+
+jobs:
+  e2e-test:
+    timeout-minutes: 20
+    runs-on: ubuntu-latest
+    strategy:
+      matrix:
+        # node: ["18", "20", "21"]
+        node: ["20"]
+        # browser: ["chromium", "firefox", "webkit"]
+        browser: ["chromium"]
+    env:
+      VITE_SORA_SIGNALING_URL: ${{ secrets.TEST_SIGNALING_URL }}
+      VITE_SORA_CHANNEL_ID_PREFIX: ${{ secrets.TEST_CHANNEL_ID_PREFIX }}
+      VITE_ACCESS_TOKEN: ${{ secrets.TEST_SECRET_KEY }}
+    steps:
+      - uses: actions/checkout@v4
+      - uses: actions/setup-node@v4
+        with:
+          node-version: ${{ matrix.node }}
+      - uses: pnpm/action-setup@v3
+        with:
+          version: 8
+      - run: pnpm --version
+      - run: pnpm install
+      - run: pnpm run build
+      - run: pnpm exec playwright install ${{ matrix.browser }} --with-deps
+      - run: pnpm exec playwright test --project=${{ matrix.browser }}
+        env:
+          VITE_SORA_CHANNEL_ID_SUFFIX: _${{ matrix.node }}
+      # - uses: actions/upload-artifact@v4
+      #   if: always()
+      #   with:
+      #     name: playwright-report
+      #     path: playwright-report/
+      #     retention-days: 30
+      - name: Slack Notification
+        if: failure()
+        uses: rtCamp/action-slack-notify@v2
+        env:
+          SLACK_CHANNEL: sora-js-sdk
+          SLACK_COLOR: danger
+          SLACK_TITLE: Failure test
+          SLACK_WEBHOOK: ${{ secrets.SLACK_WEBHOOK }}

.gitignore

@@ -6,3 +6,8 @@ packages/e2ee/_worker
 apidoc/
 .log/
 dist/
+.env*
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/

.vscode/settings.json

@@ -16,5 +16,6 @@
   "editor.codeActionsOnSave": {
     "quickfix.biome": "explicit",
     "source.organizeImports.biome": "explicit"
-  }
+  },
+  "cSpell.words": ["remotevideo"]
 }

CHANGES.md

@@ -11,6 +11,22 @@
 
 ## develop
 
+- [CHANGE] examples を Vite を利用して動かすように変更する
+  - serve を削除
+  - Vite を追加
+    - vite.config.mts を追加
+  - @voluntas
+- [CHANGE] deploy-pages.yml を削除する
+  - E2E テストで実行できるようになったので
+  - @voluntas
+- [ADD] tests に Playwright を利用した E2E テストを追加する
+  - e2ee と messaging は一旦 skip で追加
+  - @voluntas
+- [ADD] .github/workflows/e2e-test.yml を追加する
+  - Node.js 18,20,21 で E2E テストを実行する
+  - Chromium と E2E テストを実行する
+  - @voluntas
+
 ## 2023.2.0
 
 **2023-12-08**

README.md

@@ -30,10 +30,29 @@ Please read https://github.com/shiguredo/oss before use.
 
 ## サンプル集
 
-Vite と pnpm を利用したサンプル集はこちらです。
+Vite を利用したサンプル集はこちらです。
 
 https://github.com/shiguredo/sora-js-sdk-samples
 
+## サンプル
+
+```
+# .env.local を作成して適切な値を設定してください
+$ cp sample.env .env.local
+$ pnpm install
+$ pnpm run dev
+```
+
+## E2E テスト
+
+```
+# .env.local を作成して適切な値を設定してください
+$ cp sample.env .env.local
+$ pnpm install
+$ pnpm exec playwright install --with-deps
+$ pnpm run e2e-test
+```
+
 ## E2EE について
 
 詳細については以下をご確認ください。