Google => 検索 => Burikaigi表示

capture-help.js

const path = require("path");
const puppeteer = require("puppeteer");

async function appendIntro(page, setup) {
  // ライブラリをCDNから読み込み
  await page.evaluate(() => {
    var script = document.createElement('script');
    script.src = 'https://cdn.jsdelivr.net/npm/intro.js@2.7.0/intro.min.js';
    document.body.appendChild(script);

    var link = document.createElement('link');
    link.rel = "stylesheet";
    link.href = "https://cdnjs.cloudflare.com/ajax/libs/intro.js/2.7.0/introjs.min.css"
    document.body.appendChild(link);
  });

  // IntroJSが利用可能になるまで待つ
  await page.waitForFunction("window.introJs");

  await setup(page);
}

function setupGoogleTop(page) {
  return page.evaluate(() => {
    const textInput = document.getElementById("lst-ib");
    textInput.setAttribute('data-step', 1);
    textInput.setAttribute('data-intro', '入力フィールドを選択し、burikaigi2018 connpassと入力してください');

    const submitButton = document.querySelector("input[name=btnK]");
    submitButton.setAttribute('data-step', 2);
    submitButton.setAttribute('data-intro', '検索ボタンを押します');
  });
}

function setupGoogleSearch(page) {
  return page.evaluate(() => {
    const searchList = document.getElementById("ires");
    searchList.setAttribute('data-step', 1);
    searchList.setAttribute('data-intro', '一覧からconnpassのサイトを探します。');

    const submitButton = document.querySelector("a[href='https://toyama-eng.connpass.com/event/72023/']");
    submitButton.setAttribute('data-step', 2);
    submitButton.setAttribute('data-intro', 'リンクをクリックします。');
  });
}

(async () => {

  // ブラウザを起動
  const browser = await puppeteer.launch({
    // わかりやすいように、ヘッドレスモードをOFFにして、各アクションに100msec遅延させる
    headless: false,
    slowMo: 300,
  });

  // ブラウザの新規ウィンドウ作成
  const page = await browser.newPage();
  // ウィンドウサイズを調整
  await page.setViewport({ width: 1600, height: 1200 });

  // Googleへ遷移し、ネットワーク通信が終わるまで待つ
  const URL = "http://google.co.jp";
  await page.goto(URL, {waitUntil: "networkidle2"});
  await appendIntro(page, setupGoogleTop);


  // 入力フィールドに検索文字列を入力
  await page.evaluate(() => window._intro = introJs().start());
  await page.screenshot({path: "./hoge/1.png"});
  await page.type("#lst-ib", "burikaigi2018 connpass");


  // 検索実行し検索結果が表示されるまで待つ
  await page.evaluate(() => window._intro.nextStep());
  await page.screenshot({path: "./hoge/2.png"});
  await page.click("input[name=btnK]");
  await page.waitFor("#resultStats");

  await appendIntro(page, setupGoogleSearch);
  await page.evaluate(() => window._intro = introJs().start());
  await page.screenshot({path: "./hoge/3.png"});

  // 検索結果のタイトル一覧を取得し、connpass.comを含むコンテンツへ遷移
  const aHandles = await page.$$("h3 > a");
  for (var i = 0; i < aHandles.length; i++) {
    const href = await page.evaluate((handle) => handle.href, aHandles[i]);
    if (href.includes("connpass.com")) {
      await page.evaluate(() => window._intro.nextStep());
      await page.screenshot({path: "./hoge/4.png"});
      await aHandles[i].click();
      break;
    }
  }

  // ナビゲーションが完了するまで待つ
  await page.waitForNavigation({ waitUntil: "networkidle2" });
  await appendIntro(page);
  await page.screenshot({path: "./hoge/5.png"});

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

capture.js

// node capture.js で実行するとactual_images/以下にそれぞれのスナプショットが保存される。
const puppeteer = require("puppeteer");

(async () => {

  // ブラウザを起動
  const browser = await puppeteer.launch({
    // わかりやすいように、ヘッドレスモードをOFFにして、各アクションに300msec遅延させる
    headless: false,
    slowMo: 300,
  });

  // ブラウザの新規ウィンドウ作成
  const page = await browser.newPage();
  // ウィンドウサイズを調整
  await page.setViewport({ width: 1600, height: 1200 });

  // Googleへ遷移し、ネットワーク通信が終わるまで待つ
  const URL = "http://google.co.jp";
  await page.goto(URL, {waitUntil: "networkidle2"});
  await page.screenshot({path: "./actual_images/1.png"});

  // 入力フィールドに検索文字列を入力
  await page.type("#lst-ib", "burikaigi2018 connpass");
  await page.screenshot({path: "./actual_images/2.png"});

  // 検索実行し検索結果が表示されるまで待つ
  await page.click("input[type=submit]");
  await page.waitFor("#resultStats");
  await page.screenshot({path: "./actual_images/3.png"});

  // 検索結果のタイトル一覧を取得し、connpass.comを含むコンテンツへ遷移
  const aHandles = await page.$$("h3 > a");
  for (var i = 0; i < aHandles.length; i++) {
    const href = await page.evaluate((handle) => handle.href, aHandles[i]);
    if (href.includes("connpass.com")) {
      await page.screenshot({path: "./actual_images/4.png"});
      await aHandles[i].click();
      break;
    }
  }

  // ナビゲーションが完了するまで待つ
  await page.waitForNavigation({ waitUntil: "networkidle2" });
  await page.screenshot({path: "./actual_images/5.png"});

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