Playwright测试失败：React组件Props在测试UI与Chrome中值不一致

核心问题 #

你遇到的两种环境差异，本质是前端状态更新的数据来源不一致，加上测试执行时机的影响：

• 正常Chrome浏览器操作时，新增博客后大概率触发了全局博客列表的重新拉取（调用了带populate('user')的GET接口），最终组件拿到的是包含完整用户信息的博客对象。
• Playwright测试中，操作速度远快于手动操作，新增博客后你立刻断言组件Props，但此时前端状态里的博客还是POST接口返回的未填充版本（仅含user ID），后续的GET同步请求还没完成，导致断言失败。

另外，后端POST接口返回未执行populate('user')的对象本身就是逻辑漏洞——前端依赖完整用户信息渲染，POST接口应和GET接口保持数据格式一致。

三种解决思路 #

1. 从后端根源修复（推荐）

修改blog-backend/blogs.js的POST接口，在保存博客后执行populate('user')再返回：

router.post('/', async (request, response) => {
  const blog = new Blog(request.body)
  const savedBlog = await blog.save()
  // 新增populate操作，返回完整用户信息
  const populatedBlog = await Blog.findById(savedBlog._id).populate('user')
  response.json(populatedBlog)
})

这样前端新增博客后直接拿到完整数据，无论手动还是自动化测试环境都能正常渲染。

2. 前端调整状态更新逻辑

如果暂时无法修改后端，前端App.jsx新增博客后，不要直接将returnedBlog加入状态，而是重新调用GET接口获取完整列表：

const addBlog = async (blogData) => {
  await blogService.create(blogData)
  // 替换为拉取完整博客列表
  const updatedBlogs = await blogService.getAll()
  setBlogs(updatedBlogs)
}

确保状态里的博客数据都是经过populate处理的完整对象。

3. 测试中等待数据同步

如果以上两种方案都不采用，需在Playwright测试中等待数据完成同步后再断言：

test('新增博客后显示正确作者信息和删除按钮', async ({ page }) => {
  // 执行新增博客的操作步骤...
  // 等待目标文本出现，确保数据已同步
  await page.waitForText('Added by: First Last')
  // 再断言删除按钮可见
  await expect(page.getByRole('button', { name: 'remove' })).toBeVisible()
})

这种方案属于适配现有逻辑，无法从根源解决数据格式不一致的问题。

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