How can I wait for an ajax request and process the result?

Question

I open a website, then wait for all redirects to be done. Then I capture a captcha image, and send it via nodejs to a user. Then I 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 receive the typed value of the 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, an ajax request will be sent to the server. Lets say http://example.com/login.php - if the captcha is right, I will 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 check the result of the ajax call or wait and check the document for div.Error. But I am 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

The accepted answer isn't waiting for a request but waiting for a selector. That kind of hacky-way wasn't doing it for me.

Waiting a promise resolution coupled with the request response status is the easiest way to achieve it.

await Promise.all( [

  page.click( selector ), // ... action

  page.waitForResponse( response => response.status() === 200 ), // ... wait for network

] );

• Source @ https://github.com/puppeteer/puppeteer/blob/main/docs/api.md#pagewaitforresponseurlorpredicate-options

---

HTTP response status codes

Response	Description
200 OK	The HTTP 200 OK success status response code indicates that the request has succeeded. A 200 response is cacheable by default.

• Source @ https://developer.mozilla.org/en-US/docs/Web/HTTP/Status/200