时间戳

首页 > 解决方案 > Puppeteer 转到不同的页面

javascript - Puppeteer 转到不同的页面

问题描述

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

  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() 函数中进行回调以转到新页面？

标签： javascriptnode.jspuppeteer

解决方案

通过单击导航并等待页面加载的正确方法是使用Promise.all()和page.waitForNavigation()，如下所示：

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

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

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

page.goto(url[, 选项])

  • 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()其中一个字段。inputautofocus

推荐阅读