Cypress を利用したサンプル

// 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",				// ← この書き方だとうまく動きませんでした
	"半角記号":				"!\"#$%&'()=~|-^\@[;:],./`+*}<>?_",	// cypressの制御文字 { は使えませんでした
	"半角カタカナ":			"ｱｲｳｴ",
	"旧仮名":				"ゐゑヰヱ",
	"第３・拡張漢字":		"﨑德髙",
	"機種依存文字":			"①②",
	"４バイト文字":			"𡈽𡌛𠮟𡚴𡸴𣗄"

};