Playwright中page.evaluate获取localStorage返回空数组求助

可能的原因 #

• 时机不匹配：登录操作完成后，页面可能还未完成localStorage的写入，或者页面发生了导航跳转，此时执行page.evaluate的上下文还是登录前的页面，自然拿不到最新的存储数据。
• 上下文错误：如果登录操作在新标签页/弹窗中完成，当前page对象对应的仍是原页面，无法获取新页面的localStorage内容。

正确获取localStorage的方法 #

1. 确保页面状态稳定后再获取 #

在执行evaluate前，等待登录成功后的标志性元素加载完成，确认localStorage已被写入：

await test.step('Check correct permissions are assigned ', async() => {
    // 等待登录后的用户头像/导航栏等元素出现，确保页面状态稳定
    await page.locator('#user-profile').waitFor();
    const permissions = await page.evaluate(() => Object.entries(localStorage));
    console.log(permissions);
});

2. 使用Playwright原生storageState API #

Playwright提供了更可靠的context.storageState()方法，可直接获取当前上下文的所有存储数据（包括localStorage、sessionStorage、Cookie等）：

await test.step('Check correct permissions are assigned ', async() => {
    const storage = await page.context().storageState();
    // 提取localStorage数据并转换为键值对数组
    const localStorageEntries = storage.origins[0].localStorage.map(item => [item.name, item.value]);
    console.log(localStorageEntries);
});

3. 切换到正确的页面上下文 #

如果登录操作打开了新窗口，需要先切换到新窗口的page对象：

await test.step(`Log into platform as a user with all roles`, async() => {
    // 监听新页面打开事件，同步执行登录操作
    const [newPage] = await Promise.all([
        page.context().waitForEvent('page'),
        platform.login(process.env.allRoles, process.env.password)
    ]);
    // 等待新页面加载完成，更新page对象
    await newPage.waitForLoadState();
    page = newPage;
});

测试断言示例 #

拿到localStorage数据后，可直接进行断言验证：

await test.step('Check correct permissions are assigned ', async() => {
    await page.locator('#user-profile').waitFor();
    const localStorageEntries = await page.evaluate(() => Object.entries(localStorage));
    const permissionsMap = new Map(localStorageEntries);
    
    // 断言指定权限键存在且值符合预期
    expect(permissionsMap.has('user_permissions')).toBeTruthy();
    expect(permissionsMap.get('user_permissions')).toContain('admin_access');
});

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