【HTML】【JSON】ブラウザからAPIテストする方法【APIテストツール】

JavaScript
2023.05.19

はじめに

「JSON投げるAPIのテストしておいてー」と言われたときは以下の方法でテストします。

ローカルPCのHTMLからブラウザでJSONをリクエストする方法です。

ブラウザからAPIテストをする方法

APIテストツール作成

まずは、JSONをリクエストしレスポンスを受け取るHTMLを作成します。

以下のソースをコピーしテキストエディタへ貼付け、保存してください。(ファイル名は任意、拡張子は.html)

<!DOCTYPE html>
<html>
  <head>
    <meta charset="utf-8">
    <title>【APIテスト】HTMLファイルからJSONデータを送信する</title>
    <!-- こちらのjqueryはバージョンアップ等、適宜変更してください -->
    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/3.7.0/jquery.min.js"></script> 
  </head>
  <body>
    <h1>【APIテスト】HTMLファイルからJSONデータを送信する</h1>
    <p>URL: <input type="text" id="req_url" name="url" size="100" value="https://test.xxx/request-json/"></p>
    Request: ※ダブルクォートを使うこと<BR>
    <textarea id="req_text" cols=120 rows=10>
{"id": 111,
  "products": [
                {
                  "name": "Coffee",
                  "quantity": 1
                }
              ]
}
    </textarea>
    <BR>
    <p><button id="smt_btn" type="button" style="font-size:16px">submit</button></p>
    Response: <BR>
    <textarea id="res_text" cols=120 rows=10 disabled></textarea><BR>
    <label id="res_date" cols=120></label><BR>
    ※submit押下後にResponseが空になる場合はRequestが正しいJSON形式になっていません 
  </body>
</html>
<script type="text/javascript">
$(function(){

    //画面表示時
    $("#res_text").html("Scriptは正しく記述されています");

    //submitボタンClick時の処理
    $("#smt_btn").click( function(){
        var url = $("#req_url").val();
        $("#res_date").html('');
        $("#res_text").html('');

        var JSONdata = JSON.parse( $("#req_text").val() );
        //console.log(JSON.stringify(JSONdata));

        //JSONデータ送信処理
        $.ajax({
            type : 'POST',                 //GET,POST,PUT,DELETE 必要に応じて変更
            url : url,
            //headers : {'X-Auth-Token' : 'xxxxxxxxxxx'},  //認証トークンが必要な場合はコメントアウトを解除
            data : JSON.stringify(JSONdata),
            contentType: 'application/JSON',
            dataType : 'JSON',
            scriptCharset: 'utf-8',        //文字コードを設定
            success : function(data) {
                //■Success時の処理■
                //alert("success");
                //console.log("success");
                var date = new Date();
                var yymmdd = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
                var hhmmss = date. getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
                $("#res_date").html(yymmdd + ' ' + hhmmss);
                $("#res_text").html(JSON.stringify(data));
                //alert(JSON.stringify(data));
                //console.log(data);
            },
            error : function(data) {
                //■Error時の処理■
                //alert("error");
                //console.log("error");
                var date = new Date();
                var yymmdd = date.getFullYear() + '/' + date.getMonth() + '/' + date.getDate();
                var hhmmss = date. getHours() + ':' + date.getMinutes() + ':' + date.getSeconds();
                $("#res_date").html('Response日時：' + yymmdd + ' ' + hhmmss);
                $("#res_text").html(JSON.stringify(data));
                //alert(JSON.stringify(data));
                //console.log(data);
            }
        });
    })
})
</script>

コメントアウトしている箇所は必要に応じてコメントアウト解除してください。

便利な入力補助機能

テキストエリアへJSONデータを入力する際の入力補助機能を以下の記事で紹介しています。

APIテスト実施方法

ブラウザをcross-originモードで開きます(APIサーバがローカルでない場合)

今回はEdgeで実施してみます

(Chromeでのcross-originモード実施方法はこちらに記載しています)

  1. Windowsボタン＋Rで「ファイル名を指定して実行」を表示
  2. 「名前(O):」へ以下を入力し「OK」を押下
"C:\Program Files (x86)\Microsoft\Edge\Application\msedge.exe" --disable-web-security --user-data-dir="C://Chrome dev session"

「”C:\Program File。。。」の部分はインストールフォルダへ変更してください。

  1. 開いたEdgeへhtmlファイルをドラッグ＆ドロップ
  1. 「Response」の項目へ”Scriptは正しく記述されています”と表示されていることを確認

※表示されていない場合は、ブラウザがcross-originモード開けていないorHTMLファイルが正しく作成されてないためやり直してみてください。

  1. 「URL」・「Request」を入力し「submit」を押下
  2. 「Response」へ表示された返却値を確認
APIテスト実行結果(あり得ないサーバへリクエストとしているのでエラーになって当然。。)

返却値のstatusはHTTPエラーです。

例えば、statusが404になっていたらURLが間違ってる、403ならアクセス権が無いなど。。

まとめ

モノづくりの中で最も大変なテスト工程ですが、APIなどテストが簡単にできるツールを作成しチーム内で共有することには、多くの利点があります。
以下は、その主なメリットです。

  1. 効率的なテスト実施: 簡単に使用できるテストツールは、テストプロセスを効率的に実行するのに役立ちます。これにより、テストケースの設計、実行、結果の収集がスムーズに行えます。結果として、テスターの生産性が向上し、テストサイクルが短縮されます。
  2. リグレッションテスト: アプリケーションの変更やアップデートが行われた際、簡単なテストツールを使用してリグレッションテストを自動化できます。これにより、変更による既存の機能への影響を継続的に監視できます。
  3. 品質向上: テストツールを使用することで、アプリケーションの品質向上が図れます。バグの早期発見や問題の修正により、安定した、信頼性の高いソフトウェアを提供できる可能性が高まります。
  4. リソース削減: 手動テストに比べてテストツールを使用することは、リソースの削減につながります。自動化されたテストケースは、短時間で大規模なテストを実行でき、手動テストに必要なリソースと時間を節約します。
  5. 反復テストの容易性: 開発サイクルが短いアジャイルやDevOps環境では、短い間隔でアプリケーションをテストする必要があります。テストツールは、迅速な反復テストを容易に行えるため、アプリケーションのスピーディーなリリースに寄与します。
  6. 再利用可能なテストスクリプト: テストツールを使用して作成されたテストスクリプトは、再利用できます。これにより、同じ機能やユーザーシナリオに対して繰り返しテストを行う場合に、再作成の手間を省けます。
  7. 報告と文書化: テストツールはテスト結果の自動報告を生成し、テストカバレッジを文書化するのに役立ちます。プロジェクトステークホルダーや開発者に対して進捗と品質に関する情報を提供しやすくなります。
  8. ユーザーエクスペリエンス向上: テストツールを使用してアプリケーションの品質を向上させることは、ユーザーエクスペリエンスを向上させるのに寄与します。バグや問題を最小限に抑え、使いやすいアプリケーションを提供できます。

簡単なアプリケーションテストツールを開発および使用することは、ソフトウェア開発プロセスの全体的な効率性と品質向上に寄与します。自動化されたテストプロセスは、開発プロジェクトの成功に不可欠であり、アプリケーションの信頼性と適合性を確保します。

コメント

タイトルとURLをコピーしました