Question

解决方案：

根据@pguardiario的建议，以下内容将拦截Ajax调用并等待其完成：

  await page.waitForResponse('http://localhost:58080/', {timeout: 2000})
    .catch(() => {console.log('[puppeteer] Error')});

我有一个页面在页面加载后执行Ajax调用，我需要操纵need来等待该调用的完成。在puppeteer : wait for ajax call after navigation中，可接受的答案使用await page.waitForSelector(cssSelector);，在我当前的情况下不起作用，因为Ajax调用的成功不会向页面添加任何新元素。这是一个最小的工作示例，其中包含有关实际页面功能的一些注释：

index.html：

<!DOCTYPE html>
<html>
  <head>
    <script src="https://code.jquery.com/jquery-3.5.1.min.js" charset="utf-8"></script>
  </head>
  <body>
  </body>
  <script charset="utf-8">
    $(document).ready(function() {
      // render data previously stored in localStorage
      console.log('Fetching page');
      // in reality it is fetching a JSON API endpoint, but for the purposes of this example, use /
      $.get("/")
      .fail(function () {
        // add an error element to the page
        console.log('Error');
      })
      .done(function () {
        // empty the table containing the data and rerender
        console.log('Success');
      })
      .always(function () {
        // puppeteer can now continue and check for error
        console.log('Done fetching page');
      });
    });
  </script>
</html>

test.js：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', consoleObj => console.log(consoleObj.text()));
  await page.goto('http://localhost:58080');
  // What to do to wait for the completion of the ajax call done after
  // document is ready?
  console.log('[puppeteer] Sleeping');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('[puppeteer] Closing');
  await browser.close();
});

serve.js：

const http = require('http');
const fs = require('fs');

http.createServer(function (request, response) {
    fs.readFile('index.html', function(error, content) {
        response.writeHead(200, { 'Content-Type': 'text/html' });
        response.end(content, 'utf-8');
    });
}).listen(58080, 'localhost');

在一个终端中：

node serve.js

在另一个：

node test.js

输出：

[puppeteer] Sleeping
Fetching page
Success
Done fetching page
[puppeteer] Closing

我希望操纵up的人等待打印“完成获取页面”而没有预先设置的超时时间。我控制页面本身的源代码，因此可以接受所有想法，即使是那些需要更改目标服务器的想法。例如，如果在Ajax调用结束后添加一个隐藏的DOM元素，则可以使用await page.waitForSelector(cssSelector);。我想知道是否有更好的方法。

Answer 1

我相信操纵up的人可以加载事件。

是这样的：

const puppeteer = require('puppeteer');

puppeteer.launch().then(async browser => {
  const page = await browser.newPage();
  page.on('console', consoleObj => console.log(consoleObj.text()));
  page.on('load', await () => { //set listener before you go to the page.
     // Now do something...
  });
  await page.goto('http://localhost:58080');
  // What to do to wait for the completion of the ajax call done after
  // document is ready?
  console.log('[puppeteer] Sleeping');
  await new Promise(resolve => setTimeout(resolve, 1000));
  console.log('[puppeteer] Closing');
  await browser.close();
});

木偶：页面加载后等待Ajax调用

解决方案：

1 个答案: