javascript - Puppeteer 转到不同的页面

Question

我试图让我的脚本在成功登录后转到新页面，但是，它会在登录完成之前尝试转到下一页。

  const page = await browser.newPage();

  page.goto('https://website/login');

  page.once('load', async () => {
    console.log('Page loaded!');
    // Login script here
  });

虽然我不知道如何在登录后转到新链接，但我最初的解决方案是这样做；

// go to stats
await page.goto('https://www.website/stats');

但是，由于页面已经定义，这实际上并没有等待任何东西。

是否可以在 .click() 函数中进行回调以在之后转到新页面？

Answer 1

通过单击导航并等待页面加载的正确方法是使用 Promise.all()和 page.waitForNavigation() ，像这样:

await Promise.all([
    page.waitForNavigation(),
    page.click('#some-link')
]);

但是，当您通过 page.goto() 导航时, 以上不是必需的，因为 page.goto() 会自动等待页面加载。

在这两种情况下，您都可以使用 waitUntil 选项自定义它等待的事件，该选项默认为 load 事件。

page.goto(url[, options])

• url URL to navigate page to. The url should include scheme, e.g. https://.
• options Navigation parameters which might have the following properties:
  • timeout Maximum navigation time in milliseconds, defaults to 30 seconds, pass 0 to disable timeout. The default value can be changed by using the page.setDefaultNavigationTimeout(timeout) method.
  • waitUntil When to consider navigation succeeded, defaults to load. Given an array of event strings, navigation is considered to be successful after all events have been fired. ...

综合起来，一个登录的例子是:

const page = await browser.newPage();

await page.goto('https://website/login');

await page.type('input[type="email"]', 'foo@example.com');
await page.type('input[type="password"]', 'pass1234');
await Promise.all([
    page.waitForNavigation(),
    page.click('button')
]);

// Now we are on the home page (or wherever we end up after logging in)

一些其他注意事项:

• 您可能需要使用 page.waitForSelector()或其他形式的等待，如果页面 load 事件在 input 字段准备就绪之前触发。
• 您也可以通过在键盘上按 Enter 键来提交登录表单。这仍然需要 Promise.all() 模式，但这意味着您不需要提交按钮的选择器。您可能需要 .click() input 字段之一，具体取决于页面的实现方式(例如，如果页面不使用 autofocus ).