如何在WDIO中使用localStorage.setItem()？解决权限访问报错

核心问题分析 #

你遇到的DOMException错误，主要来自三个常见原因：页面未加载完成导致无法访问window对象、execute命令中变量传递错误、浏览器隐私/安全限制禁用了localStorage。

具体解决方案 #

1. 先导航到目标页面，确保页面就绪 #

localStorage属于当前页面的同源存储，必须先加载目标页面后才能访问。执行存储操作前，先导航到测试页面，必要时等待页面完全就绪：

// 导航到你的测试页面
browser.url('https://your-test-page.com');
// 等待页面加载完成（可选但推荐）
browser.waitUntil(() => browser.execute(() => document.readyState === 'complete'));

2. 正确传递变量到execute命令 #

你之前的写法中，key和value是作为字符串字面量存在于JS代码中，而非外部传入的变量，导致执行时找不到对应值。正确做法是通过execute的第二个及后续参数传递变量：

const storageKey = 'user_token';
const storageValue = 'abc123xyz';

// 将外部变量作为参数传入execute回调函数
browser.execute((key, value) => {
  window.localStorage.setItem(key, value);
}, storageKey, storageValue);

3. 调整浏览器启动参数，解除存储限制 #

如果测试页面是file://协议，或者浏览器启用了严格隐私设置，会禁止访问localStorage。可以在WDIO配置文件的capabilities中添加启动参数解除限制（仅用于测试环境）：

// wdio.conf.js中的capabilities配置
capabilities: [
  {
    browserName: 'chrome',
    'goog:chromeOptions': {
      args: [
        '--disable-web-security',
        '--allow-file-access-from-files',
        '--unsafely-treat-insecure-origin-as-secure=http://your-test-page.com' // 针对非安全HTTP源的配置
      ]
    }
  },
  {
    browserName: 'msedge',
    'ms:edgeOptions': {
      args: [
        '--disable-web-security',
        '--allow-file-access-from-files'
      ]
    }
  }
]

4. 验证localStorage设置结果 #

可以用以下代码确认存储是否成功：

const storedValue = browser.execute((key) => {
  return window.localStorage.getItem(key);
}, storageKey);
console.log('已存储的值：', storedValue);

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