Cypress を利用した E2E テスト

>cd C:\NodeJS\local # インストール先ディレクトリ
>npm init # パッケージ情報を初期化する場合
>npm install cypress

>cd c:\NodeJS\local
>npx cypress open

describe("テストセットタイトル", function(){
	it("テストタイトル", function(){
		// ここにテスト内容を記述します。
	});

	before(function(){
		// describe() の最初に実行されます。
		// 前処理系を記述します。
	});

	after(function(){
		// describe() の最後に実行されます。
		// 後処理系を記述します。
	});

	beforeEach(function(){
		// 各 it() の前に実行されます。
		// it() 実行のたびに行いたい前処理系を記述します。
	});

	afterEach(function(){
		// 各 it() の後に実行されます。
		// it() 実行のたびに行いたい後処理系を記述します。
	});
});

describe("Test Suite", function(){
	it("Test 01", function(){
		// ページ移動
		cy.visit("https://dev.softwarenote.info/test/test_exp01.php");

		// 要素の取得にはjQueryセレクタが使えます
		cy.get("#id");
		cy.get(".class");

		// フォームの操作
		cy.get('input[type="text"][name="post_textbox"]').type("cypress.io"); // テキストボックス
		cy.get('textarea[name="post_textarea"]').type("cypress.io"); // テキストエリア
		cy.get('input[name="post_checkbox"]').check(); // チェックボックス
		cy.get('input[name="post_radio"]').check("val2"); // ラジオボタン value="val2"を選択する
		cy.get('select[name="post_select"]').select("val2"); // プルダウン value="val2"を選択する

		// メソッドチェーンによる実装
		cy.get('textarea[name="post_textarea"]')
			.type("cypress.io") // 「cypress.io」と入力し
			.type("{enter}") // エンター
			.type("cypress.io"); // 「cypress.io」と入力

		// ラジオボタン、チェックボックス
		cy.get('input[type="radio"]').first().check(); // ラジオボタン 最初の項目をチェックする
		cy.get('input[type="checkbox"]') // チェックボックス
			.each(function($el, index, $list){
				if($el.prop("checked")){
					$el.prop("checked", false); // チェックをはずす
				}else{
					$el.prop("checked", true); // チェックする
				}
			});

		// ボタンのクリックなど
		cy.get('[type="button"]').click(); // ボタンをクリックする
		cy.contains("送信").click(); // 文字列から要素を取得しクリック
		cy.get('form[name="form_test"]').submit(); // POSTする

		// アサーション（Chai BDD TDD Assertions）
		cy.get('[name="post_textbox"]').should("have.value", "cypress.io"); // TDD アサーション
		cy.get('[name="post_textbox"]').then(($el) => {
			expect($el).to.have.value("cypress.io"); // BDD アサーション
		});

		cy.get("#result_text").should("have.text", "結果");
		cy.get("#result_text").then(($el) => {
			expect($el).to.have.text("結果");
		});

		// その他の操作
		cy.screenshot(); // スクリーンショット
		cy.reload(); // ページのリロード
		cy.log("test log"); // ログ出力

		cy.setCookie("ses_id", "dabde"); // クッキーの設定
		cy.getCookie("ses_id"); // クッキーの取得
		cy.clearCookie("ses_id"); // クッキーの削除
	});
});

Cypress.Commands.add("login", function(uid, passwd){
	cy.visit("/login");
	cy.get('input[name="uid"]').type(uid);
	cy.get('input[name="password"]').type(passwd);
	cy.get('input[type="submit"]').click();
});

describe("Test1", function(){
	it("Commands Test", function(){
		cy.login("userId", "passWord");
	});
});

export default class Login{
	login(uid, passwd){
		cy.visit("/login")
		cy.get('input[name="uid"]').type(uid);
		cy.get('input[name="password"]').type(passwd);
		cy.get('input[type="submit"]').click();
	}

	logout(){
		cy.visit("/logout")
	}
}

import Login from "../classes/Login"

describe("Test2", function(){
	it("Import Test", function(){
		const lg = new Login();
		lg.login("userId", "passWord");
	});
});

class Login{
	login(){
		cy.visit("/login")
		cy.get('input[name="uid"]').type("userId");
		cy.get('input[name="password"]').type("passWord");
		cy.get('input[type="submit"]').click();
	}
}

describe("Test3", function(){
	it("Class Test", function(){
		const lg = new Login();
		lg.login();
	});
});

{
	"userid": "userId",
	"password": "passWord";
}

class Login{
	login(){
		cy.fixture("profile").then(function(Profiles){
			let uid = Profiles.userid;
			let passwd = Profiles.password;
		}
}

describe("Test4", function(){
	it("readFile Test", function(){
		cy.readFile("profile.json").its("loginid").should("eq", "loginId");
	});
});

>cd c:\NodeJS\local
>npx cypress open # GUIを起動する場合
>npx cypress run # すべてのテストが自動実行されます
>npx cypress run --spec (-s) cypress/integration/test1.js # テストを選択して実行
>npx cypress run -s path/to/*/test*.js # テストの選択にはワイルドカードが使用可能

{
	"baseUrl": "softwarenote.info", // cy.visit() または cy.request() の URL プレフィックス
	"numTestsKeptInMemory": 50, // メモリに保持されるテスト数。使用メモリ量が高い場合はこの数を減らす

	"pageLoadTimeout": 60000, // cy.visit() や cy.go()、cy.reload() のタイムアウト値 [ms]
	"responseTimeout": 30000, // cy.request() などが応答するまでのタイムアウト値 [ms]

	"integrationFolder": "cypress/integration", // テストプログラムの参照場所
	"screenshotsFolder": "cypress/screenshots", // cy.screenshot() やテスト失敗時のキャプチャ画像の保存場所
	"testFiles": "*/*.*", // 実行するテストファイルのフィルタ

	"videoFolder": "cypress/videos", // ビデオの保存場所
	"screenshotOnRunFailure": true, // テスト失敗時にキャプチャ画像を撮るかどうか
	"video": true, // ビデオを録画するかどうか
	"trashAssetsBeforeRuns": true, // cypress run 実行時に保存されている画像やビデオファイルを消去

	"userAgent": null, // ユーザエージェントの変更

	"viewportWidth": 1000, // ブラウザのビューポートの幅
	"viewportHeight": 660 // ブラウザのビューポートの高さ
}

{
	"env": {
		"user_env1": 1,
		"user_env2": 2
	}
}

	Cypress.env("user_env1"); // =1
	Cypress.env("user_env2"); // =2