Catching waitForSelector Errors

Question

I use a module called Puppeteer.

I tried waiting for a selector on my page that may not appear. Out of the two approaches I took, only the try-catch method worked.

try-catch block - working

try {
    await page.waitForSelector('.element');
    //element appeared
} catch (error) {
    //element did not appear
}

promise chaining - not working

await page.waitForSelector('.element')
    .catch((error) => { 
        //element did not appear
    })
    .then(() => {
        //element appeared
    });

It seems that waitForSelector does return a Promise as indicated in the API, but I can't figure why the latter approach didn't work. It threw the error anyway.

Have anyone encountered the same issue?

Answer 1

You should restructure your Promise Chaining example to use the then() method before the catch() method.

Consider the following example using page.waitForSelector():

// Correct Method
await page.waitForSelector('#example').then(() => {
  console.log('SUCCESS');
}).catch(e => {
  console.log('FAIL');
});

If the element does not exist, then FAIL will be logged to the console. Otherwise, if the element does exist, the output will be SUCCESS.

On the other hand, take a look at the example below in which then() and catch() are reversed:

// Incorrect Method
await page.waitForSelector('#example').catch(e => {
  console.log('FAIL');
}).then(() => {
  console.log('SUCCESS - not necessarily');
});

If the element does not exist, then FAIL will be logged to the console, but regardless of whether the element exists or not, SUCCESS will also be written to the console. This is because logging SUCCESS is the next immediate step in the chain after attempting to catch an error.

Using then() before catch() will allow you to print one of two messages and achieve your desired result.