pupeteer でフオーム (検索ボックス) を操作する

2021年6月21日

　今度は、フォームを操作してみます。サイトのページには、検索ボックスを設置してあるので、pupeteer で検索させたいと思います。

　検索ボックスのフォーム要素には以下のように id が設定してあるのでそれを使っていきます。

• テキストボックス
  id: search_text
• 検索ボタン
  id: search_button

　テキストボックスに検索ワードを入力するには、次のように書きます。

await page.type("#search_text", "検索ワード");

　検索ボタンをクリックさせるには、次のように書きます。

await page.click("#search_button");

　要素に id を付けていると、操作しやすいですね。

　では、Xkanon を検索させてみたいと思います。次のような内容になりました。

#!/usr/bin/node

const puppeteer = require("puppeteer-core");

const URL = "https://sirius10.net/";

(async () => {
  console.log("*** Start ***");

  console.log("Chromium 起動");
  const browser = await puppeteer.launch({
    headless: false,
    slowMo: 50,
    executablePath: "/usr/bin/chromium-browser"
  });

  console.log("新しいタブ");
  const page = await browser.newPage();

  console.log("ビューポート/デバイス設定");
  await page.setViewport({
    width: 1024,
    height: 768
  });

  console.log("sirius10 へ移動");
  await page.goto(URL);

  console.log('検索ボックスに "Xkanon" を入力する');
  await page.type("#search_text", "Xkanon");
  console.log("submit ボタンをクリックする");
  await page.click("#search_button");

  console.log("スクリーンショットを test3.png に保存");
  await page.screenshot({
    path: "test3.png",
  });

  console.log("Chromium 終了");
  await browser.close();

  console.log("*** End ***");
})();

　保存された画像は以下のように、検索結果のページになりました。

　他のフォームも同様に操作できるでしょう。なお、id がついていない場合は、type 属性や value 属性を使うこともできます。例えば、submit ボタン (type="submit") がページ内に一つしか無ければ、次のようにしてボタンをクリックします。

await page.click('input[tyupe="submit"]');

　あるいは、単純に Enter キーを押したことにすればいいです。

await page.keyboard.press('Enter');

　他の方法もあるようですが、自分の環境に合った方法でクリックさせればいいと思います。