サイプレスの自動化:それに関連する15の重要な要素

このチュートリアルでは、サイプレスオートメーションフレームワークについて詳しく説明します。 この記事では、サイプレスとは何か、他のテストフレームワークとの違い、サイプレスのアーキテクチャ、およびインストール手順について説明します。 サイプレスはエキサイティングなトピックであり、学ぶのも楽しいです。 さぁ、始めよう!

サイプレスオートメーションフレームワーク

Cypress Automation Frameworkは、最新のWebアプリケーションでのフロントエンドテストに主に焦点を当てた、純粋なJavascriptベースのテストツールです。 サイプレスを使用すると、アプリケーションをビジュアルインターフェイスで簡単にテストして、テストの実行を確認できます。 したがって、サイプレスは、スクリプトの作成とテストの実行を容易にすることで、開発者とQAエンジニアの両方に恩恵をもたらします。 さらに、独自のテストランナーが付属しているため、DOMの操作が簡単になり、ブラウザーで直接実行できます。

コンテンツの表

サイプレスとは?

サイプレスはより速く、より良く、ブラウザ上で実行される決定的なテストを提供します。サイプレスは主にSeleniumと比較されますが、完全に異なります。 サイプレスはSeleniumの上では動作しません。つまり、完全に独立しています。 代わりに、サイプレスは、Javascriptが豊富なテストフレームワークであるMocha上で実行されます。 幅広いBDDおよびTDDアサーションにアクセスできるChaiアサーションライブラリとのみ互換性があります。

サイプレスは主にXNUMXつの異なるタイプのテストに焦点を当てています。 それらは、エンドツーエンドテスト、単体テスト、および統合テストです。 サイプレスは、ブラウザで実行できるすべてのテストを実行できます。 さらに、フロントエンドテストに夢中になっているさまざまなモック機能と検証が付属しています。

Cypressがサポートするブラウザは、Chrome、Firefox、Edge、Electron、およびBraveです。 さらに、クロスブラウザテストはサイプレスで簡単に実現できます。 最後に、サイプレスはJavascriptのみをサポートしていますが、Typescriptを使用して作成することもでき、主にJavascriptを使用して作成できます。

サイプレスオートメーション

サイプレスは無料のテストランナーを備えたオープンソースツールですが、ダッシュボードの料金を請求するチームや企業向けの価格設定があります。 ただし、フレーク検出、電子メールサポート、Jira統合などの追加機能がない限り、ダッシュボードはある程度無料です。

サイプレスは主にWeb上のスクリプトを自動化するために使用されます(ブラウザーで実行されるものはすべて自動化できます)。 ネイティブモバイルアプリで実行することはできませんが、モバイルアプリケーションがブラウザーで開発されている場合、それらの機能の一部を自動化できます。

特徴

サイプレスには、他の自動化ツールとは一線を画す素晴らしい機能がたくさんあります。 ここでは、主な機能のいくつかについて説明します。テストケースの作成を開始したら、後で他の部分を紹介します。

  1. 自動待機 –サイプレスには自動待機という利点があります。 DOMが要素をフェッチするのを待つために、強制待機とスリープを追加する必要はありません。 サイプレスは、要素との相互作用とアサーションの実行を自動的に待機します。 したがって、テストは高速です!
  2. タイムトラベル –サイプレスはテスト実行中にスクリーンショットをキャプチャします。 ダッシュボードで実行されたコマンドにカーソルを合わせるだけで、結果をリアルタイムで視覚的に表示できます。 このようにして、テストのデバッグが容易になります
  3. デバッグテスト –サイプレスは、開発者ツールなどの一般的なツールからテストをデバッグできます。 エラーは読み取り可能であり、スタックは簡単に追跡できます。
  4. スタブリクエスト –サイプレスには、スタブやスパイが使用する機能の動作、ネットワーク応答、またはタイマーを確認および制御するオプションがあります。
  5. 継続的インテグレーション –サイプレスは他の追加のCIサービスに依存しません。 ただし、テスト用のコマンドを実行すると、統合に簡単にアクセスできます。

サイプレスについての神話

サイプレスはJavascript対応のWebアプリケーションでのみ実行できるという神話があります。 ただし、サイプレスはDjango、Ruby on Rails、Laravelなどで構築されたすべてのWebアプリケーションをテストできます。さらに、サイプレスはPHP、Python、Ruby、C#などのプログラミング言語をサポートします。ただし、テストはJavascriptで記述します。 ; それを超えて、サイプレスはあらゆるアプリケーションで動作します。

サイプレスのコンポーネント

サイプレスにはXNUMXつの主要なコンポーネントがあります。 彼らです テストランナー 及び ダッシュボード.

サイプレス
サイプレステストランナー
サイプレステスト機能

テストランナー – Cypressは、この独自のテストランナーを提供します。このランナーでは、ユーザーは実行中のコマンドとテスト対象のアプリケーションを表示できます。

テストランナーの下にいくつかのサブコンポーネントがあります。 彼らです

  1. コマンドログ –これはテストスイートを視覚的に表したものです。 テストで実行されたコマンド、アサーションの詳細、およびテストブロックを確認できます。
  2. テストステータスメニュー –このメニューには、合格または不合格のテストケースの数と、実行にかかった時間が表示されます。
  3. URLプレビュー –これにより、すべてのURLパスを追跡するためにテストしているURLに関する情報が得られます。
  4. ビューポートのサイズ設定 –さまざまなレスポンシブレイアウトをテストするためにアプリのビューポートサイズを設定できます
  5. アプリのプレビュー –このセクションには、リアルタイムで実行されるコマンドが表示されます。 ここでは、Devtoolsを使用して各ベースをデバッグまたは検査できます。

ダッシュボード: サイプレスダッシュボードは、記録されているテストにアクセスする機能を提供します。 ダッシュボードサービスを使用すると、合格、不合格、またはスキップされたテストの数を確認できます。 また、cyを使用して、失敗したテストのスナップショットを表示できます。 スクリーンショット()コマンド。 また、テスト全体のビデオまたは失敗したテストのクリップを見ることができます。

サイプレスアーキテクチャ

ほとんどのテストツールは、ブラウザの外部のサーバーで実行され、ネットワークを介してコマンドを実行します。 ただし、サイプレスは、アプリケーションも実行されているブラウザーで実行されます。 このようにして、ブラウザ内のすべてのDOM要素とすべてにアクセスできます。

ノードサーバーは、クライアント側のサイプレスの背後で実行されます。 したがって、ノードサーバーとサイプレスは相互に作用し、実行をサポートするタスクを実行します。 フロントエンドとバックエンドの両方にアクセスできるため、実行中のリアルタイムでのアプリケーションへの応答性は十分に達成されており、ブラウザーの外部でも実行できるタスクを実行することもできます。

サイプレスアーキテクチャ

サイプレスはまた、ネットワーク層と相互作用し、コマンドをキャプチャします Webトラフィックを読み取って変更する。 最後に、サイプレスはHTTPリクエストとレスポンスをノードサーバーからブラウザに送信します。 サイプレスはネットワーク層で動作するため、Webブラウザの自動化を妨げる可能性のあるコードを変更するのに役立ちます。 ノードサーバーとブラウザ間の通信は、プロキシが開始された後に実行を開始するWebSocketを介して行われます。

サイプレスは、ブラウザの内外で実行されるすべてのコマンドを制御します。 ローカルマシンにインストールされているため、オペレーティングシステムと直接対話して、ビデオの録画、スナップショットのキャプチャ、ネットワークレイヤーへのアクセス、ファイルシステムの操作を簡単に実行できます。 サイプレスは、DOM、ウィンドウオブジェクト、ローカルストレージ、ネットワークレイヤー、DevToolsからすべてにアクセスできます。

サイプレスをインストールする

このセクションでは、テストケースを作成する前に従う必要のあるインストールプロセスについて説明します。 サイプレスをダウンロードするには、XNUMXつの異なる方法があります。 彼らです

  1. npm経由でインストール
  2. 直接ダウンロード

Cypressをインストールする前に、npmを介してインストールを開始するためのいくつかの前提条件が必要になる場合があります。 それらを詳しく見てみましょう。

前提条件

テストケースを作成する前に、特定の前提条件が必要になります。

  • 上で説明したように、サイプレスはノードサーバー上で実行されます。 したがって、Node.jsをインストールする必要があります。
  • また、テストケースを作成するには、コードエディターまたはIDEが必要です。

この例では、Visual StudioCodeを使用します。 それでは、詳細を詳しく見ていきましょう。

MacでのNode.jsのインストール

ここでは、MacにNode.jsをダウンロードする手順について説明します。 案内する https://nodejs.org/en/download/。 これで、ダウンロードページが表示されます。

macOのノードパッケージ

1.macOSインストーラーをクリックします。 クリックすると、以下からダウンロードしたパッケージファイルを見つけることができます。 pkgファイルをクリックしてNode.jsをインストールします

インストーラーの紹介

2. .pkgファイルをクリックすると、ノードインストーラーが開きます。 紹介セクションでは、Node.jsとnpmのバージョンを紹介します。 [続行]をクリックします

ライセンスに同意する
インストーラーでのアクセスを許可する

3. [同意する]ボタンをクリックして、[続行]をクリックします。 ダウンロードフォルダ内のファイルへのアクセスを許可するポップアップが表示されます。 [OK]をクリックします。

目的地を選択

4.このセクションでは、Node.jsをダウンロードする必要のある宛先を選択できます。 繰り返しになりますが、システムスペースに応じて選択できます。 ここでは、デフォルトの場所を選択しています。

インストールの種類
インストールするユーザー名とパスワードを入力します

5. [インストール]ボタンをクリックします。 クリックすると、システムパスワードを尋ねるポップアップが表示されます。 パスワードを入力し、[ソフトウェアのインストール]をクリックします。

インストールの概要

6.やあ! Node.jsとnpmパッケージをインストールしました。 [閉じる]をクリックしてインストールを完了します。

MacでのVisualStudioCodeのインストール

Node.jsが正常にインストールされました。 それでは、コードエディターのVisual StudioCodeをインストールしましょう。 VSコードは、Javascriptのすべての組み込み機能を備えた強力なツールです。 それでは、Visual StudioCodeのインストール手順を詳しく見ていきましょう。

ここでは、MacでVSコードをダウンロードする手順について説明します。 まず、に移動します https://code.visualstudio.com/download VSコードのダウンロードページにアクセスします。

MacでのVSCodeのインストール

1.Macアイコンをクリックします。 以下にダウンロードされているパッケージを見ることができます。

zip形式でインストールされたパッケージ

2.ダウンロードしたファイルをクリックして、パッケージを解凍します。 解凍すると、FinderのダウンロードでVisualStudioコードを見つけることができます。

ダウンロードのVSコード

3.やあ! コードエディタをダウンロードしました。 アイコンをクリックして、Visual StudioCodeを開きます。

新しいサイプレスプロジェクトの作成

Visual StudioCodeで新しいノードプロジェクトを作成する方法を見ていきます。 VS codeアイコンをクリックすると、ウェルカムページが表示されます。 次に、[ワークスペースの追加]フォルダーをクリックして、新しいフォルダーを作成します。

新しいプロジェクトの作成

フォルダをクリックすると、新しいフォルダを追加するように求めるポップアップが表示されます。 次に、ワークスペースを追加する場所をクリックします。 次に、[新しいフォルダー]をクリックし、フォルダー名をCypressProjectとして追加して、[開く]をクリックします。

新しいフォルダの作成

これで、サイプレステスト用のフォルダーが作成されました。 テストの作成を開始する前に、package.jsonファイルをインストールする必要があります。 インストールする前に、package.jsonファイルとは何かを理解しましょう。

Package.jsonファイルとは何ですか?

Package.jsonは、通常プロジェクトルートにあるファイル内のすべてのnpmパッケージで構成されます。 通常、Node.jsプロジェクトのルートディレクトリにあります。 このファイルには、プロジェクトに必要なすべての該当するメタデータが含まれています。 npmにすべての情報を提供し、プロジェクトの識別と依存関係の処理に役立ちます。 Package.jsonファイルには、プロジェクト名、バージョン、ライセンス、依存関係などの情報が含まれています。
これで、package.jsonファイルとは何かがわかりました。 それでは、VisualStudioコードでファイルをダウンロードする手順を始めましょう。

ターミナルを開く

1.コマンドを実行するには、ターミナルを開く必要があります。 VSコードの上部で、をクリックします。 ターミナル。 ドロップダウンが開いたら、をクリックします 新しいターミナル.

package.jsonファイルをインストールします

2.ターミナルが開いたら、プロジェクトディレクトリに以下のコマンドを入力してEnterキーを押します。

npm init

3. Enterキーを押すと、特定の情報が表示されます。 ターミナルに必要な詳細を入力し、Enterキーを押してすべてのフィールドを取得できます。

プロジェクト詳細
  • パッケージ名: パッケージには任意の名前を付けることができます。 作成したフォルダ名が事前に入力されているため、空白のままにしました。
  • バージョン:これは、npmのバージョンの情報を提供します。 これをスキップしてEnterキーを押すことができます。
  • 商品説明:ここで、パッケージに追加情報を与えることができます。 必要に応じて、説明を入力してEnterキーをもう一度押すことができます。
  • :これは、アプリケーションのエントリポイントを表します。 index.jsが事前に入力されているため、このフィールドをスキップしてEnterキーを押すことができます。
  • テストコマンド:テストを実行するために与えられるコマンド。 ここではコマンドを指定する必要はありませんが、必要に応じて、確実に任意のコマンドを指定できます。
  • Gitリポジトリ:このフィールドには、gitリポジトリへのパスが必要です。 このフィールドは空白のままにすることもできます。
  • キーワード:プロジェクトの識別に役立つ一意のキーワード。 このフィールドはスキップすることもできます。
  • 著者:これは通常、その人のユーザー名です。 名前を追加してEnterキーを押すことができます。
  • ライセンス:ライセンスにはISCが事前に入力されています。 Enterキーを押して続行できます。
  • 4. Enterキーを押すと、ターミナルは入力したすべての詳細をリストして確認を求めます。 タイプ あり もう一度Enterキーを押します。
Package.jsonファイルの作成確認

これで、package.jsonファイルが生成されました。 提供された情報を使用して、コードエディタでファイルを表示できます。

Package.jsonファイルを作成しました

サイプレスのインストール手順

サイプレスのダウンロード、ノード、および初期化されたnpmのすべての前提条件をインストールしました。 上記のように、サイプレスをダウンロードするにはXNUMXつの方法があります。

npm経由でサイプレスをダウンロード

サイプレスをインストールするには、ターミナルで以下のコマンドを渡す必要があります。 さらに、ノードをインストールしてpackage.jsonファイルを生成するには、プロジェクトディレクトリでコマンドを実行する必要があります。

npm install cypress --save-dev
サイプレスインストールコマンド

コマンドを渡すと、プロジェクトに必要なすべての関連する依存関係がダウンロードされます。 この記事の執筆時点で、サイプレスの最新バージョンは 7.7.0。 ダウンロード時のバージョンが異なる場合があります。

サイプレスのインストールの成功

上の画像を参照すると、サイプレスをダウンロードしたことがわかります。 ターミナルにダウンロードされた表現と、package.jsonファイルにdevDependenciesを追加することで確認できます。

直接ダウンロード

プロジェクトでNodeまたはnpmパッケージを使用していない場合は、サイプレスをCDNから直接ダウンロードできます。 ただし、ダッシュボードにテストを記録することは、直接ダウンロードして行うことはできません。

サイプレスのダウンロードをクリックすると、こちらから直接ダウンロードできます。 リンク。 これで、パッケージが直接ダウンロードされます。 パッケージがダウンロードされたら、zipファイルを開いてダブルクリックします。 サイプレスは、依存関係をインストールしなくても実行できます。 このダウンロードは常に最新バージョンベースを取得し、プラットフォームは自動的に検出されます。 ただし、直接ダウンロードするのではなく、npm経由でサイプレスをダウンロードすることをお勧めします。

テクノロジーに関するその他の投稿については、次のWebサイトをご覧ください。 テクノロジーページ.

上へスクロール