Playwright如何测试需Google企业账号登录且带Cloudflare的网站

一、先解决Cloudflare的自动化拦截问题 #

Cloudflare会检测自动化工具特征，默认配置的Playwright容易被拦截，先做这些基础配置：

• 启动浏览器时禁用自动化检测标记：在launch选项里添加args: ['--disable-blink-features=AutomationControlled']
• 设置真实的浏览器User-Agent，比如当前主流Chrome的UA，避免被识别为爬虫
• 先以headless: false模式调试，手动完成一次Cloudflare验证后，再切换到headless: 'new'模式结合状态复用

二、放弃extraHTTPHeaders，用真实登录流程处理Google企业账号认证 #

Google企业账号登录依赖会话Cookie和认证状态，不是简单的HTTP Header能搞定的，正确做法是：

1. 手动完成一次登录并保存状态
   写一个初始化脚本，手动处理Cloudflare验证和Google登录，然后把认证状态保存到本地文件：

   const { chromium } = require('playwright');
   
   (async () => {
     const browser = await chromium.launch({
       headless: false,
       args: ['--disable-blink-features=AutomationControlled']
     });
     const context = await browser.newContext({
       userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
     });
     const page = await context.newPage();
     await page.goto('你的网站域名');
     // 手动完成Cloudflare人机验证，再走Google企业账号登录流程
     // 登录成功后保存当前上下文的认证状态
     await context.storageState({ path: 'auth-state.json' });
     await browser.close();
   })();
   

2. 复用认证状态进行自动化测试
   后续测试直接加载保存的状态，跳过登录和Cloudflare验证步骤：

   // 测试用例中
   const { chromium } = require('playwright');
   
   (async () => {
     const browser = await chromium.launch({
       headless: 'new',
       args: ['--disable-blink-features=AutomationControlled']
     });
     // 加载之前保存的认证状态
     const context = await browser.newContext({
       storageState: 'auth-state.json',
       userAgent: 'Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/118.0.0.0 Safari/537.36'
     });
     const page = await context.newPage();
     await page.goto('你的网站域名');
     // 直接访问需要登录的内容，执行测试逻辑
     await page.waitForSelector('.logged-in-content'); // 替换为登录后才会出现的元素选择器
     // 其他测试操作...
     await browser.close();
   })();
   

三、进阶优化建议 #

• Cloudflare白名单：如果测试环境允许，把测试机器的IP加入Cloudflare白名单，彻底绕过人机验证，提升测试稳定性
• MFA处理：若Google企业账号开启MFA，测试账号可使用TOTP验证码，代码中引入TOTP生成库自动计算验证码，避免手动输入
• 上下文持久化：如需长期复用状态，可使用Playwright的persistentContext，直接保留浏览器所有会话数据，无需每次保存状态文件

内容的提问来源于stack exchange，提问作者mlem_dev