[Feature]: ability to cancel "waitFor" promises

[olalonde]

Feature description

I'm using page.waitForSelector in this way to determine which page I landed on:

const element = await Promise.race([page.waitForSelector("#login-success"), page.waitForSelector("#login-error")]);

// do something...

The problem with this is that if one of the promises completes early, the others will keep on retrying until their timeout expires (I assume waitFor is internally implemented using setTimeout/setInterval). That can create a lot of unnecessary computation especially for a long array of page.waitForSelector.

It would be good if there was a way to cancel the promise it returns. For example, it could enable this:

const promises = [page.waitForSelector("#login-success"), page.waitForSelector("#login-error")];
const element = await Promise.race(promises);
promises.forEach(p => p.cancel?())

I would be able to work on a pull request if there is interest.

[OrKoN]

Have you tried using page.wairForSelector('#login-success, #login-error')? The feature request is probably still something to consider but I don't think we will change API to return non-standard promises. Perhaps, waitForSelector should accept an AbortController instance?

[olalonde]

Thanks, I hadn't considered that. I still think this might be a useful feature since you could be waiting on different kind of things, e.g. const element = await Promise.any([page.waitForSelector("#login-success"), page.waitForNavigation()]);.

I could try implementing using an AbortController strategy. So it would be used like this?

// calls abort() once one of the promises fulfills
async function smartAny(abort, promises) {
  const result = await Promise.any(promises);
  abort();
  return result;
}
const { signal, abort } = new AbortController();
await smartAny(abort, [page.waitForSelector("#login-success", { signal }), page.waitForNavigation({ signal })])

[olalonde]

Actually, instead of calling abort() externally, we could pass the whole abort controller to waitForSelector and let it call abort once it fulfills, canceling any other pending waitFor tasks that share the same controller. e.g.:

const abortController = new AbortController();
await Promise.any([
  page.waitForSelector("#login-success", { abortController }),
  page.waitForNavigation({ abortController })
])

[OrKoN]

Is AbortController available in Node14+?

[olalonde]

Nope, but there are a few JavaScript implementations available, e.g. https://github.com/southpolesteve/node-abort-controller

[OrKoN]

looks like it might available in Node 14.17.0+

[Kazimazi]

Can this be added to other waitFor functions, like waitForResponse?