diff --git a/.claude/commands/harness-audit.md b/.claude/commands/harness-audit.md index ce1d62ba8c..7268503859 100644 --- a/.claude/commands/harness-audit.md +++ b/.claude/commands/harness-audit.md @@ -35,7 +35,7 @@ Misskey リポジトリの `.claude/` 構成を 7 カテゴリで採点し、改 | 2 | Context Efficiency | frontmatter description の冗長度、SKILL.md の長さ分布、重複情報、CLAUDE.md の肥大化 | | 3 | Quality Gates | Stop / PreToolUse / PostToolUse hook の整備、`/quality-gate` 等の完了前ゲートの有無、自動 lint/typecheck | | 4 | Memory Persistence | `.claude/skills/*/SKILL.md` と `references/` の同期状態を評価。プロジェクト側 `.claude/memory/` は未採用方針 (auto-memory はユーザーホーム側で自動運用) のため、ここを採点起点にせず既定 5/10 から開始する | -| 5 | Eval Coverage | `working-on-backend` / `working-on-frontend` の testing リファレンス (backend-testing.md / frontend-testing.md) の網羅、Misskey 固有の e2e/fed/Storybook/Cypress 適用ガイド | +| 5 | Eval Coverage | `working-on-backend` / `working-on-frontend` の testing リファレンス (backend-testing.md / frontend-testing.md) の網羅、Misskey 固有の e2e/fed/Storybook/Playwright 適用ガイド | | 6 | Security Guardrails | SPDX 規約適用、migration 不変性ルール、ja-JP.yml 限定編集ルール、secrets 検出 | | 7 | Cost Efficiency | enabledPlugins の重複・過剰、context-budget の整備、MCP 過剰登録なし | diff --git a/.claude/commands/quality-gate.md b/.claude/commands/quality-gate.md index 6844c2bcc0..720ab56fa4 100644 --- a/.claude/commands/quality-gate.md +++ b/.claude/commands/quality-gate.md @@ -21,7 +21,7 @@ note: 元 ECC 版は言語自動判定 + format/lint/type のジェネリック `/quality-gate [scope]` -完了前の **軽量** 品質チェック。重い E2E / 連合テスト (test:e2e / test:fed / Cypress) は CI 側で実行されるため、本コマンドには含めない。 +完了前の **軽量** 品質チェック。重い E2E / 連合テスト (test:e2e / test:fed / Playwright) は CI 側で実行されるため、本コマンドには含めない。 ## Scope @@ -120,4 +120,4 @@ Frontend ut: PASS (87/87) - ジェネリックな言語自動判定を排除し、Misskey 固定 pipeline に。 - formatter フェーズなし (Misskey は ESLint --fix のみ採用)。 -- e2e / federation / Cypress は重いため除外し CI 側に委譲。 +- e2e / federation / Playwright は重いため除外し CI 側に委譲。 diff --git a/.claude/skills/working-on-backend/references/knowledge/backend-testing.md b/.claude/skills/working-on-backend/references/knowledge/backend-testing.md index 10add7d84c..8fd6dfd9c4 100644 --- a/.claude/skills/working-on-backend/references/knowledge/backend-testing.md +++ b/.claude/skills/working-on-backend/references/knowledge/backend-testing.md @@ -26,7 +26,7 @@ cp .github/misskey/test.yml .config/test.yml 補足: -- ルートの `pnpm start:test` (Cypress 用にテストサーバーを起動するコマンド) を使う経路では実行時に `ncp` で自動コピーされる ([package.json](../../../../../package.json))。それ以外で backend テストを直接走らせる時は上記の手動コピーが必要 +- ルートの `pnpm start:test` (Playwright 用にテストサーバーを起動するコマンド) を使う経路では実行時に `ncp` で自動コピーされる ([package.json](../../../../../package.json))。それ以外で backend テストを直接走らせる時は上記の手動コピーが必要 - すでに `.config/test.yml` があれば各テストスクリプトの内部 `compile-config` で十分なので、追加で `pnpm --filter backend compile-config` を叩く必要はない - `pnpm start:test` は backend e2e テスト (`pnpm --filter backend test:e2e`) の前提ではない (ポート競合の元になるため使わないこと) diff --git a/.claude/skills/working-on-frontend/SKILL.md b/.claude/skills/working-on-frontend/SKILL.md index a4bcab53b4..3fd04257e0 100644 --- a/.claude/skills/working-on-frontend/SKILL.md +++ b/.claude/skills/working-on-frontend/SKILL.md @@ -27,7 +27,7 @@ SKILL.md 本体は references への索引だけ。具体的な手順や規約 - SCSS Modules / `--MI_THEME-*` `--MI-*` CSS 変数 / グローバル utility class (`_button` 等) → [references/knowledge/scss-modules.md](references/knowledge/scss-modules.md) - `os.alert` / `os.confirm` / `os.popup` 等 UI ヘルパー (ブラウザ標準 `alert()` 直呼びは禁止) → [references/knowledge/os-api.md](references/knowledge/os-api.md) - `*.stories.impl.ts` 併設規則 + 複数 story / argTypes / layout / action パターン → [references/knowledge/storybook.md](references/knowledge/storybook.md) -- frontend Vitest / Cypress E2E の書き方と前提 → [references/knowledge/frontend-testing.md](references/knowledge/frontend-testing.md) +- frontend Vitest / Playwright E2E の書き方と前提 → [references/knowledge/frontend-testing.md](references/knowledge/frontend-testing.md) ## 必ず最後に通る場所 diff --git a/.claude/skills/working-on-frontend/references/knowledge/frontend-testing.md b/.claude/skills/working-on-frontend/references/knowledge/frontend-testing.md index cfd81b8f92..49fe0fa59c 100644 --- a/.claude/skills/working-on-frontend/references/knowledge/frontend-testing.md +++ b/.claude/skills/working-on-frontend/references/knowledge/frontend-testing.md @@ -1,4 +1,4 @@ -# Frontend テスト (Vitest / Cypress) +# Frontend テスト (Vitest / Playwright) Misskey frontend のテスト構成。 @@ -13,11 +13,11 @@ pnpm --filter frontend test-and-coverage # カバレッジ付き - 主な配置: `packages/frontend/test/*.test.ts` (例: `i18n.test.ts`, `theme.test.ts`, `is-birthday.test.ts`) - ビルドツール周りなど対象コードと隣接させた方が分かりやすいテストは、コードと同じディレクトリに `*.test.ts` として置く (例: [packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts](../../../../../packages/frontend/lib/rollup-plugin-unwind-css-module-class-name.test.ts)) -- 共有コンポーネント (`MkX.vue`) のユニットテストは現状少なく、`*.spec.ts` / `__tests__/` 形式は採用していない (Storybook + Cypress でカバー) +- 共有コンポーネント (`MkX.vue`) のユニットテストは現状少なく、`*.spec.ts` / `__tests__/` 形式は採用していない (Storybook + Playwright でカバー) -## Cypress E2E +## Playwright E2E -Cypress は **起動済みのテストサーバー** に対して走るため、unit より前提が多い。[.github/workflows/test-frontend.yml](../../../../../.github/workflows/test-frontend.yml) の `e2e` ジョブと同じ手順をローカルで踏む: +Playwright は **起動済みのテストサーバー** に対して走るため、unit より前提が多い。[.github/workflows/test-frontend.yml](../../../../../.github/workflows/test-frontend.yml) の `e2e` ジョブと同じ手順をローカルで踏む: ```bash # 1. テスト用 DB / Redis を起動 (テスト用ポート。開発用の compose.local-db.yml ではない) @@ -29,15 +29,14 @@ cp .github/misskey/test.yml .config/test.yml # 3. 全体ビルド pnpm build -# 4. テストサーバー起動 + Cypress 実行 (いずれもルートから) -pnpm e2e # 内部で pnpm start:test を起動し http://localhost:61812 を待って Cypress run -pnpm cy:open # 対話的に開く (サーバーは別途 pnpm start:test で起動しておく) +# 4. テストサーバー起動 + Playwright 実行 (いずれもルートから) +pnpm e2e # 内部で pnpm start:test を起動し http://localhost:61812 を待って Playwright を実行 ``` -- 設定: ルート [cypress.config.ts](../../../../../cypress.config.ts) -- テスト本体は [cypress/](../../../../../cypress/) 配下 +- 設定: ルート [packages/frontend/playwright.config.ts](../../../../../packages/frontend/playwright.config.ts) で、`packages/frontend/test/e2e/` 配下の `*.spec.ts` を対象にする +- テスト本体は [packages/frontend/test/e2e/](../../../../../packages/frontend/test/e2e/) 配下に配置する。 -新規 frontend 機能の E2E は Cypress に書くのが基本。ただし対象は主要 UI フロー (login / post / drive etc) に限定し、細かい単位テストは Vitest または Storybook で代替する慣習。 +新規 frontend 機能の E2E は Playwright に書くのが基本。ただし対象は主要 UI フロー (login / post / drive etc) に限定し、細かい単位テストは Vitest または Storybook で代替する慣習。 ## Storybook (視覚確認 + Chromatic 視覚回帰) @@ -55,6 +54,6 @@ pnpm --filter frontend build-storybook # 静的ビルド frontend のテスト種別で DB / Redis の要否が違う: - **Vitest (unit)** — DB 不要。ロジック / コンポーネント単体のテストで backend に繋がない (CI の `vitest` ジョブにも `services:` は無い) -- **Cypress (E2E)** — テストサーバー (`pnpm start:test`) 経由で backend に繋ぐため DB / Redis が必要。**テスト用ポートの [packages/backend/test/compose.yml](../../../../../packages/backend/test/compose.yml)** を使う (上記 Cypress E2E の手順を参照) +- **Playwright (E2E)** — テストサーバー (`pnpm start:test`) 経由で backend に繋ぐため DB / Redis が必要。**テスト用ポートの [packages/backend/test/compose.yml](../../../../../packages/backend/test/compose.yml)** を使う (上記 Playwright E2E の手順を参照) 開発用の `compose.local-db.yml` (db `5432` / redis `6379`) は **テストには使わない**。テスト用の `packages/backend/test/compose.yml` (`54312` / `56312`) とはポートが異なり、混同すると接続できない。 diff --git a/packages/frontend/src/components/MkImgWithBlurhash.vue b/packages/frontend/src/components/MkImgWithBlurhash.vue index a61836e101..34ec522885 100644 --- a/packages/frontend/src/components/MkImgWithBlurhash.vue +++ b/packages/frontend/src/components/MkImgWithBlurhash.vue @@ -55,7 +55,7 @@ import { extractAvgColorFromBlurhash } from '@@/js/extract-avg-color-from-blurha // テスト環境で Web Worker インスタンスは作成できない // eslint-disable-next-line @typescript-eslint/ban-ts-comment // @ts-expect-error -const isTest = (import.meta.env.MODE === 'test' || window.Cypress != null); +const isTest = (import.meta.env.MODE === 'test' || window.isPlaywright); const canvasPromise = new Promise(resolve => { if (isTest) { diff --git a/packages/frontend/src/utility/idb-proxy.ts b/packages/frontend/src/utility/idb-proxy.ts index 350169a81d..aedd524fce 100644 --- a/packages/frontend/src/utility/idb-proxy.ts +++ b/packages/frontend/src/utility/idb-proxy.ts @@ -17,16 +17,6 @@ const PREFIX = 'idbfallback::'; let idbAvailable = typeof window !== 'undefined' ? !!(window.indexedDB && typeof window.indexedDB.open === 'function') : true; -// iframe.contentWindow.indexedDB.deleteDatabase() がchromeのバグで使用できないため、indexedDBを無効化している。 -// バグが治って再度有効化するのであれば、cypressのコマンド内のコメントアウトを外すこと -// see https://github.com/misskey-dev/misskey/issues/13605#issuecomment-2053652123 -// eslint-disable-next-line @typescript-eslint/ban-ts-comment -// @ts-expect-error -if (window.Cypress) { - idbAvailable = false; - console.log('Cypress detected. It will use localStorage.'); -} - if (idbAvailable) { await iset('idb-test', 'test') .catch(err => { diff --git a/packages/frontend/test/e2e/fixtures.ts b/packages/frontend/test/e2e/fixtures.ts index 09f3a68e39..822bc4e83f 100644 --- a/packages/frontend/test/e2e/fixtures.ts +++ b/packages/frontend/test/e2e/fixtures.ts @@ -28,6 +28,9 @@ export const test = base.extend<{ _installIgnorableErrorHandlers: void }>({ event.preventDefault(); } }); + + //@ts-ignore + window.isPlaywright = true; }, [...IGNORABLE_ERROR_MESSAGES]); // Playwright側で収集されるページエラーも同じ基準で握りつぶす。 diff --git a/packages/frontend/test/e2e/utils.ts b/packages/frontend/test/e2e/utils.ts index 636af315aa..4a21076464 100644 --- a/packages/frontend/test/e2e/utils.ts +++ b/packages/frontend/test/e2e/utils.ts @@ -3,7 +3,7 @@ * SPDX-License-Identifier: AGPL-3.0-only */ -import type { Locator, Page, APIRequestContext } from 'playwright'; +import type { Locator, Page } from 'playwright'; export const BASE_URL = 'http://localhost:61812'; export const ADMIN_SETUP_PASSWORD = 'example_password_please_change_this_or_you_will_get_hacked'; diff --git a/pnpm-workspace.yaml b/pnpm-workspace.yaml index a2e052bac5..fb37eb0537 100644 --- a/pnpm-workspace.yaml +++ b/pnpm-workspace.yaml @@ -20,7 +20,6 @@ allowBuilds: bufferutil: true canvas: true core-js: true - cypress: true esbuild: true msgpackr-extract: true msw: true