UI テストのために HTTP ステータスコードを変更する

この短い記事では、Unsplash アプリが検索時の問題に遭遇したときの動作を確認するために、バックエンドのエラーをシミュレートします。

1. はじめに

さまざまなユーザーケースをテストするために、バックエンド開発者に偽のステータスコードを用意してもらう代わりに、Proxyman というデバッグツールを使うことができます。

基本的に、Proxyman はモバイルアプリや Web アプリをデバッグする際に便利なツールです。リクエストとレスポンスの両方をその場で変更できるからです。

iOS デバイスに Proxyman 証明書を設定すると、デバイスとの間で送受信されるすべてのリクエストが、Remote devices セクションの下で Proxyman にキャプチャされます。

URL をダブルクリックすると、そのレスポンスの内容を確認できます。元のステータスコードは 200 OK です。

次に、Map Local ツールを有効にして、リクエストとレスポンスの監視を開始します。

続いて、Map Local ツールのウィンドウがポップアップ表示されるので、マッピングの設定を開始します。

2. HTTP レスポンスのステータスコードを変更する

元のレスポンスのボディを変更するのと同様に、エディタでステータスコードを変更できます。

File Path には、元のレスポンスの現在の場所が表示されます（通常はデスクトップに保存されています）。

クリックして、お好みのエディタでファイルを開きます。

…次に、ステータスコードを 404 に変更します。これにより、デバイスはサーバーとの通信には成功したものの、サーバーが要求されたものを見つけられなかった状態をシミュレートできます。

3. 一致するルールを作成する

次に、Proxyman がドメインをキャプチャできるようにルールを定義します。こうすると、ルールに一致するすべての API 呼び出しが検出され、サーバーからではなく、ローカルファイルに設定したステータスコードを返すようになります。

マッピングするドメインを入力します

…次に、変更したレスポンスを選択し、Done をクリックします。

その API を再度呼び出すとすぐに、Proxyman がそのリクエストをキャプチャし、ローカルディレクトリ内の変更済みレスポンスとマッピングします。 ここで、受信したレスポンスのヘッダーをクリックすると、そのレスポンスがサーバーからではなく、ローカルファイルから返されていることを示す行が追加されているのが分かります。

すると、Unsplash アプリでは、検索結果の画像を表示する代わりに黒い画面が表示されます。

別のバックエンドエラーの UI をテストしたい場合は、ステータスコードを変更するだけです。

4. 次のステップ

ステータスコードの変更は、モバイルアプリの開発やテストで役立ちます。Map Local を使えば、開発者やテスト担当者は、バックエンドチームの手を借りることなく、フロントエンドやバックエンドのエラーを簡単にシミュレートし、さまざまなシナリオでアプリがどのように動作するかを確認できます。

レスポンスの通過中に一度だけ素早く変更したい場合は Breakpoint を使います。同じモックレスポンスを何度も返したい場合は Map Local を使います。404 だけで終わらせないでください。サインインの問題には 401 または 403、レート制限には 429、サーバー障害には 500 を試し、アプリがユーザーに分かりやすい次のアクションを示しているかを確認しましょう。

次の記事では、サイトの開発版があり、本番サイトを閲覧する際に一部のリクエストを開発版から返したい場合に、Map Remote 機能の使い方を紹介します。どうぞお楽しみに。次の記事でお会いしましょう！

---

Proxyman は高性能な macOS アプリで、iOS デバイス、iOS シミュレータ、Android デバイス上のアプリやドメインからの HTTP/HTTPS リクエストを、開発者がキャプチャして確認できます。

https://proxyman.com からダウンロードできます。