Electron + puppeteer Tips

初めてPUPPETEERを使ってみたのでquick startとしての記録。

await pie.initialize(app); 
browser = await pie.connect(app, puppeteer);

この辺（特にpie.initialize(app)）はmain.jsの最初で呼び出しておく必要がありそう。

main.js

const pie = require("puppeteer-in-electron");
const puppeteer = require("puppeteer-core");

async function setupPuppeteer() {
    await pie.initialize(app);
    browser = await pie.connect(app, puppeteer);

    const window = new BrowserWindow({
        webPreferences: {
            nodeIntegration: false,
            contextIsolation: true,
            show: true  // バックグラウンドで動かすならfalse
        }
    });

    const url = 'https://hogehoge/';
    await window.loadURL(url);

    page = await pie.getPage(browser, window);

    // windowのサイズを決める
    await page.setViewport({
        width: 800,
        height: 800
    });

    // 読み込まないファイルを選ぶ。特にバックグラウンド実行する場合、cssや画像ファイルは重いだけなのでabortする。
    await page.setRequestInterception(true);
    page.on('request', (request) => {
        if (request.resourceType() === 'image') request.abort();
        else request.continue();
    });

    // input[type=text]に入力
    await page.type('#userID', 'userId');
    await page.type('#password', 'password');
    await page.type('.password input', '123456');

    // ラジオボタンやチェックボックス等をクリック
    await page.click('label[for="A"]');
    await page.click('input[class="piyo"]');

    // submitボタンを押下し、遷移先のターゲットとなるDOMが出現するのを待つ。
    await Promise.all([
        page.waitForSelector('a[href="hogehuga"]'),
        page.click('.loginSubmit > input')
    ]);

    // DOMの出現だけではなく、pageloadイベントを待つこともできる。
    await Promise.all([
        page.waitForNavigation({ waitUntil: 'load' }),
        page.click('a[href="http://matome-plus.net/2ch-10.html"]')
    ]);
    
    // 遷移先のページでスクリーンショットを撮る。
    await page.screenshot({ path: './screenshot.png', fullPage: false })

    // コードでゴリゴリ処理する場合
    const tableData = await page.evaluate(() => {
        let tds= document.getElementsByTagName('td');
        return tds;
    })

    // 以降は遷移や要素選択を繰り返す。終わったらwindowを破棄する。
    // window.destroy();
}