使用 Playwright 模拟登录 Google 账号的完整指南

环境要求

  • Playwright-core 版本: ^1.48.2
  • Google Chrome 浏览器 (本地安装)
  • MacOS 环境 (本教程基于 MacOS，Windows 用户需要调整相应路径)

安装依赖

npm install [email protected]

完整代码示例

首先，让我们定义浏览器启动参数：

const getBrowserArgs = () => [
  '--disable-blink-features=AutomationControlled',
  '--no-sandbox',
  '--disable-web-security',
  '--disable-infobars',
  '--disable-extensions',
  '--start-maximized',
  '--window-size=1680,930',
  '--disable-features=IsolateOrigins,site-per-process',
  '--disable-notifications',
  '--disable-no-sandbox',
  '--disable-dev-shm-usage',
  '--aggressive-cache-discard',
  '--disable-cache',
  '--disable-application-cache',
  '--disable-offline-load-stale-cache',
  '--disable-gpu-shader-disk-cache',
  '--media-cache-size=0',
  '--disk-cache-size=0',
  '--disable-extensions',
  '--disable-component-extensions-with-background-pages',
  '--disable-default-apps',
  '--mute-audio',
  '--no-default-browser-check',
  '--autoplay-policy=user-gesture-required',
  '--disable-background-timer-throttling',
  '--disable-backgrounding-occluded-windows',
  '--disable-background-networking',
  '--disable-search-engine-choice-screen',
  '--disable-breakpad',
  '--disable-component-update',
  '--disable-domain-reliability',
  '--disable-sync',
  '--disable-translate',
];

然后，创建浏览器实例并配置上下文：

const { chromium } = require('playwright-core');

async function setupBrowser(args = {}) {
  const browserArgs = getBrowserArgs();
  const browser = await chromium.launch({
    headless: false,
    executablePath: '/Applications/Google Chrome.app/Contents/MacOS/Google Chrome',
    args: browserArgs,
    ...args,
  });

  const context = await browser.newContext({
    //  Google 似乎根据这个来判断是否为机器人
    //  下面这个 userAgent 在 2024年11月05日，依然可用
    userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/130.0.0.0 Safari/537.36',
    viewport: { width: 1280, height: 720 },
    deviceScaleFactor: 1,
  });

  return { browser, context };
}

完整的登录示例：

async function loginToGoogle() {
  const { browser, context } = await setupBrowser();
  try {
    const page = await context.newPage();
    
    // 访问 Google 登录页面
    await page.goto('https://accounts.google.com');
    
    // 输入邮箱
    await page.fill('input[type="email"]', '[email protected]');
    await page.click('button:has-text("Next")');
    
    // 等待密码输入框出现
    await page.waitForSelector('input[type="password"]', { timeout: 5000 });
    
    // 输入密码
    await page.fill('input[type="password"]', 'your-password');
    await page.click('button:has-text("Next")');
    
    // 等待登录完成
    await page.waitForNavigation();
    
    console.log('登录成功！');
    
    // 这里可以继续执行其他操作
    
  } catch (error) {
    console.error('登录过程中出现错误:', error);
  }
}