お久しぶりです。

JGです。

前回はSeleniumを紹介しましたが、今回はPuppeteerを試してみたので、 Puppeteerについて簡単に説明したいと思います。

概要

Puppeteerは一言で表現すると、ブラウザでのテストを自動化できるツールです。

Seleniumは様々なプログラミングに対応していますが、PuppeteerはJavaScriptのみ対応しています。

環境構築

Windowsの手順しか書いておりませんが、Macも似たような手順だと思います。

下記の手順で簡単に環境ができると思います。

1.Node.jsをインストール
2.コマンドプロンプトで下記を実行
npm install puppeteer

指定したURLを起動する方法

ここからは Puppeteerでできることを紹介していきます。

Puppeteerのバージョンは15.3.2で書いています。

コピペ通りで動くはずです。

ignoreHTTPSErrorsは自己証明書が求められるページで必要になります。

Puppeteerはデフォルトでヘッドレスで実行されるので、 GUIを表示したい場合はheadlessをfalseにする必要があります。

const puppeteer = require('puppeteer');

(async () => {
    // ignoreHTTPSErrorsを指定しないと自己証明書を求められるページではエラーになる
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true});
    const page = await browser.newPage();

    try {
        // 指定したURLを起動する    
        await page.goto('https://www.yahoo.co.jp/');
    } catch (err) {
        console.log(err.message);
    } finally {
        // ブラウザを閉じる    
        await browser.close();
    }
})();

コンソールを表示する方法

ブラウザのコンソールの内容を表示する方法です。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true});
    const page = await browser.newPage();

    try {
        // コンソールエラーを表示
        page.on('console', msg => {
             const type = msg.type();
             const text = msg.text();
             if (type === 'error' || type === 'warning') {
                 console.log(text);
             }
        });

        // 指定したURLを起動する
        await page.goto('https://www.yahoo.co.jp/');
    } catch (err) {
        console.log(err.message);
    } finally {
        // ブラウザを閉じる
        await browser.close();
    }
})();

ログインする方法

IDとパスワードを入力して、ログインする方法です。

page.typeで入力し、page.clickでボタンをクリックします。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true});
    const page = await browser.newPage();

    try {
        // コンソールエラーを表示
        page.on('console', msg => {
             const type = msg.type();
             const text = msg.text();
             if (type === 'error' || type === 'warning') {
                 console.log(text);
             }
        });

        // 指定したURLを起動する
        await page.goto('https://login.yahoo.co.jp/config/login?.src=www&.done=https://www.yahoo.co.jp/');

        // IDを入力
        await page.type('#username', 'id');
        
        // 次へボタンをクリック
        await Promise.all([
            page.waitForNavigation({waitUntil: 'load'}),
            page.click('#btnNext'),
        ]);
        
        // パスワードを入力
        await page.type('#passwd', 'password');
        
        // ログインボタンをクリック
        await Promise.all([
            page.waitForNavigation({waitUntil: 'load'}),
            page.click('#btnSubmit'),
        ]);
    } catch (err) {
        console.log(err.message);
    } finally {
        // ブラウザを閉じる
        await browser.close();
    }
})();

スマホでアクセスする方法

スマホでアクセスする方法ですが、puppeteer.devicesに端末名を指定するようです。

const puppeteer = require('puppeteer');
// スマホでアクセスする設定
const device = puppeteer.devices['iPhone 13'];

(async () => {
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true});
    const page = await browser.newPage();
    await page.emulate(device);

    try {
        // コンソールエラーを表示
        page.on('console', msg => {
             const type = msg.type();
             const text = msg.text();
             if (type === 'error' || type === 'warning') {
                 console.log(text);
             }
        });

        // 指定したURLを起動する
        await page.goto('https://www.yahoo.co.jp/');        
    } catch (err) {
        console.log(err.message);
    } finally {
        // ブラウザを閉じる
        await browser.close();
    }
})();

スクショをとる方法

スクショをとる方法です。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({headless: false, ignoreHTTPSErrors: true});
    const page = await browser.newPage();

    try {
        // コンソールエラーを表示
        page.on('console', msg => {
             const type = msg.type();
             const text = msg.text();
             if (type === 'error' || type === 'warning') {
                 console.log(text);
             }
        });

        // 指定したURLを起動する
        await page.goto('https://www.yahoo.co.jp/');

        const now = new Date();
        const year = now.getFullYear();
        const month = now.getMonth() + 1;
        const date = now.getDate();
        const hour = now.getHours();
        const min = now.getMinutes();
        const sec = now.getSeconds();
        const now_datetime = year + '_' + month + '_' + date + '_' + hour + '_' + min + '_' + sec;

        // スクショをとる
        // このファイルと同じ階層にimagesフォルダを作成済みでないとエラーになるので注意
        await page.screenshot({path: './images/image_'+now_datetime+'.png', fullPage: true});
    } catch (err) {
        console.log(err.message);
    } finally {
        // ブラウザを閉じる
        await browser.close();
    }
})();

スクレイピングの方法

最後はスクレイピングの方法です。

const puppeteer = require('puppeteer');

(async () => {
    // GUIを表示しないヘッドレスモードにする場合はheadless: falseを指定しない
    const browser = await puppeteer.launch({ignoreHTTPSErrors: true});
    const page = await browser.newPage();

    // スクレイピングするURLの一覧
    const urls = [
        'https://www.yahoo.co.jp/',
        'https://www.google.com/'
    ];

    for (const url of urls) {
        try {
            // コンソールエラーを表示
            page.on('console', msg => {
                 const type = msg.type();
                 const text = msg.text();
                 if (type === 'error' || type === 'warning') {
                     console.log(url, text);
                 }
            });

            const response = await page.goto(url);
            // レスポンスコードを取得
            if (response.status() != 200) {
                console.log(url, 'status', response.status());
            }

            // スクショをとる
            await page.screenshot({path: './images/image_'+get_now_datetime()+'.png', fullPage: true});

        } catch (err) {
            console.log(err.message);
        }
    }
    // ブラウザを閉じる
    await browser.close();
})();

function get_now_datetime() {
    const now = new Date();
    const year = now.getFullYear();
    const month = now.getMonth() + 1;
    const date = now.getDate();
    const hour = now.getHours();
    const min = now.getMinutes();
    const sec = now.getSeconds();
    return year + '_' + month + '_' + date + '_' + hour + '_' + min + '_' + sec;
}

最後に

ざっと簡単にPuppeteerについて紹介しました。

Puppeteerについて興味を持ったかたは、是非試してみてください。