> ## Documentation Index
> Fetch the complete documentation index at: https://docs.devin.ai/llms.txt
> Use this file to discover all available pages before exploring further.

# テストと動画録画

> Devin が変更をエンドツーエンドでテストし、証拠として動画を送信する方法

Devin は PR を作成した後、アプリケーションをエンドツーエンドでテストできます。ローカル環境でアプリを起動し、ブラウザーから操作し、その一連の流れ全体を動画として録画します。録画された動画は添付ファイルとして直接送られてくるため、ブランチを自分で pull しなくても、変更が正しく動作するかを確認できます。

<div id="how-it-works">
  ## 仕組み
</div>

Devin が PR を作成した後、**テストモード** に入ることができます。これは、Devin が次のことを行う体系的なワークフローです。

1. **環境をセットアップする** — 依存関係をインストールし、サービスを起動し、必要なアカウントにログインする
2. **テスト計画を立てる** — 差分とコードベースを読み、最小限で焦点の定まったテスト計画を作成する
3. **動画を記録する** — 画面録画を開始し、デスクトップ上でテスト計画を実行し、重要なポイントに注釈を付ける
4. **結果を送信する** — 録画を停止し、動画を処理して、メッセージの添付ファイルとして送信する

目標は、コードレビュー担当者が短い動画を見てすぐに「なるほど、ちゃんと動いているな」と判断し、そのまま PR をマージできるようにすることです。

<div id="triggering-a-test">
  ## テストの開始方法
</div>

PR を作成すると、Devin がアプリのテストを提案します。**Test the app** をクリックすると、Devin がテストワークフローを開始します。

<Frame>
  <img src="https://mintcdn.com/cognitionai/t3ELyAdF5CfeLLyT/images/test-the-app-button.png?fit=max&auto=format&n=t3ELyAdF5CfeLLyT&q=85&s=6e7cc949688beb051244c06844a7f509" alt="Test the app button" width="276" height="96" data-path="images/test-the-app-button.png" />
</Frame>

<Info>ボタンをクリックしなくても、PR 作成後に自動でテストを実行する設定が、まもなく追加される予定です。</Info>

セッション中の任意のタイミングで Devin にテストを依頼することもできます。たとえば、「今行った変更をテストして、その様子の録画を送って」「ログインページが動作するか確認して、その動画を送って」などと指示できます。

<div id="the-testing-workflow">
  ## テストワークフロー
</div>

Devin がテストモードに入ると、明確に構造化された 3 つのフェーズから成るプロセスに従います。

<div id="phase-1-setup">
  ### フェーズ 1: セットアップ
</div>

テストを始める前に、Devin が環境を準備します:

* **PR とコードベースを読んで、** 何をテストする必要があるかを把握する
* リポジトリ内の (`.agents/skills/` 配下の) **関連するスキルを確認し、** 見つかった場合はそれに従う
* **必要なサービスにログインし、** アクセスに関する問題を解消する
* **利用可能な環境 (staging、dev、local) を確認し、** 接続を確認する
* 必要に応じて **不足しているシークレットをあなたに依頼** — Devin は最初に認証情報を求め、今後のセッションのために保存する

<Tip>
  事前に [環境設定](/ja/onboard-devin/environment) を完了しておくと、テストが大幅に高速になります — Devin は各セッションの最初に依存関係のインストール、サービスの設定、ログインをスキップできます。
</Tip>

<Tip>Devin がテスト中に認証情報を求めた場合、それらは今後のセッション向けに [secrets](/ja/product-guides/secrets) として保存されるため、あなたは一度だけ提供すれば済みます。</Tip>

<div id="phase-2-test-planning">
  ### フェーズ 2: テスト計画
</div>

セットアップが完了すると、Devin は短いテスト計画を作成します:

* 機能が正しく動作することを証明する、**最も重要なエンドツーエンドのフローを 1 つだけ特定する**
* 具体的で、あいまいさのない手順を書く (例: 「右上にある『Save』と表示されたボタンをクリックする」— 「保存オプションを探す」ではない)
* 実際のコードに基づいて計画を立てる — フロントエンドをトレースして、その機能への正確な UI パスを見つける
* 本当に重要なエッジケースがある場合にのみ、追加のテストフローを加える

Devin は実行前に、この計画を短いメッセージとして送るため、必要に応じて進め方を修正できます。

<div id="phase-3-recording-and-execution">
  ### フェーズ3：録画と実行
</div>

CI がグリーンになり、レビューコメントへの対応が完了したら、Devin がテストを実行します。

1. **録画を開始** — 画面全体をキャプチャします
2. **重要な瞬間に注釈を追加** — 重要なポイントにテキストラベル (例：「Testing login flow」「Feature confirmed working」) を追加し、最終的な動画に表示されます
3. **テスト計画を実行** — ブラウザを通じてアプリを操作し、各ステップに従って実行します
4. **録画を停止** — 動画は重要な瞬間の注釈や速度調整を含めて自動的に処理されます
5. **動画を送信** — 録画をメッセージに添付し、そのまま再生できるようにします

<div id="video-recording-details">
  ## ビデオ録画の詳細
</div>

Devin の画面録画には、レビューに役立つ次のような機能があります。

* **注釈** — 動画内の重要なタイミングでテキストラベルが表示され、Devin が何をテストしているかを示します。注釈が付いている箇所の前後では動画がスローになり、詳細を確認しやすくなります。
* **自動ズーム** — Devin がクリックして操作している箇所へ自動的にズームし、カーソルを追従するようになめらかにパンし、アイドル状態のときには自然に引き戻します。
* **自動処理** — 元の録画を処理して重要な操作を強調し、アイドル時間を圧縮します。
* **添付ファイルとして送信** — 動画はセッション内のメッセージに添付され、Devin のウェブアプリまたは Slack から直接閲覧できます。

録画は短く、焦点が絞られたものとして設計されており、機能が動作していることを確認する 1 つの主要なエンドツーエンド・フローによる**簡易的なサニティチェック**として機能します。より網羅的なカバレッジが必要な場合は、ビジュアル録画ではなく、既存のテストスイートや CI を使用してください。

<div id="skill-suggestions">
  ## スキルの提案
</div>

アプリのテストが完了すると、Devin は試したことやうまくいったこと (セットアップ手順、環境設定、アプリの起動方法など) を書き出し、PR を通じて [Skill](/ja/product-guides/skills) を新規作成または更新することを提案します。PR はそのままマージしても、手順を洗練させるために内容を調整してからマージしてもかまいません。各セッションで得た知見が蓄積されていくため、時間がたつほど、Devin はあなたのプロジェクトのテストをよりうまく行えるようになります。

また、任意のタイミングで Devin にこれを行うよう指示することもできます (例: 「create a skill for how to test this app」) 。スキルの作成と管理の詳細については、[Skills guide](/ja/product-guides/skills) を参照してください。

以下はテスト用スキルの一例です：

```markdown theme={null}
---
name: test-before-pr
description: フロントエンドコードに変更を加えるPRを作成する前に、ローカル開発サーバーを起動してページを確認する。
---

## セットアップ

1. 依存関係をインストールする: `npm install`
2. データベースを起動する: `docker-compose up -d postgres`
3. マイグレーションを実行する: `npx prisma migrate dev`
4. 開発サーバーを起動する: `npm run dev`
5. "Ready on http://localhost:3000" と表示されるまで待つ

## 確認

1. git diff を確認して変更されたページを特定する
2. 影響を受ける各ページをブラウザで開く
3. コンソールエラー、レイアウトの崩れ、リンク切れを確認する
4. デスクトップ（1280px）とモバイル（375px）の幅で各ページのスクリーンショットを撮る

## PRを作成する前に

1. `npm run lint` を実行して問題を修正する
2. `npm test` を実行してすべてのテストが通ることを確認する
3. PRの説明にスクリーンショットを添付する
```

スキルを作成・改善するときは、何を検証すべきかを具体的に記述してください。

<CardGroup cols={2}>
  <Card title="良い指示" icon="check">
    * "チェックアウトフローをテストする：商品をカートに追加し、チェックアウトに進み、フォームに入力し、注文確認ページに正しい合計金額が表示されることを確認する"
    * "設定ページのダークモード切り替えが機能することを検証する — テキストが読みやすく、要素が消えないこと"
    * "CSV エクスポートで、正しいヘッダー付きのファイルがダウンロードされることをテストする"
  </Card>

  <Card title="あいまいな指示" icon="xmark">
    * "全部テストする"
    * "アプリがちゃんと動くことを確認する"
    * "何も壊れていないことを確認する"
  </Card>
</CardGroup>

<div id="troubleshooting">
  ## トラブルシューティング
</div>

<div id="devin-didnt-offer-to-test">
  ### Devin がテストを提案しなかった
</div>

テストモードは、Devin がコード変更を含む PR (プルリクエスト) を作成したセッションで利用できます。もし Devin から提案がなかった場合は、いつでも次のように直接依頼できます：「これらの変更をテストして、動画を録画してもらえますか？」

<div id="recording-failed">
  ### 録画に失敗した
</div>

録画の処理に失敗した場合は、Devin が通知します。よくある原因としては、テスト中にアプリがクラッシュしたり、動画処理がタイムアウトしたりすることが挙げられます。Devin は録画を再試行できます。Devin に「Try recording again」と依頼してください。録画ファイルは Devin のマシン上に保存されており、依頼すればいつでも送ってもらえます。

<div id="devin-cant-access-the-app">
  ### Devin がアプリにアクセスできない
</div>

テスト中に Devin があなたのアプリにアクセスできない場合 (例：ログインが必要な画面、VPN 必須など) 、Devin から対応の依頼があります。[secrets](/ja/product-guides/secrets) を使って認証情報を提供するか、[Interactive Browser](/ja/work-with-devin/devin-session-tools#interactive-browser) を使って認証手順を手動で完了するか、[環境設定](/ja/onboard-devin/environment) を実施して事前にアクセス権を設定し、Devin がこれらの問題に遭遇しないようにしてください。