Playwright中能否与IndexedDB交互 调用时报未定义错误如何处理

报错原因 #

你遇到的indexedDB is not defined、window is not defined报错，是因为直接在Node.js环境下的Playwright测试脚本中调用了浏览器端的全局对象。Playwright的测试代码运行在Node.js侧，本身不内置浏览器的window、indexedDB等全局API，所有和浏览器上下文相关的操作都需要通过page.evaluate()系列API注入到页面环境中执行。

Playwright完全支持与IndexedDB交互，你可以通过注入脚本的方式读取、写入IndexedDB数据，支撑UI测试的场景需求。

实现示例 #

读取IndexedDB数据 #

// Playwright 测试脚本（Node.js 侧执行）
test('读取IndexedDB测试数据', async ({ page }) => {
  // 必须先跳转到对应域名的页面，IndexedDB按域名同源隔离
  await page.goto('你的测试页面访问地址');

  // 注入代码到浏览器上下文执行，读取IndexedDB
  const targetData = await page.evaluate(async () => {
    return new Promise((resolve, reject) => {
      // 这里的代码运行在浏览器环境，可正常访问window、indexedDB
      const dbOpenRequest = window.indexedDB.open('你的数据库名', 1);

      dbOpenRequest.onsuccess = () => {
        const db = dbOpenRequest.result;
        const transaction = db.transaction('你的存储对象名', 'readonly');
        const store = transaction.objectStore('你的存储对象名');
        const queryRequest = store.get('你要查询的数据键名');

        queryRequest.onsuccess = () => resolve(queryRequest.result);
        queryRequest.onerror = () => reject(queryRequest.error);
      };

      dbOpenRequest.onerror = () => reject(dbOpenRequest.error);
    });
  });

  // 拿到数据后即可执行后续UI测试逻辑
  console.log('读取到的IndexedDB数据：', targetData);
});

写入预置测试数据到IndexedDB #

如果你需要提前写入测试数据做用例前置准备，可以参考以下写法：

// 要写入的预置测试数据
const preTestData = {
  id: 'test_001',
  content: '测试用数据',
  expired: false
};

await page.evaluate(async (data) => {
  return new Promise((resolve, reject) => {
    const dbOpenRequest = indexedDB.open('你的数据库名', 1);
    // 如果库/存储对象不存在，先做初始化
    dbOpenRequest.onupgradeneeded = () => {
      const db = dbOpenRequest.result;
      if (!db.objectStoreNames.contains('你的存储对象名')) {
        db.createObjectStore('你的存储对象名', { keyPath: 'id' });
      }
    };

    dbOpenRequest.onsuccess = () => {
      const db = dbOpenRequest.result;
      const transaction = db.transaction('你的存储对象名', 'readwrite');
      const store = transaction.objectStore('你的存储对象名');
      const writeRequest = store.put(data);

      writeRequest.onsuccess = () => resolve(true);
      writeRequest.onerror = () => reject(writeRequest.error);
    };

    dbOpenRequest.onerror = () => reject(dbOpenRequest.error);
  });
}, preTestData); // 外置数据可通过参数传入，会自动序列化后传到浏览器上下文

注意事项 #

• 必须先跳转到对应域名的页面后再操作IndexedDB，跨域场景下无法访问其他域名的IndexedDB存储
• page.evaluate()的返回值必须是可JSON序列化的类型，不可返回函数、Promise等无法序列化的对象
• 如果操作的IndexedDB有版本差异，需要在indexedDB.open方法中传入正确的版本号，同时做好onupgradeneeded事件的版本兼容逻辑

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