AI YouTubeサムネイル生成UIをPlaywrightで検証する
この記事は、公開ページの表示から組み立てた要件・テスト例です。実際のThumbs.ai内部実装、API、DOMセレクタ、性能値を確認したものではありません。コードのラベルは説明用の仮契約です。
公開フローを要件へ分解する
公開ページの AI YouTube Thumbnail Maker では、画像アップロードまたはYouTubeリンク、プロンプト、スタイル、表情の雰囲気、複数候補、16:9・9:16が案内されています。PNG、JPG、JPEG、WebPを最大4MBまで入力できる説明もあります。
| 領域 | 正常系 | 異常系・レビュー |
|---|---|---|
| Source | 画像・リンク・概念を選ぶ | 形式、容量、空URL |
| Brief | 主役・出来事・証拠を入力 | 本編にない出来事 |
| Style | スタイルと表情を選ぶ | 事実と演出の混同 |
| Generate | 複数候補を受け取る | timeout、cancel、部分失敗 |
| Review | 小さく比較する | 主役が読めない |
| Export | 選択候補を保存する | 二重保存、出典欠落 |
入力エラーでBriefを失わない
import { test, expect } from "@playwright/test";
test("不正画像でもBriefを保持する", async ({ page }) => {
await page.goto("/ai-youtube-thumbnail-maker");
await page.getByLabel("Subject").fill("speaker holding the prototype");
await page.getByLabel("Source image").setInputFiles("fixtures/too-large.png");
await expect(page.getByRole("alert")).toBeVisible();
await expect(page.getByLabel("Subject")).toHaveValue("speaker holding the prototype");
});
実際のUIセレクタではなく、実装前に合意する契約例です。エラーで主役、出来事、文字を初期化しないことがテストのポイントです。
候補の比較軸を検証する
候補を複数表示するなら、何を変えたかを保存します。
type CandidateSet = {
axis: "crop" | "subjectScale" | "emotion" | "aspect";
fixed: string[];
ids: string[];
};
cropを比べるときは主役と比率を固定し、aspectを比べるときは主役と文字を固定します。候補を選ぶ前に、動画にある主役か、文字がタイトルの重複ではないか、スマホサイズで読めるかを確認します。
生成済みと公開可能を分ける
AIが作った候補は、完成した公開素材とは限りません。表情を変更した場合は、録画中の表情と誤解されないかを確認します。背景や装飾を追加した場合も、本編にない出来事を示していないかを見ます。
Playwrightでは、候補の一部失敗、cancel後の古い応答、16:9から9:16への切替、キーボード操作、alt、再試行をテストします。画像の取得・生成は、素材の利用許可を自動で証明しません。出典URL、取得日時、利用目的、加工履歴をレビューで確認します。
一般のオリジナル制作へ進む場合は、Thumbs.aiへ許可された素材とBriefを引き継ぎます。クリック数や再生数を受け入れ条件にしないことも重要です。
レビュー担当者は、元画像と加工後の候補を並べ、どこが編集されたかを記録します。候補の選択理由、比率、プロンプトの版を残すと、後から同じ動画を再編集するときも確認しやすくなります。
運用では、候補ごとにdecisionを付けると便利です。keepは本編との約束と権利メモが確認済み、reviseは主役や文字の調整が必要、stopは素材の利用範囲や出来事の確認が未完了、という意味にします。入力URLやBriefを更新したときはrequestIdと版番号を変え、古い応答が現在の候補一覧へ混ざらないようにします。これらはUIの内部実装を断定するものではなく、テスト可能な受け入れ条件の例です。
また、エラー表示は次の操作を示す文にします。「形式を確認して再アップロード」「リンクを修正」「この候補だけ再試行」のように復帰先を明示すれば、レビュー担当者は同じBriefを保ったまま作業を続けられます。
まとめ
入力、Brief、候補、比率、保存を一つの成功フラグにしない。失敗から戻れる状態と、人が確認する内容を分けることで、動画サムネイル生成UIをテストしやすく、説明しやすくできます。