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[, 选项])

• url页面导航到的 URL。网址应包括方案，例如https://。
• options 导航参数可能具有以下属性：
  • timeout以毫秒为单位的最大导航时间，默认为 30 秒，传递0到禁用超时。可以使用 page.setDefaultNavigationTimeout(timeout) 方法更改默认值。
  • waitUntil何时考虑导航成功，默认为load。给定一组事件字符串，在触发所有事件后，导航被认为是成功的。...

把这些放在一起，登录的一个例子是：

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()或其他形式的等待。loadinput
• 您也可以通过Enter使用键盘按键来提交登录表单。这仍然需要Promise.all()模式，但意味着您不需要提交按钮的选择器。根据页面的实现方式（例如，如果页面不使用），您可能需要使用.click()其中一个input字段autofocus。