Puppeteer を利用した E2E テスト

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

>set NODE_PATH=C:\NodeJS\local\node_modules

>cd C:\tests # テストコードの存在するディレクトリ
>node example.js # example.js を実行

const puppeteer = require('puppeteer');

(async () => {
	const browser = await puppeteer.launch();
	const page = await browser.newPage();
	await page.goto('https://example.com');
	await page.screenshot({path: 'example.png'});

	await browser.close();
})();

const puppeteer = require("puppeteer");

(async function(){
	// ブラウザの起動にはいくつかのオプションがある
	const browser = await puppeteer.launch({
		headless: false,			// ブラウザが立ち上がらない（defalut: true）
		slowMo: 5,					// Puppeteerの動作を遅延させる [ms]
		devtools: true,				// Chrome DevToolsを開く（default: false）
		args: [
			'--window-size=1600,950',	// ウィンドウサイズ
			'--window-position=100,50'	// ウィンドウポジション
		]
	});

	// ページ移動
	const page = await browser.newPage();
	await page.setViewport({width:1200, height:800}); // ビューポート指定
	await page.goto("https://dev.softwarenote.info/test/test_exp01.php");

	// 要素の取得にはCSSセレクタが使えます
	const div = await page.$("#id"); // Object
	const divs = await page.$$(".class"); // Array

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

	await page.click('[type="button"]'); // ボタンをクリックする
	await page.type('input[name="post_textbox"]', "cypress.io") // 「cypress.io」と入力し
	await page.keyboard.press("Enter"); // エンター

	// その他の操作
	await page.screenshot({path:"capture.png"}); // スクリーンショット
	console.log("test log"); // ログ出力
	await browser.close(); // ブラウザのクローズ

})();