Puppeteer: line of code being executed before others

Question

I have this code:

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto("https://www.sisal.it/scommesse-matchpoint/quote/calcio/serie-a");

    const [button1] = await 
       page.$x('//div[@class="marketBar_changeMarketLabel__l0vzl"]/p');
    button1.click();

    const [button2] = await page.$x('//div[@class="listItem_container__2IdVR white 
       marketList_listItemHeight__1aiAJ marketList_bgColorGrey__VdrVK"]/p[text()="1X2 
       ESITO FINALE"]');
    button2.click();
})();

The proble is that after clicking button1 the page change and puppeteer executes immediately the following line of code, instead I want it to wait for the new page to be loaded becuase otherwise It will throw an error since It can't find button2.

I found this solution on stackoverflow:

const puppeteer = require("puppeteer");

function delay(time) {
    return new Promise(function (resolve) { 
        setTimeout(resolve, time);
    });
}

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto("https://www.sisal.it/scommesse-matchpoint/quote/calcio/serie-a");

    const [button1] = await 
        page.$x('//div[@class="marketBar_changeMarketLabel__l0vzl"]/p');
    button1.click();

    await delay(4000);

    const [button2] = await page.$x('//div[@class="listItem_container__2IdVR white 
       marketList_listItemHeight__1aiAJ 
       marketList_bgColorGrey__VdrVK"]/p[text()="1X2 
       ESITO FINALE"]');
    button2.click();
})();

But of course this in't the best solution.

You could wait for page navigation: https://stackoverflow.com/questions/46948489/puppeteer-wait-page-load-after-form-submit . Also does `$x` act the same as `page.waitForSelector()`? Maybe consider using that function to wait until the element is on the page. — DemiPixel, Oct 12 '21 at 00:03
@Phix It seems to work just sometimes, when it doens't work the script just "freeze" and button2 is never going to be clicked — Longino, Oct 12 '21 at 00:03

score 0 · Answer 1 · answered Oct 12 '21 at 00:10

0

I think you have to modify a bit in your code:

await button1.click();
await page.waitForNavigation({waitUntil: 'networkidle2'});

For reference, see the documentation.

answered Oct 12 '21 at 00:10

Jom

138
1
5

It doesn't work unfortunately – Longino Oct 12 '21 at 00:13

score 0 · Answer 2 · answered Oct 12 '21 at 00:18

I found a solution, here's the code:

const puppeteer = require("puppeteer");

(async () => {
    const browser = await puppeteer.launch({ headless: false });
    const page = await browser.newPage();
    await page.goto("https://www.sisal.it/scommesse 
        matchpoint/quote/calcio/serie-a");

    await page.waitForXPath('//div[@class="marketBar_changeMarketLabel__l0vzl"]/p');
    const [button1] = await page.$x('//div[@class="marketBar_changeMarketLabel__l0vzl"]/p');
    await button1.click();

    await page.waitForXPath('//div[@class="listItem_container__2IdVR white marketList_listItemHeight__1aiAJ marketList_bgColorGrey__VdrVK"]/p[text()="1X2 ESITO FINALE"]');
    const [button2] = await page.$x('//div[@class="listItem_container__2IdVR white marketList_listItemHeight__1aiAJ marketList_bgColorGrey__VdrVK"]/p[text()="1X2 ESITO FINALE"]');
    button2.click();
})();

Puppeteer: line of code being executed before others

2 Answers2