puppeteerを用いてラクスのエンジニアブログに自動でアクセスしてみた

はじめに

こんにちは。エンジニア1年目のy_kwmtです。先日、業務でpuppeteerを用いてE2Eテストのテストコードを実装しました。E2Eテストとは、End to Endテストの略で、開始から終了までアプリが期待通り動くか確認するテストです。今回はpuppeteerの学習をするためにpuppeteerを用いて自動でラクスのエンジニアブログサイトにアクセスしたことについて書きたいと思います。

puppeteerとは

puppeteerは、Node.jsでHeadless Chromeを自動で操作できるようにするライブラリです。puppeteerを用いることでクリック、テキスト入力、画面遷移などが自動で行えます。公式サイトはこちらです。

github.com

導入方法

今回はこちらの記事を参考にインストールを行いました。

tech-blog.rakus.co.jp

まずはNode.jsとnpmをインストールしてください。 Node.jsはこちらからダウンロードを行い、インストーラを実行し、画面の指示に従ってインストールしてください。npmのインストールは以下を実行してください。puppeteer は操作結果を Promise で返すので、async/await が使えるv7.6.0 以降のバージョンを用意したほうがよいです。

npm init

Node.jsとnpmのインストールが完了したら、puppeteerのインストールを実行します。

npm i puppeteer

コーディング、実行

puppeteerのインストールが完了したら、コードを書いていきます。コードはこちらのページを参考にさせていただきました。

webbibouroku.com

以下のファイルを実行してラクスのエンジニアブログにアクセスします。今回は実行できているか確認するためにブラウザを表示するだけでなく、スクリーンショットも撮影しました。そのコードがこちらです。

ファイル名：sample.js

const puppeteer = require('puppeteer');

(async () => {
  //ブラウザを定義(headless:false ブラウザを表示する, true 表示しない)
  const browser = await puppeteer.launch({ headless: false });
  //タブを定義
  const page = await browser.newPage();
  //ブラウザのサイズを定義
  await page.setViewport({width: 1240, height:1080});

  //待機
  async function sleep(delay) {
    return new Promise(resolve => setTimeout(resolve, delay));
  }

  // Googleにアクセス
  await page.goto('https://www.google.co.jp/');
  // 検索窓に「ラクス　エンジニアブログ」と入力
  await page.type('.gLFyf', 'ラクス　エンジニアブログ');
  //スクリーンショット撮影
  await page.screenshot({path: 'google.png'});
  // 検索ボタンクリック
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  await page.focus('input[name="btnK"]');
  await page.click('input[name="btnK"]');
  //待機時間を設けないと止まってしまうことがあるので記述
  await sleep(5000);
  //スクリーンショット撮影
  await page.screenshot({path: 'search_result.png'});
  // 検索結果の先頭リンクをクリック
  await page.click('.rc > .r > a');
  //スクリーンショット撮影
  await page.screenshot({path: 'blog.png'});
  //ブラウザを閉じる
  await browser.close();
})();