Playwright认证成功后API请求无法正常工作问题排查

问题核心 #

认证流程执行成功，但后续API请求（POST/PATCH/GET）无实际响应，测试却始终显示通过；相同接口在Postman中可正常调用。

关键问题分析 #

1. API请求未继承认证状态：测试中使用的全局request对象不会自动继承页面上下文的storageState认证信息（Cookie、Token等），只有context.request才会关联当前上下文的认证状态。
2. 缺少请求断言：原测试仅发送请求未做任何响应校验，导致无论请求成功/失败，测试都会显示通过。
3. 认证完成校验不严谨：setup中仅等待特定响应返回，未确认响应状态是否正常，可能导致认证未完全完成就存储了状态。

修复步骤 #

1. 修改测试代码，使用上下文关联的请求对象

将测试中的全局request替换为context.request，确保API请求继承认证状态：

import { test, expect } from "@playwright/test";

test.beforeEach(async ({ page }) => {
  await page.goto("https://justexample.ua/");
  await expect(
    page.getByText("From newest to oldest", {
      exact: true,
    })
  ).toBeVisible();
});

test("Rename collection", async ({ context }) => {
  const response = await context.request.patch(
    "https://api.justexample.ua/collection/0856d250-79b7-496d-b0b9-c8163b818816",
    {
      data: { name: "Test name", description: "test description" },
    }
  );

  // 添加断言，验证请求是否成功
  expect(response.ok()).toBeTruthy();
  const responseBody = await response.json();
  expect(responseBody.name).toBe("Test name");
});

2. 完善认证流程的校验

在setup中确认等待的响应状态正常，确保认证完全完成：

import {test as setup} from '@playwright/test'

const authFile = '.auth/user.json'

setup('authentication', async ({page}) => {
    await page.goto('https://justexample.ua/');
    await page.getByRole('textbox', {name: 'Username'}).fill('Admin');
    await page.getByRole('textbox', {name: 'Password'}).fill('Admin');
    await page.locator('#kc-login').filter({hasText: 'Sign In'}).click();

    // 等待响应并确认状态为200
    const response = await page.waitForResponse('https://api.justexample.ua/asset/filter-all-data');
    expect(response.ok()).toBeTruthy();
    
    await page.context().storageState({path: authFile})
})

3. 确认配置文件的依赖关系正确

确保测试项目正确依赖setup项目，且storageState路径无误：

projects: [ 
  { 
    name: 'setup', 
    testMatch: '/globalFiles/auth.setup.ts'
  }, 
  { 
    name: 'chromium for API', 
    use: { 
      ...devices['Desktop Chrome'],  
      storageState: '.auth/user.json', 
    }, 
    dependencies: ['setup'], 
  },
]

额外排查点 #

• 检查API接口是否需要除Cookie外的其他认证头（如Authorization），若存在，需从storageState中提取对应Token并添加到请求头。
• 确认storageState文件生成正常，可打开.auth/user.json查看是否包含有效的Cookie或认证信息。

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