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

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

Dec 27, 2024 am 10:48 AM

一般に 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 までご連絡ください。

ホットAIツール

Undresser.AI Undress

Undresser.AI Undress

リアルなヌード写真を作成する AI 搭載アプリ

AI Clothes Remover

AI Clothes Remover

写真から衣服を削除するオンライン AI ツール。

Undress AI Tool

Undress AI Tool

脱衣画像を無料で

Clothoff.io

Clothoff.io

AI衣類リムーバー

Video Face Swap

Video Face Swap

完全無料の AI 顔交換ツールを使用して、あらゆるビデオの顔を簡単に交換できます。

ホットツール

メモ帳++7.3.1

メモ帳++7.3.1

使いやすく無料のコードエディター

SublimeText3 中国語版

SublimeText3 中国語版

中国語版、とても使いやすい

ゼンドスタジオ 13.0.1

ゼンドスタジオ 13.0.1

強力な PHP 統合開発環境

ドリームウィーバー CS6

ドリームウィーバー CS6

ビジュアル Web 開発ツール

SublimeText3 Mac版

SublimeText3 Mac版

神レベルのコード編集ソフト(SublimeText3)

javascriptの分解:それが何をするのか、なぜそれが重要なのか javascriptの分解:それが何をするのか、なぜそれが重要なのか Apr 09, 2025 am 12:07 AM

JavaScriptは現代のWeb開発の基礎であり、その主な機能には、イベント駆動型のプログラミング、動的コンテンツ生成、非同期プログラミングが含まれます。 1)イベント駆動型プログラミングにより、Webページはユーザー操作に応じて動的に変更できます。 2)動的コンテンツ生成により、条件に応じてページコンテンツを調整できます。 3)非同期プログラミングにより、ユーザーインターフェイスがブロックされないようにします。 JavaScriptは、Webインタラクション、シングルページアプリケーション、サーバー側の開発で広く使用されており、ユーザーエクスペリエンスとクロスプラットフォーム開発の柔軟性を大幅に改善しています。

JavaScriptの進化:現在の傾向と将来の見通し JavaScriptの進化:現在の傾向と将来の見通し Apr 10, 2025 am 09:33 AM

JavaScriptの最新トレンドには、TypeScriptの台頭、最新のフレームワークとライブラリの人気、WebAssemblyの適用が含まれます。将来の見通しは、より強力なタイプシステム、サーバー側のJavaScriptの開発、人工知能と機械学習の拡大、およびIoTおよびEDGEコンピューティングの可能性をカバーしています。

JavaScriptエンジン:実装の比較 JavaScriptエンジン:実装の比較 Apr 13, 2025 am 12:05 AM

さまざまなJavaScriptエンジンは、各エンジンの実装原則と最適化戦略が異なるため、JavaScriptコードを解析および実行するときに異なる効果をもたらします。 1。語彙分析:ソースコードを語彙ユニットに変換します。 2。文法分析:抽象的な構文ツリーを生成します。 3。最適化とコンパイル:JITコンパイラを介してマシンコードを生成します。 4。実行:マシンコードを実行します。 V8エンジンはインスタントコンピレーションと非表示クラスを通じて最適化され、Spidermonkeyはタイプ推論システムを使用して、同じコードで異なるパフォーマンスパフォーマンスをもたらします。

JavaScript:Web言語の汎用性の調査 JavaScript:Web言語の汎用性の調査 Apr 11, 2025 am 12:01 AM

JavaScriptは、現代のWeb開発のコア言語であり、その多様性と柔軟性に広く使用されています。 1)フロントエンド開発:DOM操作と最新のフレームワーク(React、Vue.JS、Angularなど)を通じて、動的なWebページとシングルページアプリケーションを構築します。 2)サーバー側の開発:node.jsは、非ブロッキングI/Oモデルを使用して、高い並行性とリアルタイムアプリケーションを処理します。 3)モバイルおよびデスクトップアプリケーション開発:クロスプラットフォーム開発は、反応および電子を通じて実現され、開発効率を向上させます。

Python vs. JavaScript:学習曲線と使いやすさ Python vs. JavaScript:学習曲線と使いやすさ Apr 16, 2025 am 12:12 AM

Pythonは、スムーズな学習曲線と簡潔な構文を備えた初心者により適しています。 JavaScriptは、急な学習曲線と柔軟な構文を備えたフロントエンド開発に適しています。 1。Python構文は直感的で、データサイエンスやバックエンド開発に適しています。 2。JavaScriptは柔軟で、フロントエンドおよびサーバー側のプログラミングで広く使用されています。

next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) next.jsを使用してマルチテナントSaaSアプリケーションを構築する方法(フロントエンド統合) Apr 11, 2025 am 08:22 AM

この記事では、許可によって保護されたバックエンドとのフロントエンド統合を示し、next.jsを使用して機能的なedtech SaaSアプリケーションを構築します。 FrontEndはユーザーのアクセス許可を取得してUIの可視性を制御し、APIリクエストがロールベースに付着することを保証します

C/CからJavaScriptへ:すべてがどのように機能するか C/CからJavaScriptへ:すべてがどのように機能するか Apr 14, 2025 am 12:05 AM

C/CからJavaScriptへのシフトには、動的なタイピング、ゴミ収集、非同期プログラミングへの適応が必要です。 1)C/Cは、手動メモリ管理を必要とする静的に型付けられた言語であり、JavaScriptは動的に型付けされ、ごみ収集が自動的に処理されます。 2)C/Cはマシンコードにコンパイルする必要がありますが、JavaScriptは解釈言語です。 3)JavaScriptは、閉鎖、プロトタイプチェーン、約束などの概念を導入します。これにより、柔軟性と非同期プログラミング機能が向上します。

JavaScriptをインストールするにはどうすればよいですか? JavaScriptをインストールするにはどうすればよいですか? Apr 05, 2025 am 12:16 AM

JavaScriptは、最新のブラウザにすでに組み込まれているため、インストールを必要としません。開始するには、テキストエディターとブラウザのみが必要です。 1)ブラウザ環境では、タグを介してHTMLファイルを埋め込んで実行します。 2)node.js環境では、node.jsをダウンロードしてインストールした後、コマンドラインを介してJavaScriptファイルを実行します。

See all articles