Cypress を利用したサンプル

参考: Cypress を利用した E2Eテスト

Cypress のテストプログラムのサンプルです。
テストプログラムは、このページにあるテキストボックスやテキストエリアにバリデーションチェック用のデータを入力し、送信ボタンをクリックします。
このページは入力値に誤りがある場合、エラー表示領域(直下黄色部分)にエラーメッセージを出力します。

F1(数値)
F2(英数字)
F3(英数記号)
F4(テキスト)



cypress が動作する環境をお持ちの方は、下記テストプログラムをお試しください。
テストプログラムは様々な種類のデータをフォームに入力し POST していきます。
エラーメッセージを確認し、メッセージが出力されていれば画面のキャプチャを撮ります。

// Validationクラスと入力データを読み込みます
import {Validation, setValues} from "./Validation.js";

describe("Validation Test Suite", function(){

	// サンプルページにあるフォームに様々な入力を行い、バリデーションが正しく動作するか検証します。
	it("Test 1", function(){
		cy.visit("https://softwarenote.info/sample_cypress/");

		const formId = "form_cypress_check";
		const callbackF = function(title){
			cy.get("#result_cypress").then(function($res){
				// エラー表示領域に文字がある場合は画面キャプチャを行う
				if($res.text()) cy.screenshot(title);
				cy.log($res.text());
			});
		}

		const vald = new Validation(setValues);
		vald.vcheck(formId, callbackF);
	});

});
// formから入力エリアを自動取得し、様々な入力データをtype、formをsubmitします。
// POST結果後、与えられたコールバックを呼び出します。
export class Validation{

	constructor(values){
		this.values_ = values;
	}

	// 読み込んだ入力データを順次types()に渡す
	// POST後、コールバックを呼ぶ
	vcheck(formId, cback){
		this.formId_ = formId;
		for(let key in this.values_){
			this.types(this.values_[key]);
			cy.get("#"+this.formId_).submit();
			cback(key);
		}
	}

	// form内にあるテキストボックスとテキストエリアに入力データを入力する
	types(val){
		cy.get("#"+this.formId_+" :input").each(function($el, index, $list){
			if((($el.prop("tagName") == "INPUT")&&($el.attr("type") == "text"))||($el.prop("tagName") == "TEXTAREA")){
				cy.wrap($el).clear();
				if(val) cy.wrap($el).type(val);
			}else{
				return true; // continue
			}
		});
	}
}

// 入力データ(障害の出やすいデータを選んでみました)
export const setValues = {

	"未入力":				"",
	"空白のみ":				"  	",					// 全角・半角・タブ
	"空白が入る":			"  テスト  テスト  ",		// 最初・途中・最後
	//"改行":				"aa{enter}bb",				// submitが発生しテスト不可
	"記号":					"!#$%()-^|@`[+*]},<.>_",	// cypressの制御文字 { は使えませんでした
	"半角カタカナ":			"アイウエ",
	"旧仮名":				"ゐゑヰヱ",
	"第3・拡張漢字":		"﨑德髙",
	"機種依存文字":			"①②"

};


入力データの「改行」についてですが、submitが実行されてしまうのでテストできませんでした。
回避策等もし知っていたら教えてください。