hatakoya memo

puppeteer

インストール

yarn add puppeteer@1.18.1

Ubuntu18.04で動かす場合は以下の依存関係が必要

apt-get install -y gconf-service libasound2 libatk1.0-0 libatk-bridge2.0-0 libc6 libcairo2 libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgcc1 libgconf-2-4 libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0 libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1 libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1 libxss1 libxtst6 ca-certificates fonts-liberation libappindicator1 libnss3 lsb-release xdg-utils wget

Ubuntu18.04の場合は日本語フォントを入れる

apt-get install fonts-ipafont-gothic fonts-ipafont-mincho

さらにlaunchの引数に以下を追加する。

const browser = await puppeteer.launch({args: ['--no-sandbox']});

example.jsを作る。

const puppeteer = require('puppeteer');

(async () => {
    const browser = await puppeteer.launch({
        ignoreDefaultArgs: ['--disable-extensions'],
        args: ['--no-sandbox']
    });
    const page = await browser.newPage();
    await page.goto('https://example.com');
    await page.screenshot({ path: 'example.png' });

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

実行する。カレントにexample.pngが生成されれば成功。

node example.js

クリックで遷移

await Promise.all([
    page.click('input[alt="ログイン"]'),
    page.waitForNavigation()
])

Ref: https://github.com/GoogleChrome/puppeteer/issues/1637#issuecomment-353720281

snipet

ページのタイトルを取得

const title = await page.mainFrame().title()

ダイアログが出てきたときにOKを選択する

ダイアログを表示する操作の直前にこれを書く。

await page.once('dialog', async dialog => {
    console.log(dialog.message());
    await dialog.accept();
})

Chrome dev tools でイベント発火

コンソールに貼り付けて実行する

function triggerEventOnPage(selector, eventName, memo) {
    //casper.evaluate(function(selector, eventName, memo){
        var event;
        var element = document.querySelector(selector);

        event = document.createEvent("Event");
        event.initEvent(eventName, true, true);
        event.memo = memo || { };

        element.dispatchEvent(event);
    //}, selector, eventName, memo);
    //wait();
}

Ref:
https://stackoverflow.com/questions/18823530/how-to-trigger-a-tap-event-on-chrome-devtool-console

コンソールで上で定義した関数を実行する。

triggerEventOnPage(".edit-list-button", 'tap');

alpineでデプロイ

puppeteerのバージョンは

alpineでDockerfileを作る

日本語フォントを入れる。

RUN apk add --update \
            udev \
            ttf-freefont \
            chromium

RUN mkdir /noto
ADD https://noto-website.storage.googleapis.com/pkgs/NotoSansCJKjp-hinted.zip /noto 
WORKDIR /noto
RUN unzip NotoSansCJKjp-hinted.zip && \
    mkdir -p /usr/share/fonts/noto && \
    cp *.otf /usr/share/fonts/noto && \
    chmod 644 -R /usr/share/fonts/noto/ && \
    fc-cache -fv
WORKDIR /
RUN rm -rf /noto

Ref:
https://qiita.com/dd511805/items/dfe03c5486bf1421875a

App Engineでデプロイ

gcloud app deploy

起動時にyarn install --productionが実行されるので、実行に必要な依存関係はdependenciesに書いておくことを忘れない。 Ref:
https://cloud.google.com/appengine/docs/flexible/nodejs/quickstart?hl=ja

← RxJS →