Mocha と Chai を Puppeteer を使ったテスト

mocha-chai-puppeteer.js

// Puppeteerのインストール
// npm i puppeteer
// Mochaのインストール
// npm install mocha
// chaiのインストール
// npm install chai



const puppeteer = require('puppeteer');
const chai = require('chai');
const assert = chai.assert;

describe(
    'テスト1',
    function () {
        // mochaのタイムアウトを無しに設定する（defalut:2000ms.
        this.timeout(0);

        // テスト実行前処理.
        beforeEach(
            async function () {
                global.browser = await puppeteer.launch(
                    {
                        headless: false, // ブラウザーで確認したい場合は false.
                        args: [
                            "--disable-web-security",
                            "--user-data-dir",
                            // "--enable-usermedia-screen-capturing",
                            // "--allow-http-screen-capture",
                        ],
                        slowMo: 30, // 処理のスピードを調整
                        // ブラウザーの画面表示サイズ.
                        defaultViewport: {
                            width: 1800,
                            height: 978
                        },
                        devtools: true,
                    }
                );
            }
        );

        it(
            '正常',
            async function () {
                // ブラウザー立ち上げ
                const page = await global.browser.newPage();

                // フォームのURLへ移動(ht79.info/form).
                await page.goto('https://hogehoge.com', { waitUntil: 'networkidle0' });

                // input text に文字入力
                await page.type('[name="your-group-name"]', '細谷グループ');
                await page.type('[name="your-name"]', '細谷崇');
                await page.type('[name="your-email"]', '[email protected]');
                await page.type('[name="your-message"]', 'ああああ');
                await page.click('[name="acceptance-879"][value="1"]');
                await page.click('.wpcf7-submit');
                await page.waitForSelector('.wpcf7-mail-sent-ok');

                let okMessage = await page.$eval(
                    '.wpcf7-mail-sent-ok', function (item) {
                        return item.innerHTML;
                    }
                );
                assert.equal(okMessage, 'ありがとうございます。メッセージは送信されました。');

            }
        );
        it(
            'グループ必須エラー',
            async function () {
                // ブラウザー立ち上げ
                const page = await global.browser.newPage();

                // フォームのURLへ移動(ht79.info/form).
                await page.goto('https://hogehoge.com', { waitUntil: 'networkidle0' });

                // input text に文字入力
                await page.type('[name="your-group-name"]', '');
                await page.type('[name="your-name"]', '細谷崇');
                await page.type('[name="your-email"]', '[email protected]');
                await page.type('[name="your-message"]', 'ああああ');
                await page.click('[name="acceptance-879"][value="1"]');
                await page.click('.wpcf7-submit');
                await page.waitForSelector('.wpcf7-validation-errors');

                let errorMessage = await page.$eval(
                    '.wpcf7-validation-errors', function (item){
                        return item.innerHTML;
                    }
                );

                assert.equal(errorMessage, '入力内容に問題があります。確認して再度お試しください。');

            }
        );

        // テスト実行後処理.
        afterEach(
            async function () {
                // ブラウザーと閉じる.
                await global.browser.close();
            }
        );
    }
);