puppeteer でリンク遷移する

2021年6月20日

　前回は、puppeteer でトップページの画像を保存しました。

Javascript が使えるヘッドレスなブラウザ(PhantomJS の代替)

前回の記事

　今回は、リンク遷移させたいと思います。例えば、このサイトのトップの「ラズパイで遊ぼう！」リンクから辿り、「RTL-SDR 用 FM ラジオフロントエンド」のページを開かせてみたいと思います。

　単純にページ遷移するだけなら、page.goto('URL’) でいいのですが、例えば、このサイトの「ラズパイでエロゲ」のページは、同じリンクで違う内容を返すように作ってあるので単純なページ遷移ではありません。きちんとリンクを辿らなければ、正しいページの内容が表示されないように作ってあります。

　puppeteer でリンク操作をやってみました。このサイトの「ラズパイで遊ぼう！」->「ソフトウェア」->「RTL-SDR 用 FM ラジオフロントエンド」と辿っていき、最後のページのスクリーンショットを撮ります。次のような内容になりました。

#!/usr/bin/node

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

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

// この順番でリンクをクリックしていく
const link_text = [ 
       "ラズパイで遊ぼう！",
       "ソフトウェア",
       "RTL-SDR 用 FM ラジオフロントエンド"
 ];

(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: 1997
  });

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

  console.log("リンクをたどる");
  for( let i = 0; i < link_text.length; i++ ) {
    // a タグの中で指定したテキストを持つ要素を求める。
    let aTags = await page.$x('//a[contains(text(), "' + link_text[i] + '")]'');
    if( aTags.length == 0 ) {
      console.log('"' + link_text[i] + '" リンクが見つかりません');
      continue;
    }
    console.log(link_text[i] + "をクリック");
    await aTags[0].click();
    await page.waitForNavigation();
  }

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

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

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

　link_text 配列の順番にリンクをクリックしていきます。await page.$x('//a[contains(text(), “' + link_text[i] + '")]") はページ内の a タグ要素の中で、テキストに link_text[i] がある要素の配列を返します。見つかれば、その要素をクリックします。

　クリックは、見つけた要素.click() で行います。page.waitForNavigation() はページがロードされるのを待ちます。

　以上を link_text の順番に繰り返し、最後にスクリーンショットを撮ります。