puppeteer : how can i wait for ajax request and process the result

Question

so i open a website , waith for all redirects to be done capture captcha image and send it vie nodejs to a user an recive the typed captcha

    const browser = await puppeteer.launch({headless: false});
    const page = await browser.newPage();

    await page.goto('http://localhost/p1.php' );
    await page.waitForNavigation();

    const captcha_image = await page.$eval('#security', e => e.getAttribute('src'));

    io.emit('send_captcha_to_client' , {text : captcha_image });

    var captcha = await captchaPromise;

after i reciv the typed value of capthca i put it in the field and click the login button

    await page.$eval('#W_CAPTCHA', (el , _captcha) => el.value = _captcha.W_CAPTCHA , captcha );

    await page.click('#login-btn');

now after clicking the button a ajax request will be send to the server lets say http://example.com/login.php ... and if the captcha is right , i'll get redirected to my dashboard but if the ajax call returns lets say {status:er}

and there is <span id="alert"></span> in the page it'll add .Error class to it and put the error text in there ... how can i intercept the ajax call and check if the login was successful or not ?

i can cehck the result of ajax call or wait and check the document for div.Error but not sure how can i do any of them .. here is my failed attempt !

await page.waitForNavigation();

page.waitForSelector('.Error');
const error  = await page.$eval('.Error', e => e.value );

console.log(error);

browser.close();

Answer 1

You can wait on both simultaneously and handle whichever occurs first:

await Promise.race([
  page.waitForNavigation({ waitUntil: "networkidle0" }),
  page.waitForSelector(".Error")
]);

if (await page.$(".Error")) {
  // there was an error
} else {
  // the page changed
}