메뉴
この拡張の Playwright E2E テスト専用ガイド。E2E テスト実行・新テスト追加・失敗/フレーク調査・URL ドリフト修正・trace/PWDEBUG デバッグで使う。フルスクリーンチャット・チャットなし動画・リプレイ不可・アーカイブ遷移・SPA 遷移の E2E テストを扱う。実ブラウザでの手動動作確認や DOM/見た目の現物確認には使わず、その場合は `ylc-agent-browser` を使う。
Codex 또는 Claude로 설치 이 Prompt를 복사해 Codex, Claude 또는 다른 어시스턴트에 붙여 넣으면 Skill 페이지를 검토하고 설치를 진행할 수 있습니다.
Playwright E2E testing guide for Chrome extensions. Covers extension loading, MV3 Service Worker startup, page.evaluate() serialization boundary, chrome.storage test access, Shadow DOM interaction, iframe throttling, fixture design, and failure diagnostics. Use this skill only when writing, debugging, or stabilizing Playwright E2E tests for Chrome extensions. Do not use it for manual browser verification; use `agent-browser` or the project-specific `ylc-agent-browser` skill when the task is to open the site and inspect real browser behavior.
フルスクリーンチャットの実行時契約とデバッグ手法。Content/YTDLiveChat/ソース解決/スイッチ挙動/iframe 隠蔽方式/blur・background スタイルを変更するとき、またはフルスクリーン/ネイティブチャットの表示崩れ・スロットリング問題を調査するときに使う。live/archive/no-chat の境界、iframe の DOM 移動、CSS の隠蔽方式、スタイル適用先に関わるコードを触るときは必ず参照すること。
Create new skills, modify and improve existing skills, and measure skill performance. Use when users want to create a skill from scratch, update or optimize an existing skill, run evals to test a skill, benchmark skill performance with variance analysis, or optimize a skill's description for better triggering accuracy.
この拡張の web 上の動作確認・手動検証・表示崩れ調査を agent-browser で行うためのガイド。YouTube 上で live/archive/no-chat の挙動、フルスクリーン切替、overlay/switch/native chat/extension iframe の状態、DOM 移動、computed style、スクリーンショット、console/trace を確認するときはこの skill を使う。ブラウザで現物確認する作業では Playwright を使わない。Playwright は E2E テスト実行・追加・修正のときだけ `ylc-e2e-playwright` を使う。
このリポジトリ向けの Git 操作・コミット・PR 作成・PR レビュー手順。差分確認、コミット分割、PR 作成/ドラフト/更新、コードレビュー依頼のときに使う。
Technical blog post writing with structure, code examples, and developer audience conventions. Covers post types, code formatting, explanation depth, and developer-specific engagement patterns. Use for: engineering blogs, dev tutorials, technical writing, developer content, documentation posts. Triggers: technical blog, dev blog, engineering blog, technical writing, developer tutorial, tech post, code tutorial, programming blog, developer content, technical article, engineering post, coding tutorial, technical content
SOC 직업 분류 기준
| name | ylc-e2e-playwright |
| description | この拡張の Playwright E2E テスト専用ガイド。E2E テスト実行・新テスト追加・失敗/フレーク調査・URL ドリフト修正・trace/PWDEBUG デバッグで使う。フルスクリーンチャット・チャットなし動画・リプレイ不可・アーカイブ遷移・SPA 遷移の E2E テストを扱う。実ブラウザでの手動動作確認や DOM/見た目の現物確認には使わず、その場合は `ylc-agent-browser` を使う。 |
Chrome 拡張の Playwright 汎用パターン（拡張ロード、SW 起動、evaluate スコープ、chrome.storage、Shadow DOM、iframe）は chrome-extension-e2e-playwright スキルを参照。本スキルはこのプロジェクト固有のインフラ・契約に特化する。
ブラウザ上の挙動を現物確認するときはこの skill に寄せない。YouTube を開いて switch や iframe の状態を直接調べる作業は ylc-agent-browser を使う。
| トピック | 参照先 |
|---|---|
| Fixture の設計意図・URL 探索・非自明なパターン | references/architecture.md |
| 4 モード契約・skip/fail 判定基準 | references/mode-contracts.md |
--workers で明示的に上書きするwaitForTimeout() で flaky を隠さない。expect.poll() / waitForFunction() を使うreferences/mode-contracts.md の Skip vs Fail treeYouTubeWatchPage / ExtensionOverlay を経由する。spec 内で直接 DOM 操作しないwindow.__ylcHelpers の既存メソッドを活用する。evaluate 内で DOM ヘルパーを再実装しないdata-ylc-* セレクタを使う — Tailwind クラス名でなく data-ylc-* カスタム属性で要素を特定する。プロダクトコードに属性がなければ追加してから E2E を書くreliableClick(locator, verify) を使う。通常クリック→force→JS の順で昇格する。force を最初に使うと addLocatorHandler が発火しない。常に二重クリックするとトグル UI が反転するregisterConsentHandler() が sharedPage、liveUrl、archiveReplayUrl の各 fixture で自動登録される。YouTube の同意ダイアログは addLocatorHandler で自動処理される。production code では noWaitAfter: true を使用中（高速化のため）だが、一般的には消える UI にはデフォルト動作（消滅を待機）が安定createStorageAccessor は Worker → e2e.html bridge のランタイムフォールバック。e2e.html は React/Zustand なしなので rehydration リスクなし。Worker が死んでも自動で Page パスに切り替わる