今回はcypressを使用した「未入力」「文字数」「形式相違」のクライアントサイドバリデーションテストを実施してみたいと思います。
シナリオを作成する
条件：
テスト対象のページへ遷移していること
手順：
対象の入力フォームに任意の入力を行う
対象の入力フォームから離れる
期待値：
エラーメッセージが表示されること
「未入力」「文字数」「形式相違」３点ともこのシナリオで実行していきます
テストコードを記載していく
では条件から書いていきます
「テスト対象のページへ遷移していること」
こちらはcy.visitを使用して遷移を実施します。
cy.visit(Cypress.config("baseUrl")); // 今回はbaseUrlという環境変数を使用次に手順です、こちらは「未入力」「文字数」「形式相違」で書き方が少し変わるので各々書いていきます。
未入力
未入力の場合は下記で書いていきます。
・対象の入力フォームにフォーカスする
・対象の入力フォームから離れる
cy.get('input[type="text"]').eq(0).focus(); // input[type="text"]の1番目をクリックし入力状態にする
cy.get('input[type="text"]').eq(0).blur(); // input[type="text"]の1番目の入力状態を解除する文字数
文字数超過の場合は下記で書いていきます。
・対象の入力フォームに文字数制限以上の入力を行う
・対象の入力フォームから離れる
cy.get('input[type="text"]').eq(0).type("テストテストテストテストテストテストテストテストテストテストテ");
// 今回は30文字以内の文字数瀬限なので31文字入力する
cy.get('input[type="text"]').eq(0).blur();
// 入力状態を解除する形式相違
形式相違については、今回メールアドレスを対象に「@」と「.」を含んでいることを条件としています。
・対象の入力フォームに「＠」を含まない入力を行う
・対象の入力フォームから離れる
cy.get('input[type="text"]').eq(2).type("test.test");
// input[type="text"]の3番目に「@」を含まない入力を行う
cy.get('input[type="text"]').eq(2).blur();
// input[type="text"]の3番目の入力状態を解除する最後に期待値「エラーメッセージが表示されること」を記載していきます。
cy.get(".error").eq(0).should("have.text", "エラー文言");
// class名が「error」の要素の１番目に「エラー文言」が含まれていること最後に「条件」「手順」「期待値」を繋げてみましょう
// 未入力
it("name blank", () => {
cy.visit(baseUrl);
cy.get('input[type="text"]').eq(1).focus();
cy.get('input[type="text"]').eq(1).blur();
cy.get(".error").eq(0).should("have.text", "名前は必須です。");
});
// 文字数超過
it("name exceeding text", () => {
cy.visit(baseUrl);
cy.get('input[type="text"]')
.eq(1)
.type("テストテストテストテストテストテストテストテストテストテストテ");
cy.get('input[type="text"]').eq(1).blur();
cy.get(".error").eq(0).should("have.text", "名前は30文字以下で入力してください。");
});
// 形式相違
it("mail format difference", () => {
cy.visit(baseUrl);
cy.get('input[type="text"]').eq(3).type("test.test");
cy.get('input[type="text"]').eq(3).blur();
cy.get(".error").eq(0).should("have.text", "メールアドレスは無効な形式です。");
});テストを実行する
それでは、cypressで実行してみようと思います。
期待通りの挙動を確認できました。