🌐

PlaywrightでSPAをスクレイピングする

2021/06/06に公開

JavaScript

TypeScript

Playwright

tech

ブラウザ自動操作ライブラリであるPlaywrightを使ってスクレイピングを実現してみる。

対象Webサイト

作成した以下のWebサイトを対象とする。

実際に動作させたものがこちら。

今回はlocalhostで立ち上げ、そこに対してリクエストを行うことにする。

ソースコード

以下軽く解説。

  const browser = await chromium.launch({ headless: false, slowMo: 500 });

chromium.launchでブラウザ起動。この際デフォルトだとヘッドレスになってしまうので、GUI付きChromiumを起動するように設定している。また実行の様子が観察しやすいようにslowMoで動作を遅くしている。

    const content = await page.evaluate(() => {
      const table = document.querySelector('.MuiTableBody-root') as HTMLTableElement;
      return Array.from(table.rows).map((row) => row.cells[0].textContent);
    });
    console.log(content);

通常のコードはNode.js上で実行されるが、 page.evaluate に渡された関数はブラウザ上で実行される。そのためDOM操作などが行える。ここではtable要素を取得して中身を文字列配列に加工している。結果をNode.js側に返し、出力している。 evaluate 内で console.log を実行してもブラウザ側に出力されるだけなので、こうする必要がある。

    await page.click('[aria-label="Next Page"]');

次ページに進む。

    if (await page.isDisabled('[aria-label="Next Page"]')) {
      break;
    }

whileで繰り返して、次のページに進むボタンがdisabledになった時点で終了している。

実行結果

ページごとに配列が取得できている。

$ npx ts-node main.ts
[ 'Katelynn', 'Rosalind', 'Karlee', 'Linda', 'Humberto' ]
[ 'Anahi', 'Gerald', 'Randy', 'Kenyon', 'Rocky' ]
[ 'Ashlee', 'Freeman', 'Orland', 'Sarah', 'Pinkie' ]
[ 'Josue', 'Billy', 'Kristina', 'Tyrel', 'Benjamin' ]

対象Webサイト

ソースコード

実行結果

Discussion