Playwright技术问题：无法将JSON中sessionStorage加载至浏览器上下文

解决方案 #

1. 修正sessionStorage的保存逻辑 #

当前代码把sessionStorage字符串化后又套了一层JSON，导致存储格式错误。改为直接提取sessionStorage的键值对对象保存：

import { test as setup } from "@playwright/test";
import path from "path";
import fs from "fs";
require("dotenv").config();

const authFile = path.join(__dirname, "auth.json");

setup("authenticate", async ({ page }) => {
  await page.goto(process.env.ROOT_URL + "/login");
  await page.locator("input[placeholder=Email]").fill(process.env.LOGIN);
  await page.locator("input[placeholder='Mot de passe']").fill(process.env.PASSWORD);
  
  await page.click("button[type=button]");
  await page.waitForURL(process.env.ROOT_URL + "/selectCompanies");

  // 提取sessionStorage的所有键值对
  const sessionStorageData = await page.evaluate(() => {
    const data = {};
    for (let i = 0; i < sessionStorage.length; i++) {
      const key = sessionStorage.key(i);
      data[key] = sessionStorage.getItem(key);
    }
    return data;
  });
  // 直接保存键值对对象
  fs.writeFileSync(authFile, JSON.stringify(sessionStorageData), "utf-8");
});

2. 在测试中手动注入sessionStorage #

Playwright的storageState不支持自动加载sessionStorage，必须在测试初始化时手动注入。在测试文件的beforeEach中添加逻辑：

import { test } from "@playwright/test";
import path from "path";
import fs from "fs";
require("dotenv").config();

// 指向保存的auth.json文件路径
const authFile = path.join(__dirname, "../setup/auth.json");

test.beforeEach(async ({ page }) => {
  // 读取保存的sessionStorage数据
  const sessionStorageData = JSON.parse(fs.readFileSync(authFile, "utf-8"));
  
  // 在页面初始化时注入sessionStorage
  await page.addInitScript((storage) => {
    Object.entries(storage).forEach(([key, value]) => {
      sessionStorage.setItem(key, value);
    });
  }, sessionStorageData);

  // 跳转到需要认证的页面
  await page.goto(process.env.ROOT_URL + "/selectCompanies");
});

// 示例测试用例
test("验证认证状态", async ({ page }) => {
  // 执行需要认证的操作，例如检查页面元素是否存在
  await page.locator("select[aria-label='选择公司']").waitFor();
});

3. 配置文件保持现有设置 #

你的配置中已经正确设置了setup项目依赖，无需额外修改，确保测试文件继承配置即可。

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