こんにちは。

エンジニア見習の松本です。

今回は以前の記事にあったpuppeteerとdom操作について書いていきます。

puppeteerとは…

puppeteerとは、プログラムでchromeを開き、特定のWebページの読み込み、スクリーンショット、指定された場所をクリックし値を入力し結果を取得する、といった操作を自動的に行わせることができるようになるものです。

例えば、Googleの検索エンジンにアクセスし、検索ワードを入力して、検索結果のページから情報を抽出すること等ができます。

今回は、

１．Googleにアクセス

２．検索フォームに文字列の入力

３．検索ボタンを押し、画面を遷移させる

上記の工程を実際にやっていきます。

実践

まずpuppeteerの起動から終了までのコードを打ちます。

const puppeteer = require('puppeteer');

(async () => {
  // Chromeのヘッドレスモード　※true:表示なし、false:表示有

  const headlessMode = true;// debugする際にfalseにする

  const browser = await puppeteer.launch({headless: headlessMode});//Headlessで起動

  const page = await browser.newPage();　// このpageに


  /////////////////////
  //※実際の処理の部分//
  ////////////////////


  await browser.close(); // ブラウザを閉じる

次に処理の部分に入っていきます。

   ////////////////////
  //※実際の処理の部分//
  ////////////////////

  await access(page); //Googleのホーム画面を表示・・・⑴

  await input(page);  //検索フォームへの入力・・・⑵

  await result(page); //検索結果の画面表示・・・⑶

それぞれの処理の内容に入っていきます。

Googleのホーム画面を表示・・・⑴

async function access(page) {
  const TARGET_URL = "https://www.google.co.jp/";//Googleの検索画面URL

  //指定URLへ移動
  await page.goto(TARGET_URL, {waitUbtil: 'networkidle'});
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull.png', fullPage: true});
}

検索フォームへの入力・・・⑵

async function input(page){
  //検索ワード
  const input_word = "株式会社キーリンク";
  //検索ワードをセット
  await page.type("input.gsfi", input_word);
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull2.png', fullPage: true});
}

検索結果の画面表示・・・⑶

async function result(page){
  //Googleの検索ボタンをCLick
  await page.click('input[value="Google 検索"]');
  //画面移動が終わるまで待つ
  await page.waitForNavigation({timeout: 60000, waitUntil: "domcontentloaded"});
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull3.png', fullPage: true});

※フルスクリーンで撮りましたが、長かった為トリミングしました。

全体のコードはこんな感じです。

const puppeteer = require('puppeteer');

(async () => {
  // Chromeのヘッドレスモード　※true:表示なし、false:表示有
  const headlessMode = true;

  // debugする際にfalseにする
  const browser = await puppeteer.launch({headless: headlessMode});　//Headlessで起動
  const page = await browser.newPage();　//このpageに

//Googleの検索画面
  await access(page); //Googleの検索画面を表示

  await input(page);  //検索バーへの入力

  await result(page); //検索結果の画面表示

  await browser.close(); // ブラウザを閉じる
})();

//Googleの検索画面を表示
async function access(page) {
  const TARGET_URL = "https://www.google.co.jp/";//Googleの検索画面URL

  //指定URLへ移動
  await page.goto(TARGET_URL, {waitUbtil: 'networkidle'});
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull.png', fullPage: true});
}

//検索バーへの入力
async function input(page){
  //検索ワード
  const input_word = "株式会社キーリンク";
  //検索ワードをセット
  await page.type("input.gsfi", input_word);
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull2.png', fullPage: true});
}

//検索結果の画面表示
async function result(page){
  //Googleの検索ボタンをCLick
  await page.click('input[value="Google 検索"]');
  //画面移動が終わるまで待つ
  await page.waitForNavigation({timeout: 60000, waitUntil: "domcontentloaded"});
  //画面のスクリーンショット
  await page.screenshot({path: 'ScreenshotsFull3.png', fullPage: true});
}

最後に

今回はpuppeteerについて学びました。まだまだ完璧に使いこなせるわけではないのでこれから少しづつ覚えていきたいと思います。