绕过验证码与登录：Playwright 自动化测试的身份认证策略

在自动化测试中，登录和验证码往往是两大“拦路虎”。它们的设计初衷就是为了区分人类和机器，而这恰恰与自动化测试的目标相悖。特别是验证码，试图在自动化脚本中完全破解它，通常既不可行也不经济。

那么，在 Playwright 测试中，我们应该如何优雅地处理身份认证，从而绕过这些障碍，直击我们真正想要测试的核心功能呢？本文将为您介绍几种行之有效的身份认证策略。

核心思想：绕过，而非破解

首先要明确一个核心原则：我们的目标是高效、稳定地完成测试，而不是在非核心的验证步骤上耗费过多精力。因此，所有策略都围绕着“绕过”二字展开。

策略一：使用已存在的登录状态（Cookie/LocalStorage）

这是最推荐、也是最常见的方法。其原理是：通过一次性的手动或API登录，将认证凭证（如Cookie、LocalStorage数据）保存下来，并在后续测试中直接复用。

实现步骤：

1. 首次登录并保存状态
   我们可以在全局Setup或一个单独的脚本中，完成一次登录，并将浏览器上下文的状态保存到文件中。

   // auth-setup.js
   import { chromium } from 'playwright';
   
   (async () => {
     const browser = await chromium.launch({ headless: false });
     const context = await browser.newContext();
     const page = await context.newPage();
   
     // 导航到登录页
     await page.goto('https://your-app.com/login');
   
     // 执行登录操作
     await page.fill('#username', 'your_username');
     await page.fill('#password', 'your_password');
     await page.click('button[type="submit"]');
   
     // 等待登录成功，例如导航到首页或出现某个成功元素
     await page.waitForURL('https://your-app.com/dashboard');
   
     // **关键步骤：将当前上下文的认证状态存储到文件**
     await context.storageState({ path: 'auth-state.json' });
   
     await browser.close();
   })();
   

2. 在测试中加载已有状态
   在你的实际测试文件中，在创建浏览器上下文时直接加载之前保存的状态文件。

   // example.spec.js
   import { test } from '@playwright/test';
   
   // 使用存储的状态来开始所有测试
   test.use({ storageState: 'auth-state.json' });
   
   test('访问需要登录的仪表板', async ({ page }) => {
     // 页面加载时已经是登录状态！
     await page.goto('https://your-app.com/dashboard');
     // ... 你的测试断言
   });
   
   // 或者，为特定测试指定不同的状态
   test('使用特定用户状态测试', async ({ browser }) => {
     const context = await browser.newContext({ storageState: 'another-auth-state.json' });
     const page = await context.newPage();
     // ... 测试逻辑
   });
   

优点：

• 速度快：避免了每次测试都执行登录流程。
• 稳定性高：不受登录页面UI变化或临时网络问题的影响。
• 贴近现实：使用了真实的浏览器状态。

策略二：通过API进行登录

如果前端登录流程很长或很不稳定，但后端API很稳定，那么直接调用登录API来获取Token或Session是一种更高效的方式。

实现步骤：

1. 在测试前获取Token
   在测试的beforeEach或beforeAll钩子中，发送一个API请求来登录。

   // example.spec.js
   import { test, expect } from '@playwright/test';
   
   let authToken;
   
   test.beforeAll(async ({ request }) => {
     // 通过API接口登录
     const response = await request.post('https://your-app.com/api/login', {
       data: {
         username: 'your_username',
         password: 'your_password'
       }
     });
     expect(response.ok()).toBeTruthy();
     const responseBody = await response.json();
     authToken = responseBody.token; // 假设返回的JSON中包含token字段
   });
   
   test('通过注入Token访问页面', async ({ page }) => {
     // 在跳转到目标页面前，将Token注入到LocalStorage或Cookie中
     await page.addInitScript((token) => {
       window.localStorage.setItem('auth-token', token);
     }, authToken);
   
     // 现在导航到页面，应用会自动读取LocalStorage中的Token
     await page.goto('https://your-app.com/dashboard');
     // ... 你的测试断言
   });
   

优点：

• 极致的速度与可靠性：比UI操作快得多，且不依赖前端。
• 更精细的控制：可以直接处理Token逻辑。

策略三：在测试环境中禁用验证码

这是最彻底的“绕过”方式，但需要开发人员的配合。核心思想是为测试环境创建一个“后门”。

实现方式：

1. 万能验证码：在测试环境中，无论用户输入什么，只要输入一个特定的万能码（例如 "test"）即可通过验证。
2. 环境变量开关：通过环境变量判断当前是测试环境，从而在代码层面跳过验证码验证逻辑。
3. Mock验证码服务：在测试环境中，将验证码服务替换为一个总是返回“成功”的Mock服务。

在Playwright测试中，如果环境做了上述配置，你的脚本就可以这样写：

test('登录流程-测试环境跳过验证码', async ({ page }) => {
  await page.goto('https://your-test-app.com/login');
  await page.fill('#username', 'your_username');
  await page.fill('#password', 'your_password');
  
  // 输入万能验证码，或者根本不需要填写验证码字段
  await page.fill('#captcha', 'test'); // 如果配置了万能验证码

  await page.click('button[type="submit"]');
  await page.waitForURL('https://your-test-app.com/dashboard');
  // ... 断言
});

优点：

• 简单直接：从根本上解决了问题。
• 测试效率最高。

缺点：

• 需要开发支持：对测试环境的代码有要求。
• 与生产环境有差异：无法测试到真实的验证码集成流程。

策略四：使用第三方测试账号

对于一些第三方登录（如Google， GitHub），它们可能有严格的反机器人措施。针对这种情况，最好的方法是：

• 为你的测试创建一个专门的第三方测试账号。
• 查阅该第三方服务的文档，看是否提供用于自动化测试的“沙箱”环境或特定的测试账号。

总结与选择建议

在实践中，策略一（保存登录状态） 是平衡了效率、可靠性和真实性的最佳选择，应作为你的首选方案。当它不适用时，再根据具体情况考虑其他策略。

通过灵活运用这些策略，你可以确保你的Playwright测试套件将宝贵的时间和资源集中在测试业务逻辑本身，而不是浪费在与登录和验证码的“斗争”上。