puppeteer:我如何等待ajax请求并处理结果

Question

所以我打开一个网站,为所有重定向做完捕获验证码图像并将其发送给用户并将其发送给用户并重新输入打印的验证码

    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;

在我重新获得capthca的类型值后,我将它放在字段中并单击登录按钮

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

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

现在点击按钮后,ajax请求将被发送到服务器,让我们说http://example.com/login.php ...如果验证码是正确的,我将被重定向到我的仪表板,但如果ajax调用返回,请说{status:er}

并且 <span id="alert"></span>在页面中它将为其添加.Error类并将错误文本放在那里...我如何拦截ajax调用并检查登录是否成功？

我可以查看ajax调用的结果或等待并检查文档div.Error 但不知道我怎么能做到这些...这是我失败的尝试!

await page.waitForNavigation();

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

console.log(error);

browser.close();

Answer 1

您可以同时等待并处理先发生的事件:

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

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

Answer 2

接受的答案不是等待请求，而是等待选择器。这种古怪的方式不适合我。

等待承诺解析以及请求响应状态是实现它的最简单方法。

await Promise.all( [

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

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

] );

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

HTTP 响应状态码

回复	描述
200 OK	HTTP 200 OK 成功状态响应代码表示请求已成功。默认情况下，200 响应是可缓存的。

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