如何登录Puppeteer？

Question

我是JavaScript和Puppeteer的新手。我尝试了下面的登录代码，但失败了。相比之下，我添加了page2并成功了。我该怎么解决呢？

const CREDS = require('./creds');

async function main() {
  const puppeteer = require('puppeteer');
  const browser = await puppeteer.launch({headless: false});

  const page = await browser.newPage();
  await page.setViewport({width: 1200, height: 720})
  await page.goto('https://www.daum.net');
  await page.waitForNavigation();
  await page.type('#id', CREDS.username);
  await page.type('#loginPw', CREDS.password);
  await page.click('#loginSubmit');

  const page2 = await browser.newPage();
  await page2.setViewport({width: 1200, height: 720})
  await page2.goto('https://google.com');
  await page2.type('#lst-ib', 'Headless Chrome');
}

main();

- Joonho Lee

Answer 1

page.waitForNavigation();会在click或任何触发页面导航的操作后等待导航。您应该在page.click()之后添加waitForNavigation()。

await Promise.all([
  page.click('#loginSubmit'),
  page.waitForNavigation({ waitUntil: 'networkidle0' }),
]);

它将等待两个承诺都解决。

现在，您的初始代码将如下所示：

const puppeteer = require('puppeteer');

async function main() {
  const browser = await puppeteer.launch({headless: false});
  const page = await browser.newPage();
  await page.setViewport({width: 1200, height: 720});
  await page.goto('https://www.daum.net', { waitUntil: 'networkidle0' }); // wait until page load
  await page.type('#id', CREDS.username);
  await page.type('#loginPw', CREDS.password);
  // click and wait for navigation
  await Promise.all([
    page.click('#loginSubmit'),
    page.waitForNavigation({ waitUntil: 'networkidle0' }),
  ]);
}

main();

注意：除了回答之外，我无法测试此问题，因为我没有daum.net的登录权限，也无法看到您面临的实际错误。如果您可以尝试上面提供的解决方案并分享结果，那将更有帮助。

- Md. Abu Taher

---

出现了错误信息“断言失败：找不到选择器#id的节点”，我已经修复了，你的代码运行得非常好！哇，非常感谢。 - Joonho Lee

为什么我们需要添加 { waitUntil: 'networkidle0' }？我只看到 page.waitForNavigation()，它完美地工作。 - ThangLe

它还与PuppeteerSharp兼容。谢谢！ - undefined

Answer 2

page.waitForNavigation()

使用Puppeteer登录网站通常只需要使用以下代码：

await page.goto('https://www.example.com/login');

await page.type('#username', 'username');
await page.type('#password', 'password');

await page.click('#submit');

await page.waitForNavigation(); // <------------------------- Wait for Navigation

console.log('New Page URL:', page.url());

注意: 点击提交按钮后记得使用page.waitForNavigation()等待主页显示后再继续操作。

- Grant Miller

---

如果提交按钮没有id，我该怎么做？ - German

这里需要将 waitForNavigation 和 click 的 promises 分组使用 Promise.all，不能单独使用。 - ggorlen

Answer 3

这是另一个没有id的例子：

await page.type("input[type=text]", "username");

await page.type("input[type=password]", "password");

await page.click("button[type=submit]");

- Emmanuel Pallares