1
/
5

PuppeteerによるWebブラウザの操作

Robotic Crowdを支える技術」の3日目を担当させていただきますエンジニアの寺田です。

Tutorial Advent Calendar 2020 - Adventar
Tutorialとは? チュートリアル(Tutorial)株式会社は、クラウド型RPAツールであるRobotic Crowdを開発・運営する会社です。 詳細はこちら → https://tutorial.co.jp/ # 今回のテーマ 今回のテーマは **Robotic Crowdを支える技術** です。 Robotic Crowdを支える技術であれば、プロダクトに関する技術だけでなく、チーム開発やマーケティングや営業で導入している手法や技術でもOKとします。 # 備考 参加者はTutorialの社員に限
https://adventar.org/calendars/5366

弊社で開発しているクラウド型RPAツールである「RoboticCrowd」の機能の一つにブラウザを操作してWeb上の情報を取得できる機能があります。

今回はそのブラウザを操作する機能を提供してくれるライブラリ、Puppeteerを使ってWebページの情報を取得したいと思います。

Puppeteerとは?

puppeteer/puppeteer
Headless Chrome Node.js API. Contribute to puppeteer/puppeteer development by creating an account on GitHub.
https://github.com/puppeteer/puppeteer

Puppeteerは「パペティア」と読み、nodejs用のライブラリです。

ブラウザで手動でできるほとんどのことはPuppeteerを使って行うことができます。

以下Github上READMEに記載されているできること一覧です。

  • ページのスクリーンショットやPDFの生成
  • SPA(シングルページアプリケーション)をクロールし、プリレンダリングされたコンテンツ(「SSR」(サーバーサイドレンダリング)など)を生成
  • フォーム送信、UIテスト、キーボード入力などの自動化
  • 最新の自動化されたテスト環境を作成。最新のJavaScriptとブラウザ機能を使用して、最新バージョンの Chrome で直接テスト実行が可能
  • サイトのタイムライン トレースをキャプチャして、パフォーマンスの問題を診断
  • Chrome 拡張機能のテスト

Puppeteerを実践

それではGithub上のREADMEに従いながら動かしてみましょう。
インストールはnpmでもyarnでもどちらでもかまいません。
(nodejsはインストール済みのものとする)

npm i puppeteer
# or "yarn add puppeteer"

インストールしたディレクトリにexample.jsを作成し、以下のコードを書きます。

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://tutorial.co.jp/');
  await page.screenshot({path: 'tutorial.png'});

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

コンソールからコードを実行します。

$ node example.js

上記のコードはPuppeteerでブラウザを立ち上げて、弊社のホームページに遷移し、そこに表示されたものをスクリーンショットしています。撮った画像はこのコードと同じディレクトリに格納されています。

次に、弊社サイトから住所を取得してみます。ローカル環境を使用せずともPuppeteerを動かせるコチラのページも試してみましょう。

Try Puppeteer
RUN IT Note: There's no need to require('puppeteer') in the editor. It's done for you! Protip: you can use async/await directly in the editor. Note: The playground doesn't support require() calls. Protip: you drag and drop a .js file onto the code editor.
https://try-puppeteer.appspot.com/

まず弊社サイトの住所のセレクタを取得します。Chromeの開発者ツールを使用することで、対象のセレクタを取得することができます。

取得したセレクタのテキストを取得しコンソールに出力するコードを書きます。

const browser = await puppeteer.launch();

const page = await browser.newPage();
await page.goto('https://tutorial.co.jp/');

// 取得したセレクタを設定する
let address = await page.evaluate(() => {
return document.querySelector('body > section:nth-child(5) > div > div > div.col-md-10.m-auto > div > div:nth-child(2) > div > div > p').textContent;
})
console.log(address)

await browser.close();

Try Puppeteerにこれを書いて"RUN IT"ボタンを押します。

取れました✌️! 右に弊社サイトから取得した住所が表示されていることがわかります。

このように、Puppeteerを使うことで、これまでブラウザ上で行っていた作業をコードに落とし込んで自動化させることができます。

Webアプリを開発するときなど、Puppeteerを使用して画面遷移、ボタンクリック、表示するテキストの取得など、あらゆるパターンをコードに書いておけば自動テストなどにも使えそうですね。

Puppeteer便利ですね!!今回はブラウザ操作を行うPuppeteerを紹介させていただきました。



オートロ株式会社からお誘い
この話題に共感したら、メンバーと話してみませんか?
オートロ株式会社では一緒に働く仲間を募集しています
7 いいね!
7 いいね!

今週のランキング

寺田 純也さんにいいねを伝えよう
寺田 純也さんや会社があなたに興味を持つかも