如何配置Playwright实现自定义浏览器上下文测试后自动关闭？

针对你遇到的问题，完全可以通过配置或代码封装实现自定义上下文的自动关闭，不用每次手动调用context.close()，下面是几种实用方案：

1. 利用测试后置钩子统一清理 #

不管你用的是Playwright Test还是Jest这类测试框架，都可以通过全局后置钩子在每个测试结束后自动检查并关闭自定义上下文。

针对Playwright Test的写法 #

在创建自定义上下文时，把它关联到当前测试的信息对象中，然后在afterEach钩子中统一关闭：

// 封装的visitWithAuth函数
async function visitWithAuth(url: string) {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext({ 
    storageState: getStorageStateByUrl(url) // 你的状态匹配逻辑
  });
  const page = await context.newPage();

  // 将上下文存入当前测试的自定义属性
  (test.info() as any).customAuthContext = context;
  return { page, context };
}

// 全局后置钩子，测试结束自动清理
test.afterEach(async () => {
  const customContext = (test.info() as any).customAuthContext;
  if (customContext) {
    await customContext.close();
  }
});

针对Jest的写法 #

维护一个全局变量存储当前测试的上下文，在afterEach中关闭：

let currentCustomContext;

afterEach(async () => {
  if (currentCustomContext) {
    await currentCustomContext.close();
    currentCustomContext = null;
  }
});

// 测试中使用
test('访问应用A', async () => {
  const { page, context } = await visitWithAuth('https://app-a.com');
  currentCustomContext = context;
  // 测试逻辑...
});

2. 封装成Playwright Test Fixture（推荐） #

这是最符合Playwright最佳实践的方式，把带认证的页面/上下文封装成自定义fixture，让框架自动管理生命周期：

import { test as baseTest } from '@playwright/test';

// 扩展baseTest，添加自定义fixture
const test = baseTest.extend({
  // 定义带认证的页面fixture
  authenticatedPage: async ({ browser }, use, testInfo) => {
    // 从测试参数中获取目标URL，匹配对应存储状态
    const targetUrl = testInfo.parameters.authTargetUrl;
    const context = await browser.newContext({
      storageState: getStorageStateByUrl(targetUrl)
    });
    const page = await context.newPage();

    // 将页面传递给测试用例
    await use(page);

    // 测试结束后自动执行此处，关闭上下文
    await context.close();
  },
});

// 使用自定义fixture编写测试
test('测试应用A的功能', async ({ authenticatedPage }) => {
  await authenticatedPage.goto('https://app-a.com/dashboard');
  // 测试逻辑...
}, { parameters: { authTargetUrl: 'https://app-a.com' } });

通过这种方式，你完全不用关心上下文的关闭，Playwright会在测试执行完成后自动调用清理逻辑。

3. 绑定测试结束事件自动关闭 #

在visitWithAuth中直接监听测试完成事件，创建上下文时就绑定关闭逻辑：

async function visitWithAuth(url: string) {
  const browser = await playwright.chromium.launch();
  const context = await browser.newContext({ 
    storageState: getStorageStateByUrl(url)
  });
  const page = await context.newPage();

  // 监听测试完成事件，自动关闭上下文
  test.info().on('testDone', async () => {
    await context.close();
  });

  return { page, context };
}

这种方式最轻量化，不需要额外配置钩子，适合快速改造现有代码。

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