Playwright复用登录状态时storageState.json为空问题求助

核心问题：登录未完成就保存状态 #

你的全局配置文件存在语法错误，导致代码未等待登录流程完成就执行了状态保存操作，最终生成空的storageState.json：

await expect(page.locator('[data-testid="welcome"]')).toBeVisible

这里的toBeVisible是Playwright断言方法，必须加括号调用（.toBeVisible()），否则不会触发等待逻辑——代码会直接跳过断言往下执行，此时登录请求可能还未完成，Cookie等登录状态还未写入上下文，自然无法生成有效状态文件。

分步修复方案 #

1. 修正断言语法
   将错误的断言语句改为：

   await expect(page.locator('[data-testid="welcome"]')).toBeVisible();
   

   这会强制代码等待欢迎元素出现，确保登录流程完全结束。

2. 添加资源关闭操作
   保存状态后需关闭浏览器，确保状态数据被正确写入文件：

   await page.context().storageState({ path: 'storageState.json'});
   // 新增关闭浏览器操作
   await browser.close();
   

3. 使用绝对路径避免文件位置异常
   相对路径可能导致状态文件生成在非预期目录，建议用Node.js的path模块生成绝对路径：

   import { chromium, expect } from "@playwright/test";
   import path from "path";
   
   async function globalConfig() {
       const browser = await chromium.launch();
       const page = await browser.newPage();
       await page.goto('https://qacart-todo.herokuapp.com/login');
       await page.locator("#login").fill("hatem@example.com");
       await page.locator('//input[@data-testid="password"]').fill("123456");
       await page.locator('button:has-text("login")').click();
       await expect(page.locator('[data-testid="welcome"]')).toBeVisible();
       // 使用绝对路径指定状态文件位置
       await page.context().storageState({ 
           path: path.resolve(__dirname, '../storageState.json') 
       });
       await browser.close();
   }
   
   export default globalConfig;
   

4. 启用测试用例的状态复用
   你的测试用例注释了状态复用配置，同时保留了重复登录的beforeEach，需调整如下：

   import { test, expect } from '@playwright/test';
   import path from "path";
   
   test.describe("todo page test cases", ()=> {
     // 启用状态复用
     test.use({
       storageState: path.resolve(__dirname, '../storageState.json') 
     })
     
     // 修改beforeEach，直接跳转到主页无需重复登录
     test.beforeEach(async({page})=> {
         await page.goto('https://qacart-todo.herokuapp.com/');
     })
   
     test("mark a todo as completed", async({page}) => {
         await page.locator('[data-testid="add"]').click()
         await page.locator('[data-testid="new-todo"]').fill('My First Automation To DO')
         await page.locator('[data-testid="submit-newTask"]').click()
         await page.locator('[data-testid="complete-task"]').nth(0).click()
         await expect(page.locator('[data-testid="todo-item"]').nth(0)).toHaveCSS('background-color', 'rgb(33, 76, 97)')
       })
       test("welcome message displayed", async({page}) => {
         await expect(page.locator('[data-testid="welcome"]')).toBeVisible()      
         })
   })
   

额外检查项 #

• 确认playwright.config.ts中globalSetup的文件路径与实际文件位置匹配
• 运行测试前可单独执行全局配置文件，验证是否生成了非空的storageState.json

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