# Webアプリケーション用にAPIテストを構築

既存のWebアプリケーションからAPIテストをビルドします。

Webアプリは通常、フロントエンドとバックエンドで構成されます。バックエンドからは、データを消費するフロントエンドで使用されるREST APIを公開します。

Webアプリで新しいフィーチャーを開発する場合、バックエンド開発者は既存のAPIを壊したくありません。フロントエンド開発者側では、信頼性の高いAPIでUIレイヤーを構築します。このように、彼らは本当に重要なことに集中できます: つまり、優れたユーザーエクスペリエンスのデザインに集中できます。

APIテストが価値をもたらすのはここです。APIテストは、開発チームがアプリケーションコードの変更時にAPIコントラクトを壊さないようにするために役立ちます。

## 手順

1. ブラウザーでWebアプリを開きます。
2. ブラウザーのデベロッパーツールを開き、[Network] (ネットワーク)タブを選択します。

   ![ブラウザーの開発者ツールが開かれ、\[Network\] (ネットワーク)タブが強調表示されている状態。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/01_network.png)

   このチュートリアルは、ユーザーがクエンティン・タランティーノの映画を閲覧することを可能にするウェブとモバイルアプリのスクリーンショットによって示されています。
3. Webアプリを使ってユーザーの一連のオペレーションを再現します。

   Webアプリのフロントエンドは、さまざまな画面をナビゲートする時にバックエンドAPIを呼び出します。ブラウザーの[Network] (ネットワーク)タブで送信されるリクエストを確認できます。

   ![\[Network\] (ネットワーク)タブに送信されたリクエスト。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/01_use-app.png)
4. これらのネットワーク交換をHAR形式で保存またはコピーします。

   HAR (HTTP Archive)は、Webブラウザーのネットワークインタラクションを保管することを目的としたJSONベースのアーカイブファイルです。

   ![メニューが開き、\[Copy All as HAR \] (HARとしてすべてコピー)オプションが選択されている状態。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/01_save-har.png)
5. Talend Cloud API Testerを開いて、[SCEANRIOS] (シナリオ) > [Import] (インポート) > [Import HAR 1.2] (HAR 1.2をインポート)に進みます。
6. .harファイルをアップロードしてAPIテストに含めるリクエストを選択し、[Import] (インポート)をクリックします。

   フィルタリング機能を使用すると、テストするバックエンドAPIを対象としないリクエスト(画像、CSS、Javascriptなど)を非表示にできます。

   ![中に含めるさまざまなリクエストが選択されている状態。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/01_har-import-filter.png)
7. [Create] (作成) > [Project] (プロジェクト)をクリックして、リクエストを保存するプロジェクトを選択するか、新しいものを作成します。
8. [Create] (作成) > [Scenario] (シナリオ)をクリックして、この一連のリクエストをシナリオに保存します。

   Talend Cloud API Testerでは、シナリオとは、APIの実際の使用を厳密にエミュレートする、順序付けられたリクエストのシーケンスのことをいいます。
9. シナリオに名前を付けて[Add] (追加)をクリックし、[Save] (保存)をクリックします。
10. シナリオを実行して、Talend Cloud API Testerによって送信されたリクエストを確認します。

    ![シナリオと送信されたリクエスト。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/scenario.png)
11. シナリオにアサーションを追加します。

    アサーションにより、APIが期待どおりに動作することを確認します。適切な開始点は、レスポンス状態コードを確認することです(たとえば、GETリクエストに対して通常200状況コードが予想されます)。

    ![アサーションがシナリオに追加されようとしている状態。](https://help.qlik.com/talend/ja-JP/api-tester-user-guide/Resources/images/01_assertions.png)

    その後、続けてレスポンスヘッダーとボディにアサーションを作成できます。詳細は、[アサーション](https://help.qlik.com/talend/r/ja-JP/Cloud/api-tester-user-guide/assertions)をご覧ください。