皆の者、ご機嫌麗しゅう！我は、生成AI猫 エルシーじゃ😊
生成AI活用方法を紹介していくのじゃ
基本的な使い方を覚えて、快適な生成AI活用ライフを過ごすのじゃ
出身地：Adobe Firefly（画像生成AI）
皆さん、初めまして！私は、オリバーです。
エルシーさんの助手猫です。
エルシーさんがよく暴走するので、暴走を止める役割をしています。
出身地：Adobe Firefly（画像生成AI）
Claude CodeとPlaywrightを使ってテスト自動化を行った際、「スクリーンショットが途中で途切れてしまう」「同じ画面ばかり保存される」といった問題は多くの初心者がつまずくポイントです。本記事では、実際の事例をもとに、スクショが途切れる原因と改善方法をわかりやすく解説します。画面スクロールの扱い方や操作ごとのスクショ取得など、すぐに実践できる対策をまとめました。
Claude Code×Playwrightでスクショが途切れる原因とは？
Playwrightを使ってテスト自動化をしてみました。
しかし、エビデンスのスクショを確認すると、同じ画面ばかり表示されています。
おそらく下記が原因じゃ！
- 画面が大きくて、画面スクロールしないと表示されない部分がある。
- 「入力欄に文字を入力する」、「ボタンを押す」といった操作ごとにスクショを取得するように、設定していない。
- 画面スクロールしない状態でスクリーンショットを保存するような仕組みになっている。
テスト自動化には限界があるのでしょうか？
諦めるのは早いのじゃ！
対策があるのじゃ！
Claude Codeに下記の指示を行うのじゃ！
そうすることで、改善するのじゃ！
- 画面スクロールしないと表示されない部分を含めて、画面全体のスクリーンショットを保存するようにする。
- 「入力欄に文字を入力する」などの操作ごとにスクリーンショットを保存するようにする。
- 画面スクロールして、テストに該当する箇所についてスクリーンショットを保存するようにする。
Claude Code×テスト自動化Playwright【実際の実行画面】
改善前のスクリーンショット
本当は、下にもっと画面があるのじゃが、一部しか表示されていないのじゃ！
改善後のスクリーンショット
下記の改善を行ったのがこちらじゃ！
- 画面スクロールして操作する。
- 画面全体を表示して、スクリーンショットを保存する
- 操作ごとに、スクリーンショットを保存する。
画面全体が表示されていますね！
タスク名に文字が入力されています。
内容に、文字が入力されています。
前回に続いて2番目の動作が行われたことが確認できました。
タスクを追加した後の操作ですね！
メッセージが画面上部に表示されています。
まとめ
スクリーンショットの保存方法について詳細に設定することで、
快適にテスト自動化できることがわかりました。
生成AIは完璧ではないのじゃ！
試行錯誤することが大事じゃよ！
Claude Code×PlaywrightでE2Eテスト作成の試行錯誤をゼロにする方法
「Claude Codeでテスト自動化を試したいけれど、プロンプトの調整や環境作成で何時間も溶かしてしまう…」と感じていませんか？
試行錯誤に1〜2時間使うコスト（あなたの時給換算）を考えれば、今すぐコピペで動く完成品を手に入れるのが最も効率的です。
仕様書の読み込みから、Playwrightを使ったフルHD高画質エビデンス（スクショ・動画）の取得、見やすいマークダウンレポート出力までを一発で全自動完結させるプロンプトを作成しました。
💡 このプロンプトでできること
- 仕様書（MD等）を読み取り、PlaywrightのE2Eテストコードを自動生成＆実行
- 操作ごとにフルHD（1920×1080）の高画質でスクショ・動画を自動保存
- 時系列で整理された
test_日時.mdレポートを出力 - 届いて3分で試せる「お試し用HTMLアプリ（ZIP）」を同梱
🎥 実際の動く様子・生成レポート
🎯 こんな人におすすめ
- Webブラウザ系のシステム開発を行っているエンジニア
- PlaywrightによるE2Eテスト・エビデンス生成をサクッと自動化したい方
- Claude Codeの検証時間を削って、本来のコード開発に集中したい方
「自分の手元で動くか不安」という方でもすぐ検証できるよう、動作確認済みのサンプルHTMLアプリをセットにして1,500円（※先着順で段階値上げ予定）で公開しています。
以下のnote記事から、プロンプトとサンプルアプリを今すぐダウンロードしてご活用ください！
マニュアル作成の試行錯誤をゼロにするプロンプト公開中
「Claude Codeで操作マニュアルを作らせたいけれど、全画面スクショで文字が潰れたり、動画が急に拡大・チラついたりしてプロンプト調整に時間を取られていませんか？」
手作業でのスクショ撮影や、Playwrightの録画エラー対策に4〜5時間使うくらいなら、バグ対策済みの完成版プロンプトをコピペで使う方が圧倒的に時短になります。
ターゲット読者に合わせた文章調整から、対象要素の自動切り抜き（赤枠ハイライト付き）、さらに画面下のテロップ（字幕）付き高画質動画まで、コマンド一発で全自動生成します。
💡 主な特徴
- 2パス分離構造: 録画時のズーム事故やチラつきを技術的に完全防止
- 要素単位のスマート撮影: 画面全体ではなくモーダルやボタンだけを自動切り抜き
- 読者ターゲット自動最適化: 一般ユーザー向け／技術者向けなどトーンを自動調整
- 届いてすぐ試せる: 動作確認済みの「お試し用HTMLアプリ（ZIP）」を同梱
「手元で動くか不安」という方でも3分で検証できるよう、サンプルアプリ付きで販売しています。マニュアル作成の単純作業から解放されたい方は、ぜひご活用ください
【ブログ運営者の本】Claudeを使いたい方向け！
下記は、アフィリエイト広告ではありません。自分の本の宣伝です。
※Kindle Unlimitedのサービス（毎月定額料金を払うことで本が読み放題）
に加入されている方は無料で読めます！
システムのテストを自動化したい人向け
テストや操作マニュアル作成って面倒ですよね？
自動で下記を行う方法を解説しています。
- テスト自動化
- テスト結果レポートの作成（スクショ・動画）
- 操作マニュアル作成
システム完成後の操作マニュアルを自動で作りたい人向け
操作マニュアルの動画を手作業で作るのは大変なのじゃ！
自動で操作マニュアルの動画を作成する方法を解説しているのじゃ！
Claude：設計・コード作成・テスト自動化（Playwright）
設計・コード作成・テスト自動化まで一通り行いたいです。
それならこの本がおすすめじゃ！
基本設計・ソフトウェア設計・コード作成・テスト自動化まで、実際に操作した画面を見せながら解説しているのじゃ！
量が多くて読むのが大変じゃないですか？
必要最低限しか書いていないからあっという間に読めるのじゃ！
あえてエラーが発生している様子も掲載しているから、取り組みやすいのじゃ！
日本語版
English
生成AIの注意点
ここまで読んでくれてありがとうなのじゃ！
生成AIの使用には注意が必要です。
注意しながら、生成AI活用を楽しんでくださいね！
- 生成AIの回答は必ず確認する
- 理由：生成AIは間違った情報を出すことがあります。
- 対策：複数の情報源と照らし合わせて正確性を確認しましょう。
- 個人情報や機密情報は入力しない
- 理由：入力内容が学習や記録に使われる可能性があり、漏洩リスクがあるため。
- 例：パスワード、住所、電話番号、社内資料などは入力しない。
- 仕事で使うときは組織のルールを確認する
- 理由：会社や組織ごとに生成AI利用のルールが異なるため。
- 対策：利用前に必ず上司や規定を確認しましょう。
- 商用利用の可否を確認する
- 理由：生成AIごとに「商用利用OK／NG」のルールが違うため。
- 対策：利用規約を必ずチェックしてから使いましょう。
- 著作権侵害にならないか確認する
- 理由：生成AIで作った文章や画像が、既存の著作物に似すぎてしまう可能性があるため。
- 対策：公開・販売する前に、オリジナリティや権利関係を確認しましょう。
コメント