メインコンテンツまでスキップ

Puppeteerのチートシート

· 約3分

定期的にウェブ上から特定のデータを収集するのに便利なPuppeteer。

頻繁に書くものでもないので忘れがちです。

ここによく使う処理をまとめてみました。

Puppeteerをインストールする​

npm i -S puppeteer

Puppeteerの型定義ファイルをインストールする​

npm i -D @types/puppeteer

ヘッドレスブラウザを起動する​

const browser = await puppeteer.launch();

ヘッドレスじゃないブラウザ(見えるブラウザ)を起動する​

const browser: Browser = await puppeteer.launch({
    headless: false,
  });

ブラウザを閉じる​

await browser.close();

ページ(タブ/ウィンドウ)を作成する​

const page: Page = await browser.newPage();

指定したURLに移動する​

await page.goto(`https://example.com`);

ページを閉じる​

await page.close();

CSSセレクタで要素を探す​

const elementHandle: ElementHandle = await page.$(`(CSSセレクタ)`);

CSSセレクタで複数の要素を探す​

const elementHandles: Array<ElementHande> = await page.$$(`(CSSセレクタ)`);

XPathで要素を探す​

const elementHandles: Array<ElementHandle> = await page.$x(`(XPath)`);

要素をクリックする​

await elementHande.click();

要素を探してクリックする​

await page.click(`(CSSセレクタ)`);

要素に文字を入力する​

await elementHandle.type(`(文字列)`);

要素の属性を取得する​

const attr: string = await elementHandle.evaluate(e => e.getAttribute(`(属性名)`));

要素のテキストを取得する​

const attr: string = await elementHandle.evaluate(e => e.textContent);

CSSセレクタで指定した要素が表示されるまで待機する​

await page.waitForSelector(`(CSSセレクタ)`, { timeout: 60000 });

XPathで指定した要素が表示されるまで待機する​

await page.waitForXPath(`(XPath)`, { timeout: 60000 });

ポップアップウィンドウが表示されるのを待つ​

const target: Target = await browser.waitForTarget(
  t => t.url() === `https://example.com`,
  { timeout: 6000 },
);
const page: Page = await target.page();