Playwright WebServer动态端口配置问题：端口未解析致测试失败

你的问题核心在于getPort返回的是Promise对象，直接拼接字符串时会把Promise转成[object Promise]，导致最终端口显示为NaN。Playwright支持配置文件导出一个异步函数，这样就能在内部等待端口解析完成后再生成配置。

修改后的playwright.config.ts代码如下：

import { defineConfig, devices } from '@playwright/test';
import { getPort } from 'get-port-please';

// 导出异步函数，Playwright会自动等待其执行完成
export default async () => {
    // 等待端口获取完成
    const webserverPort = await getPort({ random: true });
    const webserverUrl = `http://localhost:${webserverPort}`;

    return defineConfig({
        timeout: 100000,
        testDir: 'tests',
      
        fullyParallel: false,
       
        forbidOnly: !!process.env.CI,
        retries: 0,
        workers: 1,
        reporter: [],

        use: {
            ignoreHTTPSErrors: true,
            video: 'on-first-retry',
            baseURL: webserverUrl,
            locale: 'en',
        },

        projects: [
            {
                name: 'chromium',
                use: { ...devices['Desktop Chrome'] },
            },
        ],

        webServer: {
            command: `npm run start -- --port ${webserverPort}`,
            url: webserverUrl,
            reuseExistingServer: !process.env.CI,
        },
    });
};

关键改动说明：

• 将原来直接导出配置对象改为导出异步函数，Playwright会自动处理这个异步逻辑，等待端口获取完成后再加载配置
• 在函数内部使用await获取端口，确保拿到的是实际的数字端口而非Promise对象
• 所有依赖端口的配置项（baseURL、webServer的command和url）都基于已解析的端口构建

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