Cypressによるより良い自動テスト

こんにちはDEVSとテスターは、この記事では、どのように我々は自動的なエンドツーエンドのテストを書くことができることを示しますcypress . 我々はE 2 Eテストを行うためのいくつかのシナリオを持っています.この記事は、おそらく角部分をカバーするが、サイプレス部品ではないでしょう.
それで、あなたがちょうどたった今いくつかのテストを書きたいならば、私がアングルToDoアプリプロジェクトとそれで構成されるサイプレスですでにつくったこのレポをクローンしてください.レポリンクですhttps://gitlab.com/mquanit/angular-items . 場合は、すべてのサイプレスと遊ぶための準備ができたら、これをクローンします.
したがって、私たちの例に移動する前に、まず、何が知っているCypress . によるとofficial Website

Cypress is an automated end-to-end testing framework for writing automated tests

しかし、なぜプロッタ、カルマ、モカなどの他の多くのテストツールを使用してサイプレスを使用する必要があります.
サイブレスは角のアプリケーションのための分度器のようです、しかし、サイプレスは実行するのがより速くて、デバッグするのがより簡単です.サイプレスは、アプリケーションの独立した自動エンドツーエンドテストでは良いだけでなく、モデルクラス、サービスクラスなどのメソッドに対して単体テストを行うことができます.サイプレスは、自動化された方法でテストを見ることができるあなたのブラウザで完全なエンドツーエンドのテスト体験を提供します.
サイプレスは、ローカルテストを行うことができます独自のテストランナーを提供します.サイプレスは、タイムトラベル、デバッグ機能、リアルタイムリロード、自動待機のようないくつかの他のクールな機能を提供します.これらの素晴らしい機能は、このツールを別々にして、我々は行動でこれらを見ます.
十分に話をしてください、あなたがすでにこのレポをクローンしたならば、あなたは行くのが良いです、しかし、そうでないならば、あなたはおそらく角度プロジェクトを持っています、そして、あなたはちょうど依存症としてサイプレスを加えなければなりません.我々は、インストールする必要がありますnpm package cypress 次のコマンドを使用します.

npm i -D cypress

サイプレスパッケージには、デスクトップアプリケーションとサイプレスバイナリが含まれます.パッケージインストールがサイプレスバイナリをダウンロードする必要があるので、このコマンドを実行するには数分かかるかもしれません.サイプレスバイナリはグローバルキャッシュディレクトリに保存されますので、将来的にこのパッケージをインストールすると、同じバージョンの方がずっと速くなります.
サイプレスをインストールした後cypress とファイル名cypress.json プロジェクトのルートフォルダに追加されました.発生したヒノキfolder 我々がテストを書く場所とサイプレスがアーチファクトを生み出す場所です.生成されるconfiguration file サイプレス.JSONは空のJSONオブジェクトを含んでいます.このファイルは、cypressのデフォルト動作を設定する場所です.それで、テストを書く前にいくつかの設定を行います.
あなたのcypress.json ファイルを、デフォルトの設定のコードを追加します.

{
  "baseUrl": "http://localhost:4200",
  "ignoreTestFiles": "**/examples/*",
  "viewportHeight": 760,
  "viewportWidth": 1080
}

彼らの名前が示唆するように、あなたはあなたのテストを書きますbaseUrl はlocalhost:4200 角プロジェクト用.
ヒノキをプロジェクトに追加すると、examples いくつかのデモテストファイルが含まれているフォルダですが、プロジェクトのデフォルトテストを必要としませんので、テストスイートから除外します.
それで、それは我々のセットアップのすべてです.最初のテストのコードを書きましょう.
下のフォルダ構造でcypress フォルダ、あなたが表示されますintegration フォルダは、テストスイートに表示されるようにすべてのテストを書く場所です.
最初のテストファイルを作成します.DemoTest.spec.js そして、そのファイルに以下のコードを追加します.

describe("Our Todo App Test Suite", () => {
  it("Visiting our app", () => {
    cy.visit("/");
    cy.get(".nav-wrapper").contains("Items Manager");
  });
});

上記のコードではdescribe すべてのケースに責任がある機能.それはしばしばSuite or Test Suite . の下にdescribe 関数は、it テストコードを書く関数.上記の場合、我々は使用して角度アプリを訪問しているcy.visit("/") そして、我々はそれがnav-wrapper テキストを含むクラスItems Manager .
多くのAPIのサイプレスによって提供される要素を取得するからアサーションとより多くの.ヒアcy.get() はDOMからの要素のリファレンスを取得するために使われる.これは、サイプレスから最も使用されるAPIです.
現在オープンしている2番目のCMD端末とタイプ

npx cypress open       //to open cypress test runner

最初は少し時間がかかりますが、このようなものが見えます.

これをテストランナーといいます.ファイル名をクリックDemoTest.spec.js そして、テストのために開くブラウザの別のインスタンスがあります.今、あなたはどのように簡単に高速サイプレステストで動作するように表示されます.
別のテストを書きましょうtyping 入力フィールドに入力し、Submit ボタン.

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("input[name='title']").type("Lunch")
    cy.get("input[name='description']").type("Eating lunch at 1")
    cy.get('input[type="submit"]').click()
    cy.get("ul.collection").find("li > strong").should("contain", "Lunch")
  });
  });
});

このケースを実行すると、両方の入力フィールドに入力され、送信ボタンをクリックします.この場合、TODOリストに新しいToDo項目を追加しますasserting 私たちの追加ToDoテキストが含まれてLunchでは、ToDo項目を削除し、削除されることを確認する例を見てみましょう.

describe("Our Todo App Test Suite", () => {
  it.only("Type title and description", () => {
    cy.visit("/");
    cy.get("ul.collection > li").eq(1).find("a").click()
    cy.get("ul.collection > li").eq(1).find("form").find('button[class="btn red"]').click()
    cy.get("ul.collection > li").eq(1).should("not.exist")
  });
  });
});

それで、あなたはサイプレスによるE 2 Eテストをする方法です.今すぐ自分でcypressのいくつかの値を更新してください.あなたが正常にしてcongratsを行うことができる場合は、自分自身を呼び出すことができますAutomation Test Engineer それがオートメーションテストエンジニアが彼らの役割にするものであるので.
それで、私はあなたにこの記事のような人々を望みます、そして、新しい何かを学んでください、そして、これらのちょっとの記事のために私に続くのを忘れないでください.
ハッピーテスト✌️✌️