Playwright UI模式开发时能否保留登录状态？

我已按照Playwright认证文档配置项目，实现登录后存储状态且后续测试运行正常。现在需要解决的问题是：能否在开发周期中维持登录状态？希望打开Playwright UI后仅执行一次登录，之后编写测试用例时重跑单个测试无需再次登录。

当前配置代码 #

auth.setup.ts #

import {test as setup, expect } from '@playwright/test';

const sessionFile = 'playwright/.auth/session.json';

setup('login', async ({ page }) => {
    await page.goto('/');
    // 登录步骤...

    await page.context().storageState({ path: sessionFile });
});

playwright.config.ts #

...
  projects: [
    {
      name: 'setup',
      testMatch: /.*\.setup\.ts/
    },
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
      dependencies: ['setup'],
    },
  ]
...

my.spec.ts #

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

test.use({ storageState: 'playwright/.auth/session.json' });

test('should pass', async ({ page }) => {
  await page.goto('/some/page');
  ...
});

解决方案 #

完全可以实现这个需求，只需修改auth.setup.ts脚本，添加登录状态文件的存在性检查：

修改后的auth.setup.ts #

import { test as setup, expect } from '@playwright/test';
import { existsSync } from 'fs';

const sessionFile = 'playwright/.auth/session.json';

setup('login', async ({ page }) => {
  // 检测到已存在登录状态文件时，直接跳过登录流程
  if (existsSync(sessionFile)) {
    console.log('登录状态文件已存在，跳过登录');
    return;
  }

  await page.goto('/');
  // 登录步骤...

  await page.context().storageState({ path: sessionFile });
});

运行逻辑 #

• 首次启动Playwright UI或执行测试时，session.json不存在，setup脚本会完整执行登录流程并生成状态文件。
• 后续重跑单个测试、修改测试代码后重新运行时，session.json已存在，setup脚本直接跳过登录，测试复用已有登录状态。
• 若登录状态过期，删除playwright/.auth/session.json文件，重新运行测试或启动Playwright UI，即可重新执行登录生成新的状态文件。

保持playwright.config.ts中测试项目对setup项目的依赖配置不变，Playwright会自动处理setup的执行逻辑。

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