如何为Playwright不同测试用例/文件配置不同storageState

一、先准备多份storageState文件 #

要实现不同用例/文件用不同状态，首先得生成对应不同用户（或不同登录状态）的storageState文件。可以写一个单独的脚本生成：

// generate-storage.ts
import { test } from '@playwright/test';

test('生成普通用户状态', async ({ browser }) => {
  const page = await browser.newPage();
  await page.goto('/login');
  // 填入普通用户账号密码登录
  await page.locator('#email').fill('user1@example.com');
  await page.locator('#password').fill('user1pass');
  await page.locator('button[type="submit"]').click();
  await page.waitForURL('/dashboard');
  // 保存状态到文件
  await page.context().storageState({ path: './storage/user1.json' });
  await page.close();
});

test('生成管理员用户状态', async ({ browser }) => {
  const page = await browser.newPage();
  await page.goto('/login');
  await page.locator('#email').fill('admin@example.com');
  await page.locator('#password').fill('adminpass');
  await page.locator('button[type="submit"]').click();
  await page.waitForURL('/admin');
  await page.context().storageState({ path: './storage/admin.json' });
  await page.close();
});

运行脚本生成文件：npx playwright test generate-storage.ts --headed

二、同一个测试文件内不同用例使用不同storageState #

直接在单个测试用例（或describe块）上用test.use()覆盖全局配置：

比如你的测试文件可以改成这样：

import { expect, test } from '@playwright/test'
import { LoginPage } from '../../pages/marketplace/login.page'
import { loginData } from '../../test-data/login.data'

test.describe('Marketplace 功能测试', () => {
  let loginPage: LoginPage

  // 测试登录功能：禁用全局storageState，从头执行登录流程
  test('用户使用PC端合法账号登录', async ({ page }) => {
    test.use({ storageState: undefined });
    const expectedString = 'xxx'
    loginPage = new LoginPage(page)
  
    await loginPage.login({
      userEmail: loginData.userEmail,
      userPassword: loginData.userPassword,
    })

    await expect(loginPage.myAccount).toHaveText(expectedString)
  })

  // 测试普通用户的账户功能：直接用预生成的普通用户状态
  test('普通用户查看个人订单', async ({ page }) => {
    test.use({ storageState: './storage/user1.json' });
    // 无需登录，直接进入页面操作
    await page.goto('/my-orders');
    await expect(page.locator('.order-list')).toBeVisible();
  })

  // 测试管理员功能：用管理员状态
  test('管理员查看用户列表', async ({ page }) => {
    test.use({ storageState: './storage/admin.json' });
    await page.goto('/admin/users');
    await expect(page.locator('.user-table')).toHaveCount(10);
  })
})

如果某个describe块下的所有用例共用同一个storageState，也可以在describe里统一设置：

test.describe('管理员功能集', () => {
  test.use({ storageState: './storage/admin.json' });

  test('管理员编辑用户', async ({ page }) => {
    // ... 用例代码
  })

  test('管理员发布公告', async ({ page }) => {
    // ... 用例代码
  })
})

三、不同测试文件间切换storageState #

有两种常用实现方式：

方式1：在测试文件顶部全局设置该文件的storageState #

比如在admin-tests.spec.ts中：

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

// 该文件所有用例默认使用管理员状态
test.use({ storageState: './storage/admin.json' });

test.describe('管理员后台测试', () => {
  test('查看仪表盘数据', async ({ page }) => {
    await page.goto('/admin/dashboard');
    // ... 断言逻辑
  })
})

在user-tests.spec.ts中：

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

test.use({ storageState: './storage/user1.json' });

test.describe('普通用户前台测试', () => {
  test('修改个人资料', async ({ page }) => {
    await page.goto('/profile/edit');
    // ... 操作逻辑
  })
})

方式2：在playwright.config.ts中配置不同项目 #

如果测试角色或环境差异较大，可以配置多个项目，每个项目对应不同的storageState：

// playwright.config.ts
import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  projects: [
    {
      name: '普通用户测试',
      use: {
        ...devices['Desktop Chrome'],
        storageState: './storage/user1.json',
      },
    },
    {
      name: '管理员测试',
      use: {
        ...devices['Desktop Chrome'],
        storageState: './storage/admin.json',
      },
    },
    {
      name: '未登录状态测试',
      use: {
        ...devices['Desktop Chrome'],
        storageState: undefined, // 不使用任何登录状态
      },
    },
  ],
  // 其他全局配置
  trace: 'retain-on-failure',
  video: 'retain-on-failure',
});

运行时可指定项目：

# 只执行管理员测试项目
npx playwright test --project="管理员测试"

# 执行所有项目
npx playwright test

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