Playwright测试无法加载本地URL问题求助

我遇到的问题是：Playwright测试无法加载本地应用首页http://localhost:3000/，但本地Web服务器在常规Chrome浏览器、Postman中均可正常访问，其他Playwright接口测试也能正常运行。测试中页面始终处于空白加载状态，无法渲染内容和交互元素。我有Cypress使用经验，但对TypeScript尚不熟悉，在Playwright基础配置上遇到阻碍。

相关测试代码与配置如下：

测试代码 example.spec.ts #

import { test, expect, chromium } from '@playwright/test';

test('Visit Pages', async ({ page }) => {

  await page.goto('https://playwright.dev/') -- 此链接可正常加载
  await page.goto('http://localhost:3000/'); -- 无法加载

  // 以下写法同样无效
  await page.goto('http://localhost:3000/', {
    waitUntil: 'domcontentloaded',
    timeout: 60000,
  });
  ...
}

配置文件 playwright.config.ts #

import { defineConfig, devices } from '@playwright/test'

export default defineConfig({
  testDir: 'tests',
  // 已添加headless: false，但无变化
  headless: false,
  fullyParallel: true,
  forbidOnly: !!process.env.CI,
  retries: process.env.CI ? 2 : 0,
  workers: process.env.CI ? 1 : undefined,
  reporter: 'html',
  use: {
    baseURL: 'http://localhost:3000',
    storageState: './state.json',
    trace: 'on-first-retry',
  },
  // 配置主流浏览器测试项目
  projects: [
    {
      name: 'chromium',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'Google Chrome',
      use: { ...devices['Desktop Chrome'], channel: 'chrome' },
    },
  ],
  // 测试前启动本地开发服务器
  webServer: {
    command: 'yarn dev',
    url: 'http://localhost:3000',
    reuseExistingServer: true,
  },
})

排查与解决步骤 #

1. 检查storageState的影响
   配置中使用了storageState: './state.json'，如果这个文件里的登录状态或Cookie存在异常，可能导致页面加载失败。可以先注释掉这一行，重新运行测试，验证是否能正常加载页面。

2. 优化webServer的等待逻辑
   虽然配置了webServer自动启动服务，但可能服务器启动后未完全就绪就开始执行测试。可以修改配置增加等待时间或自定义就绪检查：

   webServer: {
     command: 'yarn dev',
     url: 'http://localhost:3000',
     reuseExistingServer: !process.env.CI,
     // 延长服务启动超时时间
     timeout: 120000,
     // 等待指定接口返回成功响应后再开始测试
     waitForHTTPResponse: {
       url: 'http://localhost:3000',
       timeout: 60000,
     },
   },
   

3. 简化测试代码，逐步排查
   去掉多余的页面跳转调用，聚焦本地页面加载，同时增加元素等待逻辑（而非仅等待DOM加载）：

   test('Visit Local Page', async ({ page }) => {
     // 清除上下文缓存和权限，确保干净环境
     await page.context().clearCookies();
     await page.context().clearPermissions();
     // 利用baseURL简化地址调用
     await page.goto('/');
     // 等待页面主体可见，验证渲染成功
     await expect(page.locator('body')).toBeVisible();
     // 或者等待首页特定元素，比如标题
     await expect(page.getByRole('heading', { name: '你的首页标题' })).toBeVisible();
   });
   

4. 查看Playwright Trace日志
   配置中开启了trace: 'on-first-retry'，测试失败后打开生成的HTML报告，查看Trace记录——里面包含页面加载的网络请求、DOM变化、控制台日志等细节，能快速定位是网络问题还是页面渲染异常。

5. 使用全新浏览器上下文测试
   Playwright默认给每个测试分配独立上下文，如果现有上下文存在状态污染，可手动创建全新上下文测试：

   test('Visit Local Page with fresh context', async ({ browser }) => {
     const context = await browser.newContext();
     const page = await context.newPage();
     await page.goto('http://localhost:3000/');
     await expect(page.locator('body')).toBeVisible();
     await context.close();
   });
   

内容的提问来源于stack exchange，提问作者E.C