Puppeteerで要素が存在するかチェックする方法

Question

Node.jsでpuppeteerを使用してChromeの操作を自動化するJavaScriptを書いています。

例えばURL「https://www.example.com/」を表示し、idがbtn-nextのボタンを押したとき
遷移先のページでidがsuccessの要素が表示れたらidがbtn-submitのリンクをクリックするという処理の場合
以下のソースでうまくいきます。

const puppeteer = require('puppeteer');

puppeteer.launch({
    headless: false,
}).then(async browser => {
    const page = await browser.newPage();

    await page.setViewport({ width: 1200, height: 800 });
    await page.goto('https://www.example.com/');
    await page.click('#btn-next');

    await page.waitForSelector('#success');

    await page.click('#btn-submit');


    browser.close();
    
});

例えば、idがsuccessというのは通常パターンでは表示されるが、混雑時は表示されず
エラーページが表示されてしまう場合、エラーページが表示された場合はトップページに戻って
もう一度idがbtn-nextのボタンを押すような処理を行いたいです。

イメージとしては以下のような感じなのですが当然うまくいきません。

    while(true){
        var item = page.$('#success');
        if (item != undefined)
        {
            break;
        }
        else
        {
            await page.goto("https://www.example.com/");
            await page.click('#btn-next');
        }
    }

async/awaitを理解できていないのだと思いますが、ヒントだけでもご教示頂けると幸いです。
よろしくお願いいたします。

Answer 1

await page.click('#btn-next') した直後に page.$('#success') で値を取得しようとしても、ページの遷移が完了する前なので上手く行かず、 page.waitForNavigation() を使ってページ遷移を待つ必要があるんじゃないかと思います。

それと page.$('#success') の戻り値は Promise 型なので、同期的に書く場合は await が必要です。

私なら下記のような感じで実装します。

const puppeteer = require('puppeteer');

const sleep = msec => new Promise(resolve => setTimeout(resolve, msec));

const submitOnPage = async ({ page, interval, times }) => {
  await page.goto('https://www.example.com/');

  const navigationPromise = page.waitForNavigation();
  await page.click('#btn-next');
  await navigationPromise; // クリック後にページ遷移を待つ

  // #success の存在をチェック
  const isLoadingSucceeded = await page.$('#success').then(res => !!res);

  if (isLoadingSucceeded) {
    await page.click('#btn-submit');
  } else if (times > 1 || times === -1) {
    // インターバルを設ける
    await sleep(interval);
    // 再度試行
    submitOnPage({ page, interval, times: Math.max(times - 1, -1) });
  } else {
    throw new Error('繰り返し試行したけどダメでした…');
  }
};

puppeteer
  .launch({
    headless: false,
  })
  .then(async browser => {
    const page = await browser.newPage();

    await page.setViewport({ width: 1200, height: 800 });

    // インターバル2秒で最大10回試行する (times: -1 で無限に試行)
    await submitOnPage({ page, interval: 2000, times: 10 });

    browser.close();
  });

Comments

[masahiro.o]

ありがとうございました。
やりたい事が実現できました。