Playwright报错无法读取Window的localStorage属性，如何启动非无痕模式解决

1. Playwright启动普通非无痕模式的方法 #

Playwright默认启动的是无痕模式的临时浏览上下文，如果需要启动保留数据的普通模式，使用launchPersistentContext接口指定本地用户数据目录即可，示例代码如下：

const { chromium } = require('playwright');
// 传入自定义的用户数据存储路径即可启动普通非无痕模式
const browserContext = await chromium.launchPersistentContext(
  './chrome-user-data', // 可自定义路径，目录不存在会自动创建
  {
    headless: false // 按需配置是否开启无头模式
  }
);
const page = await browserContext.newPage();

Firefox、Webkit内核的浏览器启动逻辑一致，替换对应的内核导入即可。

2. localStorage访问报错问题修复 #

你遇到的Access is denied for this document报错，绝大多数场景不是无痕模式导致的，而是执行localStorage操作时，页面还未导航到对应站点，当前页面origin为about:blank，浏览器出于同源策略禁止操作本地存储。修复方案有两种：

方案一：先导航到目标站点再执行注入逻辑 #

在执行page.evaluate前先跳转到要操作localStorage的对应域名页面，保证origin匹配：

// 先跳转到目标站点
await page.goto('https://你要操作的站点域名.com');
// 再执行原有的localStorage注入代码
const rdlocalStorage = fs.readFileSync('localstorage.json','utf8');
const deserializedStorage = JSON.parse(rdlocalStorage);
console.log (deserializedStorage);
await page.evaluate((deserializedStorage)=>{
    for (const key in deserializedStorage){
        localStorage.setItem(key,deserializedStorage[key]);
    }
}, deserializedStorage);

方案二：使用Playwright官方内置的存储状态接口（更稳定） #

Playwright原生支持直接导入存储状态，无需手动写注入逻辑，适配性和稳定性更高：
首先将你的localstorage.json调整为Playwright要求的storageState格式：

{
  "origins": [
    {
      "origin": "https://你要操作的站点域名.com",
      "localStorage": [
        {"name": "你的存储key1", "value": "存储值1"},
        {"name": "你的存储key2", "value": "存储值2"}
      ]
    }
  ],
  "cookies": []
}

之后在创建上下文时直接加载即可：

const context = await browser.newContext({
  storageState: 'localstorage.json'
});
const page = await context.newPage();
// 打开对应站点后localStorage会自动注入完成

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