【Node.js】Puppeteerで画面遷移する(リンクをクリックする)

この記事ではNode.jsのライブラリPuppeteerを使って画面遷移する(リンクをクリックする)やり方を解説します。

ブラウザの自動操作に興味がある、楽をしたい
Puppeteerの基本的な操作を知りたい
Puppeteer使ってみたけど難しい

という方向けに複数回に分けてPuppeteerの基本操作を解説していきます。

一通り目を通すことで、ブラウザの自動操作を体感できる（作れるようになる）ことを目指します。

Contents

1 固定のリンクを使って画面遷移する（静的リンク）
2 画面遷移後はページが読み込まれるのを待とう
3 可変のリンクを使って画面遷移する（動的リンク）
4 おすすめ参考記事

固定のリンクを使って画面遷移する（静的リンク）

リンクには静的リンクと動的リンクの二種類がありますので二つに分けて説明していきます。

静的リンクは固定の文字列（例：https://www.kennejs.com/）で変わることがないリンクを指します。

静的リンクはpage.goto()で直接指定します。

以下のサンプルコードでは二画面の固定リンクに遷移しています。

transitScreen: async function(){
mode = {headless: false};
(async () => {
  const browser = await puppeteer.launch(mode);
  const page = await browser.newPage();
  // page.goto()でリンク先を指定する。
  await page.goto('https://www.kennejs.com/');
  // 画面遷移後は画面を読み込むまで待機する（１秒）
  await page.waitFor(1000);
  // page.goto()でリンク先を指定する。（２画面目）
  await page.goto('https://www.kennejs.com/archive/category/Node.js')
  …
})();
}

画面遷移後はページが読み込まれるのを待とう

上のサンプルでは画面遷移後に「page.waitFor(1000)」で１秒（1000ミリ秒）待機する処理を入れています。

ブラウザのページ遷移では非同期でページ要素を生成している場合があり、待機させる処理を入れておかないと次の処理ができずに止まってしまうことが頻繁にあります。

なので、「page.waitFor(1000)」で画面が読み込まれるのを待つ処理は必ず入れておく必要があります。

サンプルの1000の値は読み込む画面によって変わるのでコーディングしながら適切な値を設定してください。

ミリ秒指定が一番簡単ですが、Puppeteer APIにはミリ秒だけではなく、指定したCSSセレクタやページ全体を読み込むのを待つ関数も用意されています。

可変のリンクを使って画面遷移する（動的リンク）

リンクの二つ目は動的リンクで、厄介なことにリンクが可変です。

例えば、「https://(URL)?xID=134a9bc」のように、毎回「xID=」の部分が変わるようなリンクでWebアプリケーションで動的に生成されます。

このようなリンクはコードに直書きできないため、工夫が必要です。

例えば、画面で「https://(URL)?xID=134a9bc」がaタグで「最新情報」のような文字リンクで定義されている場合は以下のようにコーディングします。

※タグが文字を囲っている（例：<a>最新情報</a>）構成の場合に対応することができます。

const aTagAll = await page.$('a');　…①
let tagText = [];
let indicator = "";
for (let i = 0; i < aTagAll.length; i++) {
  tagText.push(await (await aTagAll[i].getProperty('textContent')).jsonValue())
  if(tagText[i].match(/最新情報/)){　…②
    indicator = i;
    break;
  }
}
aTagAll[indicator].click();

aタグでない、divやspan等のタグでも対応できます。（①の箇所を修正します）

「最新情報」の文字列は②で定義していますので、②の箇所を変更してみてください。

上記のサンプルは記述量は増えてしまいますが汎用性が高いのでオススメです。