ホームページ >ウェブフロントエンド >jsチュートリアル >Cypress API テストをマスターする: 例を含む包括的なガイド

Cypress API テストをマスターする: 例を含む包括的なガイド

DDD
DDDオリジナル
2024-12-27 10:48:10146ブラウズ

一般に API と呼ばれるアプリケーション プログラミング インターフェイスは、開発の観点だけでなくテストの観点からもソフトウェア開発ライフサイクルの重要な側面です。これらの API は、異なるシステム間の対話を促進してデータを交換します。したがって、これらの API を徹底的にテストして、アプリケーションがシームレスに機能することを確認することが非常に重要になります。

この記事では、Cypress Testing Framework を使用した API テストを検討し、効率的なテストのために API を自動化する方法を見ていきます。この記事では以下の点について説明します-

API テストの概要

API テストには、GET、POST、PUT、DELETE (またはその他のメソッド) の HTTP リクエストをバックエンド サーバーに送信し、応答を取得することが含まれます。応答が取得されると、期待された値が受信されたかどうかが検証されます。 API テストの重要な側面のいくつかを以下に示します

  • ステータス コードの検証 – 応答内のステータス コードの検証は、目的のステータス コードが受信されていることを確認するために行われます。たとえば、200 個のステータス コードがあれば確実に成功すると予想されます。 HTTP リクエストに使用される他の標準ステータス コードについては、Wiki ドキュメントから参照できます。
  • 応答本文のアサーション – XML または JSON に予期されたデータが含まれており、正しい構造であることを確認するための HTTP 応答本文の検証。
  • リクエスト パラメータのテスト – パラメータとヘッダーに異なる値を渡すことによる API の動作の検証。
  • 認証と認可 – 適切な認証メカニズムとセキュリティ面の検証。 API をテストする際、API のエンドツーエンド機能にバグがないことを確認するために、上記の点が考慮されます。

API テストに Cypress を利用する

Cypress は、ブラウザーとエンドツーエンドの自動テストに使用される、人気のあるフロントエンド テスト ツールです。 Cypress にはネットワーク リクエスト機能が備わっているため、API テストにも適しています。 API テスト用に Cypress が提供する主な機能の一部は次のとおりです-

  • 構文の理解 – UI テストと同様に、Cypress API コマンドは同じ .Should() および .then() 構文を使用します。
  • 組み込みアサーション – Cypress が提供するアサーションを簡単に使用して、ステータス コード、ヘッダー、さらには API リクエストの応答本文をアサートできます。
  • 失敗したリクエストの再試行 – サイプレスは、ネットワークまたは他の同様の問題がないことを確認するために、失敗したリクエストを自動的に再試行します。

精緻なドキュメント – サイプレスはリクエストとアサーションを適切に文書化しているため、実行中のサポートを受けることが容易になります。

Cypress API テストの主な機能

Cypress には、API テストを効果的かつ効率的に実行するのに役立つさまざまな機能が付属しています。いくつかの機能については以下で説明します -

  • cy.wait() – ネットワーク要求を待機するメカニズムを提供し、非同期データのロードを支援します。
  • cy.route() – テストリクエストを特定のハンドラーにルーティングするのに役立ちます。
  • cy.server() – は、テスト スイートのサーバー全体を維持するのに役立ちます。
  • テスト ランナー – テストの並行実行を支援し、所要時間を短縮します。
  • cy.login() – 呼び出しの前に 1 つのコマンドで認証ヘッダーを設定することで、安全な API リクエストを行うのに役立ちます。
  • cy.intercept() – 応答を制御するか、リクエストをインターセプトすることで動作をシミュレートします。 これらの機能を使用すると、ユーザーは強化された機能と効率的なフレームワークを使用して API テストの作成を開始することが非常に簡単かつ便利になります。

Cypress が API の自動化にどのように役立つかを理解したので、Cypress を使用して簡単な API テストを作成してみましょう。ただし、その前に、以下の前提条件が満たされていることを確認する必要があります-

  • Visual Studio などの IDE をインストールします (これが最もよく使用される IDE ですが、IntelliJ などの他の IDE を参照することもできます)
  • システムに Node.js をインストールします 次に、Cypress を使用して最初の API テストを作成する手順を見てみましょう。

Cypress を使用して最初の API テストを作成する

この記事では、GET、POST、PUT、および DELETE メソッドを使用して HTTP リクエストを送信する簡単なシナリオについて説明します。ただし、テスト スクリプトを書き始める前に、環境をセットアップします。

  1. システム内にローカルにフォルダーを作成します。システム内に CypressAPITests というフォルダーを作成しました。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

サイプレス API
2.次に、Visual Studio Code エディターを開き、手順 1 で作成したフォルダーを開きます。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

3 .フォルダーを開いたので、次のステップはノード プロジェクトを設定することです。これを行うには、ターミナルでコマンド npm init -y を使用します。これにより、package.json ファイルが作成されます。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

4 .まだインストールしていない場合は、npx cypress install コマンドを使用して、ターミナルから Cypress をインストールします。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

5 .ここで、テスト用の構成ファイルを作成します。そのために、ターミナルでコマンド npx cypress open を実行します。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

6 . Cypress ツールが開いたら、[E2E テスト] を選択します。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

7 .次の画面で [続行] をクリックします。

8 .構成ファイルのセットアップが完了したら、Visual Studio Code エディターに戻ると、構成ファイルが作成されたことがわかります。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

9 .これで、Cypress が正常にインストールされ、環境もすべて設定されました。これからテストの作成を開始します。

Cypress API オートメーションをデモするために、いくつかのダミー API 呼び出しを使用します。

Visual Studio Code エディターで、Cypress ディレクトリの下にフォルダー e2e を作成します。 e2e フォルダーの下に、APITests という名前で別のフォルダーを作成できます。要件に応じてフォルダー名を選択できることに注意してください。

ここで、最初のテスト ファイルの作成を開始します。 APITests フォルダーの下にファイルを作成します。これに HttpGetRequest という名前を付けます。以下のスナップショットに示すように、このファイル名には .cy.js という拡張子が付きます -

Mastering Cypress API Testing: A Comprehensive Guide with Examples
ここで、メインのコードを書き始めます。その前に、リクエストの基本的な構文を見てみましょう-

cy.request(METHOD,url,body)

Cypress を使用して作成されたリクエストでは、URL は必須パラメータですが、メソッドやボディなどの他のパラメータはオプションです。 Cypress の公式ドキュメントからさまざまなリクエスト構文を参照して、リクエスト構文の異なる使用方法をさらに理解してください。

このシナリオ例では、GET メソッドを使用してリソースを取得するため、メソッドと URL を cy.request のパラメーターとして使用します。

cy.request('GET','https://dummy.restapiexample.com/api/v1/employees')
このコマンドはサーバーへの API 呼び出しを行います。

次に、ステータス コードなどの応答値をアサートします。

.its('ステータス')
. should('equal',200);
このコード行は、応答ステータス コードを検証し、その値が 200 であることをアサートします。

このコードが結合されるとどのように見えるかを見てみましょう:

describe('HTTPGet',()=>{

it('GET リクエスト',()=>{

cy.request('GET','https://dummy.restapiexample.com/api/v1/employees')
.its('ステータス')
. should('equal',200);

})

})
GET リクエストのコードを書いた後、同じものを実行します。これを実行するには、次の 2 つの方法のいずれかを使用できます -

  1. ターミナルを介した実行
  2. Cypress ツールによる実行 どのように実行できるかを一つずつ見ていきます。

ターミナルを介した実行

ターミナル経由で Cypress コードを実行するには、ターミナル ウィンドウを開いて次のコマンドを渡すだけです。

npx cypress run –spec “filepath”

上記のコマンドのファイル パスは、実行するファイルの相対パスです。以下のスナップショットは、私のシステムでの HTTPGetRequest ファイルの実行を示しています-

Mastering Cypress API Testing: A Comprehensive Guide with Examples

テストの実行が成功し、API テストに合格したことがわかります。

Cypress ツールを使用して同じテストを実行してみましょう。

Cypress ツールによる実行

1 .コマンド npx cypress open を記述するだけでツールが開きます。

  1. ツール ウィンドウが開いたら、[E2E テスト] をクリックします。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. 次に、任意のブラウザを選択します。私は電子を選択しています。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. Electron ブラウザが開き、Visual Studio コードを記述した仕様が表示されていることがわかります。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

  1. HttpGetRequest を選択すると、実行が開始され、ログが表示されることがわかります。

Mastering Cypress API Testing: A Comprehensive Guide with Examples

これで、最初の Cypress API 自動化テストが実行されました。次に、他のいくつかの HTTP メソッドを実行できるようにコードを拡張します。

POST メソッド

POST HTTP リクエストを実行するコード -

describe('HTTPGet',()=>{

it('POST リクエスト',()=>{
cy.request({
メソッド: 'POST'、
URL: 'https://dummy.restapiexample.com/api/v1/create',
本文: {
"名前":"テスト投稿",
"給与":"1234",
"年齢":"23"

}
})
.its('ステータス')
. should('equal',200);
})
})
上記のコードを実行すると、以下に示すように実行結果がログに表示されます-

Mastering Cypress API Testing: A Comprehensive Guide with Examples
次のデモでは、別の偽の API コレクションを使用し、HTTP リクエスト メソッドがそれらに対してどのように機能するかを確認します。

PUT メソッド

PUT HTTP リクエストを実行するコード -

describe('HTTPPut',()=>{

it('PUT リクエスト',()=>{
cy.request({
メソッド: 'PUT'、
URL: 'https://jsonplaceholder.typicode.com/posts/1',
本文: {
ID: 1、
タイトル: 'これは PUT アップデートです',
body: 'これは PUT Update 本文です',
ユーザーID: 1,
}
})
.its('ステータス')
. should('equal',200) ;
})
})

上記のコードの実行結果は以下に表示されます-

Mastering Cypress API Testing: A Comprehensive Guide with Examples

DELETE メソッド

削除 HTTP リクエストを実行するコード (上で使用したのと同じ例に以下のコードを追加したことに注意してください)-

it('削除リクエスト',()=>{
cy.request({
メソッド: 'DELETE'、
URL: 'https://jsonplaceholder.typicode.com/posts/1',
})
.its('ステータス')
. should('equal',200) ;
})
PUT リクエストと DELETE リクエストの両方が同じファイル内にあったため、両方のメソッドが実行され、結果は以下のようになります-

Mastering Cypress API Testing: A Comprehensive Guide with Examples
これで、Cypress を使用してさまざまなメソッドの基本的な HTTP リクエストを実行する方法がわかりました。ここで、プロジェクトに Cypress API テストを実装して、短い所要時間で API をいかに簡単にテストできるかを確認してください。

結論

API と API テスト用の Cypress の基本を確認した後、以下の点について結論を出します。

  1. Cypress API Testing は、UI テスト用の Cypress の構文に慣れるための強力なツール セットを支援します。
  2. アサーションを便利に使用して、応答ステータス コードやその他の応答パラメータを検証できます。

出典: この記事はもともと testgrid.io で公開されました。

以上がCypress API テストをマスターする: 例を含む包括的なガイドの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

声明:
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。