Home>

javascript - how to check if an element exists in puppeteer

I'm writing JavaScript to automate Chrome operations using puppeteer in Node.js.

For example, when the URL "https://www.example.com/" is displayed and the button with id btn-next is pressed
When the element with id success is displayed on the transition destination page, click the link with id btn-submit
The following source works fine.

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

For example, id is "success", but it is displayed in the normal pattern, but it is not displayed at the time of congestion If an error page is displayed, if an error page is displayed, return to the top page
I want to do something like pressing the button with id btn-next again.

The image looks something like this, but of course it doesn't work.

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

I don't understand async/await, but I'd appreciate it if you could give me a hint.

javascript node.js
  • Answer # 1

    await page.click (&​​apos;# btn-next')immediately afterpage. $('# success')I don't think it's going to work because it's before the page transition is complete, and I think you need to wait for the page transition usingpage.waitForNavigation ().

    And the return value ofpage. $('# success')is of typePromise, so when writing synchronously,awaitIs required.

    I implement it as follows.

    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;// Wait for page transition after click
  // Check for the existence of #success
  const isLoadingSucceeded = await page. $('# success'). then (res =>!! res);
  if (isLoadingSucceeded) {
    await page.click ('# btn-submit');
  } else if (times>1 || times === -1) {
    // set an interval
    await sleep (interval);
    // try again
    submitOnPage ({page, interval, times: Math.max (times-1, -1)});
  } else {
    throw new Error ('I tried repeatedly but it wasn't ...');
  }
};
puppeteer
  .launch ({
    headless: false,
  })
  .then (async browser =>{
    const page = await browser.newPage ();
    await page.setViewport ({width: 1200, height: 800});
    // Try up to 10 times at an interval of 2 seconds (times: -1 for infinite attempts)
    await submitOnPage ({page, interval: 2000, times: 10});
    browser.close ();
  });

Related articles