サイプレスを使っているBonita UIデザイナーページをテストする方法

一度Bonita UIデザイナーページを作りました、それをテストすることは非常に重要です.
Bonita UIデザイナーで作られたページをテストするために、我々のチームはE 2 Eフレームワークに向けて移動することを決めました.
我々は使用することを決めたCypress , オープンソースのJavascriptフレームワークでは、半構造化されたテストのときに指定できます.

必要条件

完全にこの記事の力を把握するには、いくつかの技術を理解する必要があります.
まず、この記事はBonita UI Designer ユーザーを登録できるシンプルなページを作成するには.
そこで,本論文では,道具の全容に潜入せずに,サイプレスの二つの試験使用事例を与えた.あなたが他の可能性を発見することに興味があるならば、私は彼らのチェックアウトを提案しますdocumentation .
あなたはこの記事で議論されたすべてを見つけることができますgithub リポジトリ.
私が話をする2つのテストはリポジトリで見つける唯一のものではないので、より多くの例を見たいならば、リポジトリをクローン化してチェックアウトすることができます.

ページ構造に飛び込む

ページから始めましょう.これは、新しいユーザーを作成するために異なる情報を要求する複数のフィールドを持つフォームコンテナがあります.エラーと成功の場合だけでなく、ローディングメッセージの場合に表示されるいくつかのメッセージを見ることができます.また、ユーザーがページ上の任意のアクションを取る場合、成功またはエラーメッセージを3秒後に消える隠し機能があります.私たちは通常、トーストを模倣するために、この機能を使用して、ユーザーの画面を詰まらないようにします.

テストの選択

さらにADOなしで、テストについて話しましょう.
サイプレステストは、2つの異なる部分から作られます.つ目は、1つのファイルにテストシナリオを記述することです.2番目はコードの説明についてです.
サイプレスキュウリプリプロセッサライブラリは、与えられたときにスタイルをシナリオを書くために使用されます.
私が話している2つのテストは以下の通りです.

パスワードが一致しないため、ユーザーの作成に失敗しました

ユーザーが作成されている間に表示されるローダ

私たちが最初に選んだのは、私たちが行ったテストであり、私たちのページで複数回やり直したテストです.ほとんどの場合、正しいAPI呼び出しが行われていることを確認し、正しいパラメータと正しい応答を確認します.この場合、パスワードの等価性のテストがクライアント側であるため、必要はありません.したがって、何も必要でないので、API呼び出しがなされないならば、チェックされる追加のものはあります.
二つ目は、私にとってとても興味深いようなユースケースを描いているからです.また、3秒後にメッセージが消えたかどうかをチェックするテストなど、さまざまな状況でシナリオのビルディングブロックが役に立つかもしれません.

パスワードが同じでないので、ユーザーの作成の失敗をテストします

最初のテストシナリオについて話しましょう.

Given The server is started
And API call response for "user creation should not be called" is mocked
When I visit the index page
And All inputs are filled
And I modify the password field
And I try to create the user
Then I see the message about "Passwords don't match."

このテストのアイデアは、ユーザーAPIに対して行われるAPI呼び出しがないことを確認し、また、パスワードが一致しないというメッセージがあることを確認します.
API呼び出しがないことを確認するには、実際にレスポンスを作成せずにユーザーAPIへのルートを作成できますが、エラーをスローするだけでできます.

cy.route({
   method: "POST",
   url: userAPI,
   onRequest: () => {
       throw new Error("This should have not been called");
   }
});

すべての計画に従って動作することを確認するには、ページをご覧ください.

cy.visit(url);

その後、我々はすべての入力情報を入力します.

cy.get("input").eq(0).type("walter.bates");
cy.get("input").eq(1).type("bpm");
cy.get("input").eq(2).type("bpm");
cy.get("input").eq(3).type("Walter");
cy.get("input").eq(4).type("Bates");

パスワードを変更して確認し、パスワードの値を確認します.

cy.get("input").eq(1).type("incorrect");

そして、そのページの最後のアクションは、ユーザを作成することです.

cy.contains("button", "Create").click();

この特定の状況を設定した後、我々は“パスワードが一致しないことをテストしたい.”ページにメッセージがあります.

cy.contains("p", message).should("be.visible");

テストランナーを起動した後、テストが実行され、成功することがわかります.

ユーザが作成されている間に表示されるローダのテスト

このテストのシナリオは、ローダの表示に基づいており、5秒後に消えてしまうことを確認します.

Given The server is started
And API call response for "user created after delay" is mocked
When I visit the index page
And All inputs are filled
And I try to create the user
Then The loader is shown
When I wait for 5000 delay
Then I see the message about "User successfully created."
And The loader is not shown

ご覧の通り、このテストの一部は最初のテストと同じです.異なるものは、APIモンクの定義で、ローダが表示されていることを確認し、5秒待って、ページの終了状態をチェックします.
5秒後にAPI応答をモッキングすることで、ユーザAPIからレスポンスが届いていないので、読み込みが行われます.
応答は、我々が現実に非常に近いことができるポータルから取得するものと同じです.

cy.fixture("json/userCreatedResponse.json").as("userCreated");
cy.route({
   method: "POST",
   url: userAPI,
   delay: 5000,
   response: "@userCreated"
}).as("userCreatedRoute");

ユーザーが作成されている間、ローダが表示されることを確認します.

cy.get(".glyphicon.glyphicon-cog.gly-spin").should("be.visible");
cy.contains("p", "Creating user.").should("be.visible");

その後5秒待ちます.

cy.wait(time);

そして、5秒後、応答が到着すると、メッセージが消えることを確認します.

cy.get(".glyphicon.glyphicon-cog.gly-spin").should("not.be.visible");
cy.contains("p", "Creating user.").should("not.be.visible");

あなたが見ることができるように、これらのテストを書くには長い時間がかかりますし、非常に強力なことができます.
すごい!今、あなたはサイプレスとUIデザイナのページをテストする方法を知っている!また、チェックすることができますweb-pages project 我々が現在開発しているページを含むこと.