Menu
I am trying to navigate through an SPA with puppeteer, the problem I am facing here is that I am unable to wait for the page to load then proceed with my program.
I fill a form and then click submit, depending on the contents of the form, different pages can be loaded so I can't use page.waitFor(Selector) as there can be many different pages depending on the input.
I tried using waitUntil: load, networkidle2, networkidle0, domcontentloaded but all of them trigger before the elements are loaded.
The page I am trying to automate is Link. (If you want to check for yourself, then choose booking reference and fill out random details and press continue.)
After choosing "booking-reference" in the link I fill in the details with puppeteer and then press the continue button, What I cannot figure out is how to wait for the page to be completely loaded without relying on selectors.
875
I think you should know what those pages are and use Promise.race with page.waitFor for each page, like this:
const puppeteer = require('puppeteer');
const html = `
<html>
<body>
<div id="element"></div>
<button id="button">load</button>
<script>
document.getElementById('button').addEventListener("click", () => {
document.getElementById('element').innerHTML =
'<div id="element' + (Math.floor(Math.random() * 3) + 1) + '"></div>';
});
</script>
</body>
</html>`;
(async () => {
const browser = await puppeteer.launch();
const page = await browser.newPage();
await page.goto(`data:text/html,${html}`);
await page.click('#button');
const element = await Promise.race([
page.waitFor('#element1'),
page.waitFor('#element2'),
page.waitFor('#element3')
]);
console.log(await (await element.getProperty('id')).jsonValue());
await browser.close();
})();
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With
