Claude Codeの90%のエラーを修正する方法

スピーカーは、Claude Codeが最近Chrome拡張機能をリリースしたことでアプリ開発ワークフローが大幅に改善されたことを説明しています。従来のPlaywrightやPuppeteer MCPツールは、膨大なコンテキストウィンドウ、プロジェクトフォルダに散らかったスクリーンショット、タスク完了の失敗など深刻な問題を持っていました。この新しいChrome拡張機能は、これらの問題に対する解決策として機能します。スピーカーは、この統合されたMCPがClaude Codeに必要なすべてのカスタムツールを提供すると述べており、AIを使った自動テストへの支持を示しています。

スピーカーは、数百万人にAIでの構築方法を教えた後、自社でこれらのワークフローを実装し始めたAutomataについて説明しています。彼らは、かつてないほど速く、より優れた製品が構築できることを発見しました。Automataは、テックチームを持たないが優れたアイデアがある企業や個人向けに、技術的なコパイロットサービスを提供しています。スピーカーは、開発チームを雇ったり管理したりする手間なく、アイデアを実際に動作するソリューションに変えることを提案しており、hello@automata.devへの問い合わせを呼びかけています。

スピーカーは、シンプなテストを実行するのに多くの段階的なステップが必要であった最初の問題を説明しています。Claudeにウェブサイトのランディングページをテストさせると、各セクションに対してスクロール操作を実行し、ステップごとにスクリーンショットをキャプチャする傾向がありました。この非効率的なアプローチの代わりに、フルページのスクリーンショットを撮ることでトークンを大幅に節約できます。スピーカーは、フルショットを撮るためのカスタムスクリプトを作成し、プロジェクト内のカスタムスラッシュコマンドでそのスクリプトを使用するための指示を追加しました。これにより、テストは大幅に高速化されましたが、同じレベルの精度を保つことができています。

スピーカーは、MCPツールが単純なタスク用に大量のコンテンツを一度にロードしようとする問題について説明しています。特定のdivをロードする代わりに、メインタグ内のすべてのHTMLをロードすることが多く、これは不要な場合でも膨大なトークン数を含んでいます。このコンテキストウィンドウの大部分を消費する問題は、最も単純なタスクでもコンテキストを大幅に膨張させる可能性があります。スピーカーは、Claude.mdファイルにChrome拡張機能を使用する際のコンテキストの適切な管理方法に関する指示を追加することで、これを解決しました。こうすることで、抽出は正確に制限され、不要な情報でコンテキストが膨張することを防ぐことができます。

スピーカーは、Claudeがクッキー通知や同様のプロンプトなどの不要なポップアップを含むウェブサイトに遭遇したときに多くの時間を無駄にする問題を説明しています。スピーカーは、単に同じスクリーンショットとスクロールシーケンスを使用する代わりに、最も一般的な「閉じる」ボタンセレクタとクッキーバナーを閉じるためのパターンを含むスクリプトを作成しました。このスクリプトはコード内のセレクタを検出し、ポップアップを自動的に閉じるための関数を実行します。スピーカーは、メインコンテンツに進む前にこのスクリプトを最初に実行するよう、Claude.mdファイルに指示を追加しました。その結果、Claudeがウェブサイトにアクセスすると、まずクッキーバナーが自動的に閉じられ、トークンを無駄にしたり不要なステップを実行することなくメインコンテンツに進むことができます。

スピーカーは、セキュリティ上の理由からClaudeが代行してCAPTCHAの実行や認証の完了が制限されていることを説明しています。ログインやCAPTCHA認証が必要なウェブサイトで作業するときは、Claudeにタスクを与える前に既に認証しておく必要があります。このアプローチにより、Claudeがブロックされたり、時間を無駄にすることを防ぐことができます。スピーカーは、このセキュリティ制限を理解し、事前に認証を完了することで、テストプロセスをよりスムーズに進めることができると強調しています。

スピーカーは、なぜPuppeteerよりもClaude Chrome統合を好むのかについて詳しく説明しています。Claude Chrome統合は、Claude Codeの開発者によって構築されたネイティブツールであり、改善されたコントロールと機能を持つはるかに優れた統合を提供しています。MCPツールは専用の分離された環境でのテストに焦点を当てており、セッションを保持しませんが、新しいChrome統合によりClaudeはサインイン中のアカウントと相互作用でき、Google DocsやGoogle Sheetsなどのサービスと相互作用することができます。さらに、セッション情報をすべて保持し、それを使用してタスクをより良く実行できるという利点があります。このため、より実用的で効率的なテストが可能になります。

スピーカーは、ブラウザ統合は通常のツール呼び出しよりも計算量が多いため、多くのコンテキストを使用することを警告しています。彼らはブログでもこれについて言及しており、Claude Codeで作業する際は自動圧縮に目を光らせておく必要があります。また、これはChrome統合なので、Chromeでのみ機能し、任意のChromiumブラウザでは動作しません。複数のChromeプロフィールを使用している場合、継続的に間違ったプロフィールを開く可能性があり、スピーカーはこのバグが早く修正されることを期待しています。これらの制限を理解することで、Chrome統合の効果的な使用が可能になります。

スピーカーは、Chrome拡張機能がManifest V3に制限があり、実行時間が長すぎるとブロックされる可能性があることを説明しています。多くの人がClaude Codeの開発者にこれをリポジトリで修正するよう求めています。ウェブアプリケーションのエンドツーエンドテストを開始から終了まで実行している場合、これによってセッションがChromeによってブロックされる可能性があり、Claudeは予期せず停止します。その後、実行を再開するよう再度プロンプトする必要があります。このため、特に長時間実行するタスクを割り当ててコンピュータから離れる場合、問題になる可能性があります。

スピーカーは、実行時間制限の問題に対処するため、エンドツーエンドテストの代わりに、アプリケーションのさまざまな側面をカバーする複数のテストファイルを作成することを推奨しています。各ファイルには、優先度レベル、前提条件、テストステップ、および期待される結果に関する詳細情報が含まれています。テスト実施方法に関するテストガイドと、テストドキュメント用のreadmeも用意されています。Claudeはコンテキストウィンドウが制限されており、その制限に達すると、指示と進捗が失われる可能性があるため、各ファイルのテスト後に包括的なテストレポート文書を作成するよう、Claude.mdファイルに指示を追加しました。こうすることで、ブラウザツールが多くのコンテキストを消費するため圧縮が必要になったとしても、Claudeはこれらの進捗ファイルを参照することで、何がテストされたか、何がまだテストする必要があるかについての認識を保つことができます。

スピーカーは、テストプロセスを効率化するために、別のカスタムスラッシュコマンドを作成したことを説明しています。このコマンドは、ガイド付きの方法でテストし、Claude.mdの指示に従ってテスト後に適切な構造でドキュメントを作成します。また、タスク開始前にコンテキストを監視する指示を追加することで、テスト中にコンテキストが途中で失われず、作業中にコンパクト実行ができます。このワークフローでは、テストプロセスを開始する際にスラッシュコマンドを使用してテスト対象のファイルを指定するだけで、Claudeが正確な指示に従ってテストを開始します。Claudeは独自に問題を特定し、ブラウザと必要なすべてのツールを使用してテストを実行し、コンソール出力を読むことで検出できるエラーを見つけることができます。このようにして、テストプロセス全体が大幅に改善され、Claudeがコンソールログにアクセスでき、ブラウザで自動化されたテストをこれまで以上に効果的に実行できるようになります。

スピーカーは、動画の終了に向けて、チャンネルをサポートして同様のビデオの制作を続けるのに役立てたい場合は、下のスーパーサンクスボタンを使用できることを提案しています。スピーカーは、視聴者に対して常にご視聴ありがとうございますと述べ、次の動画でお会いしましょうと締めくくっています。このエンディングは、コンテンツクリエーターと視聴者の間の継続的な関係を強化するためのものです。