title: How can I wait for an ajax request and process the result?
body: <p>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:</p>
  <pre><code>    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 =&gt; e.getAttribute('src'));
  
      io.emit('send_captcha_to_client' , {text : captcha_image });
  
      var captcha = await captchaPromise;
  </code></pre>
  <p>After I receive the typed value of the capthca, I put it in the field and click the login button:</p>
  <pre><code>    await page.$eval('#W_CAPTCHA', (el , _captcha) =&gt; el.value = _captcha.W_CAPTCHA , captcha );
  
      await page.click('#login-btn');
  </code></pre>
  <p>Now after clicking the button, an ajax request will be sent to the server. Lets say <code>http://example.com/login.php</code>  - if the captcha is right, I will get redirected to my dashboard, but if the ajax call returns lets say <code>{status:er}</code></p>
  <p>And there is  <code>&lt;span id=&quot;alert&quot;&gt;&lt;/span&gt;</code> in the page it'll add <code>.Error</code> 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?</p>
  <p>I can check the result of the ajax call or wait and check the document for <code>div.Error</code>. But I am not sure how can I do any of them. Here is my failed attempt:</p>
  <pre><code>await page.waitForNavigation();
  
  page.waitForSelector('.Error');
  const error  = await page.$eval('.Error', e =&gt; e.value );
  
  console.log(error);
  
  browser.close();
  </code></pre>