Playwright测试Angular应用设置sessionStorage遇权限拒绝问题

错误原因 #

出现Failed to read the 'sessionStorage' property from 'Window': Access is denied for this document错误，核心在于sessionStorage受同源策略限制：如果调用sessionStorage时页面处于about:blank或未导航到目标Angular应用的同源域名，浏览器会因无有效源而拒绝访问。另外你原代码还存在一个问题：Node.js上下文的data变量无法直接在浏览器上下文的page.evaluate回调中访问，需要显式传递参数。

正确实现方式 #

方式1：先导航到应用页面再设置 #

确保页面已加载到你的Angular应用域名后，再执行sessionStorage设置操作，同时正确传递参数：

// 先导航到Angular应用的目标页面（比如首页）
await page.goto('http://localhost:4200');

const data = { ssoUser : { userId: 'abc' } };
// 将Node上下文的data作为参数传入浏览器上下文的回调
await page.evaluate((storageData) => {
  window.sessionStorage.setItem('USER.SSO', JSON.stringify(storageData));
}, data);

方式2：页面初始化前设置（适合初始化时就读取sessionStorage的场景） #

如果你的Angular应用在初始化阶段就会读取sessionStorage，可以用page.addInitScript在页面脚本执行前注入设置逻辑，确保存储在应用启动前已存在：

const data = { ssoUser : { userId: 'abc' } };
// 添加初始化脚本，在页面加载前完成sessionStorage设置
await page.addInitScript((storageData) => {
  window.sessionStorage.setItem('USER.SSO', JSON.stringify(storageData));
}, data);

// 导航到Angular应用
await page.goto('http://localhost:4200');

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