Playwright中storage state与dependency功能使用问题求助

产品A的登录认证是标签页隔离的，说明它依赖sessionStorage存储核心认证数据——sessionStorage本身就是标签页级别的存储，关闭标签页就会清空。而Playwright默认的storageState()方法仅保存cookies和localStorage，不会包含sessionStorage，这就是复用user.json对产品A无效的根本原因。

要解决这个问题，需要在登录环节额外保存sessionStorage内容，后续测试时再手动将其注入到新标签页中。结合dependency功能的具体实现步骤如下：

1. 修改登录依赖脚本，同时保存完整认证状态 #

// 登录依赖脚本（示例：login.setup.js）
import { test as setup } from '@playwright/test';
import fs from 'fs/promises';

const authFile = 'user.json';

setup('完成登录并保存完整状态', async ({ page }) => {
  // 执行产品A的登录流程
  await page.goto('/login');
  await page.fill('#username', '你的账号');
  await page.fill('#password', '你的密码');
  await page.click('#submit-btn');
  await page.waitForURL('/home');

  // 获取默认的storageState（包含cookies和localStorage）
  const baseState = await page.context().storageState();
  // 手动提取当前页面的sessionStorage
  const sessionData = await page.evaluate(() => JSON.stringify(window.sessionStorage));
  
  // 合并所有状态并写入文件
  const fullAuthState = {
    ...baseState,
    sessionStorage: JSON.parse(sessionData)
  };
  await fs.writeFile(authFile, JSON.stringify(fullAuthState));
});

2. 在测试用例中加载状态并注入sessionStorage #

// 测试用例脚本
import { test } from '@playwright/test';
import fs from 'fs/promises';

test.use({ storageState: 'user.json' });

test('产品A页面操作测试', async ({ page }) => {
  await page.goto('/home');
  
  // 读取保存的完整认证状态
  const fullAuthState = JSON.parse(await fs.readFile('user.json', 'utf-8'));
  // 手动注入sessionStorage到当前页面
  await page.evaluate((sessionData) => {
    Object.entries(sessionData).forEach(([key, value]) => {
      window.sessionStorage.setItem(key, value);
    });
  }, fullAuthState.sessionStorage);
  
  // 刷新页面让sessionStorage生效
  await page.reload();
  
  // 后续正常执行测试步骤即可
  await page.click('#function-btn');
  // ...其他测试逻辑
});

补充提示 #

• 如果产品A还用到了其他标签页隔离的存储（比如IndexedDB），可以用同样的思路：登录时通过page.evaluate()提取数据，测试时再注入。
• 若测试中需要打开新标签页，要在新标签页加载完成后，重复执行sessionStorage的注入步骤，因为sessionStorage无法跨标签页共享。

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