Docker资源在Playwright测试中不显示，但常规浏览器可正常加载求助

以下是排查和解决的具体步骤：

1. 确保测试等待元素加载完成 #

Playwright不会像手动浏览器那样自动等待所有资源加载，直接断言元素存在会失败。替换固定延迟（如setTimeout）为Playwright内置的等待方法：

// 等待元素出现，最多等待5秒
await page.waitForSelector('.log-entry', { timeout: 5000 });
// 再执行断言
const logEntries = await page.locator('.log-entry').count();
expect(logEntries).toBeGreaterThan(0);

2. 禁用Playwright测试缓存 #

测试可能缓存了未加载Docker资源的旧页面，强制禁用缓存：

• 在playwright.config.ts的use配置中添加：

  use: {
    // 其他配置...
    storageState: null, // 不保留缓存状态
    extraHTTPHeaders: {
      'Cache-Control': 'no-cache'
    }
  }
  

• 或者在单个测试中添加路由拦截：

  await page.route('**/*', route => {
    route.continue({
      headers: { ...route.request().headers(), 'Cache-Control': 'no-cache' }
    });
  });
  

3. 验证Docker容器的网络绑定 #

确保容器端口绑定到所有网卡（而非仅本地回环），避免Playwright因网络隔离无法访问：

• 停止现有容器，重新启动时指定端口绑定为：

  docker run -p 0.0.0.0:3001:3001 your-image-name
  

• 用docker ps检查端口列，确认是0.0.0.0:3001->xxxx/tcp格式。

4. 检查资源请求是否正常 #

在测试中添加网络日志，查看Docker资源的请求状态：

// 打印所有请求URL和状态码
page.on('response', res => {
  console.log(`${res.status()} ${res.url()}`);
});

运行测试后，检查是否有Docker资源的请求返回404/500错误，若有则排查代理或资源路径配置：

• 确认webpack.config.js中的代理规则正确，比如：

  devServer: {
    proxy: {
      '/api': {
        target: 'http://localhost:xxxx', // Docker服务的实际端口
        changeOrigin: true
      }
    }
  }
  

5. 用有头模式验证页面状态 #

运行测试时启用有头浏览器，直观查看Playwright加载的页面：

npx playwright test --headed

如果页面中确实没有目标元素，检查：

• 元素是否在iframe中，若有则需切换到iframe：

  const frame = page.frameLocator('#iframe-id');
  await frame.waitForSelector('.log-entry');
  

• 选择器是否正确，避免依赖动态生成的class/id，改用稳定的属性（如data-testid）：

  <div class="log-entry" data-testid="log-item">...</div>
  

  测试中使用：

  await page.waitForSelector('[data-testid="log-item"]');
  

内容的提问来源于stack exchange，提问作者Adaris-au