Puppeteer 登录弹出 Facebook

Puppeteer 是 Google 出品的一个基于 Node.js 的自动化工具，使用它可以模拟人操作浏览器，对页面进行截屏、生成 PDF、填写表单等一系列自动化操作。本文将介绍如何使用 Puppeteer 模拟登录 Facebook，并处理登录弹窗的情况。

准备工作

首先，我们需要安装 Puppeteer：

npm install puppeteer

然后，我们创建一个 loginFacebook.js 文件，并在其中引入 Puppeteer：

const puppeteer = require('puppeteer');

模拟登录

接下来，我们需要打开一个新的浏览器页面并访问 Facebook 登录页面：

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.facebook.com/login/');
})();

现在页面已经打开了，但是我们还需要输入账号密码进行登录。但是，当我们点击密码框时，Facebook 的验证码弹窗会挡住输入框：

我们该如何处理这种情况呢？

处理登录弹窗

我们需要先等待验证码弹窗加载完成再进行操作。可以使用 page.waitForSelector() 方法来等待元素出现：

await page.waitForSelector('._4-u2._4-u8');

接下来，我们需要判断当前页面是否有待填写的元素，如果有则输入用户名和密码：

const username = 'YOUR_USERNAME';
const password = 'YOUR_PASSWORD';
const USERNAME_SELECTOR = '#email';
const PASSWORD_SELECTOR = '#pass';
const BUTTON_SELECTOR = '#loginbutton';

if (await page.$(USERNAME_SELECTOR)) {
  await page.click(USERNAME_SELECTOR);
  await page.keyboard.type(username);
  await page.click(PASSWORD_SELECTOR);
  await page.keyboard.type(password);
  await page.click(BUTTON_SELECTOR);
}

现在，我们已经成功地模拟了登录操作并处理了验证码弹窗。完整的代码如下：

const puppeteer = require('puppeteer');

(async () => {
  const browser = await puppeteer.launch();
  const page = await browser.newPage();
  await page.goto('https://www.facebook.com/login/');
  await page.waitForSelector('._4-u2._4-u8');
  const username = 'YOUR_USERNAME';
  const password = 'YOUR_PASSWORD';
  const USERNAME_SELECTOR = '#email';
  const PASSWORD_SELECTOR = '#pass';
  const BUTTON_SELECTOR = '#loginbutton';
  if (await page.$(USERNAME_SELECTOR)) {
    await page.click(USERNAME_SELECTOR);
    await page.keyboard.type(username);
    await page.click(PASSWORD_SELECTOR);
    await page.keyboard.type(password);
    await page.click(BUTTON_SELECTOR);
  }
})();

现在，我们已经成功地使用 Puppeteer 模拟登录 Facebook，并处理了登录弹窗的情况。