[Question] Error: Timed out waiting 60000ms from config.webServer.

[shinokada]

I have playwright.config.ts as following with SvelteKit:

import type { PlaywrightTestConfig } from '@playwright/test';

const config: PlaywrightTestConfig = {
	fullyParallel: true,
	webServer: {
		command: 'npm run build && npm run preview',
		port: 4173
	}
};

export default config;

I got an error Error: Timed out waiting 60000ms from config.webServer., so I set timeout with different values, but I keep getting the same error.

I tried globalTimeout but the it returns the same error.

How to solve this error?

[yury-s]

Apparently your server doesn't start or listens to a different port (not 4173). What does npm run build && npm run preview do, can you share the code?

[shinokada]

"scripts": {
		"dev": "vite dev --host --port 8000",
...
		"build": "vite build",
		"package": "svelte-package",
		"preview": "vite preview",
		"test": "playwright test",
...
	},

[yury-s]

What is the output of npm run build && npm run preview if you run it in the terminal? You can see it by running playwright with DEBUG=pw:webserver environment variable, it should give you an idea where the server is stuck.

[yury-s]

See also this page with more details on launching the server and troubleshooting.

[yury-s]

We need more information to act on this report. Please file a new one and link to this issue when you get back to it!

[EugenGedroyc]

Same problem with Vue. In Vite config:

server: {
   port: 5174,
 },

I fixed it port in webserver

[microcipcip]

I also had this problem. I fixed it by getting the port dinamically:

import net, { AddressInfo } from 'net';

export default defineConfig({
  webServer: await getWebserverOptions(),
});

async function getWebserverOptions() {
  // Find a free port for our mock server
  const getFreePort = (): Promise<number> => {
    return new Promise((resolve, reject) => {
      const srv = net.createServer();
      srv.listen(0, () => {
        const freePort = (srv.address() as AddressInfo).port;
        srv.close(err => {
          if (err) reject(err);
          return resolve(freePort);
        });
      });
    });
  };

  // Command used to build and serve an app so that it
  // can then be consumed by Playwright tests
  const getWebServerCmd = (port: number): string => {
    const build = `npm run build ${appName}`;
    const serve = `npm run preview ${appName} -- --port ${port}`;

    return `${build} && ${serve}`;
  };

  const port = await getFreePort();

  return {
    command: getWebServerCmd(port),
    timeout: 30 * 1000,
    port,
    reuseExistingServer: !process.env.CI,
  };
}

[blindfish3]

For the benefit of anyone else experiencing a timeout: it looks like there are multiple possible causes here; but in general it's likely to be a configuration issue. First check that npm run build && npm run preview runs successfully on the command line and check the reported URL and port.

In playwright.config.ts ensure that webServer.port matches the reported port (for me explicitly setting webServer.url still resulted in a timeout).

If you're running with https then you'll need to add the following to your playwright.config:

const config: PlaywrightTestConfig = {
    // ... ,
    use: {
      ignoreHTTPSErrors: true, // in case your certificate isn't properly signed
      baseURL: 'https://localhost:4173',
    },
};

Server configuration in vite.config.ts is relevant here - e.g. if you override the default preview port. Note that if you set server.https: true then preview will also use https (even if you explicitly preview.https: false).

[cesarm-meyersound]

Had the same issue. Fixed it by using localhost instead of 127.0.0.1:

  webServer: {
    command: 'pnpm preview',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI
  }

[andrewedstrom]

Thanks @cesarm-meyersound, changing to localhost is what worked for me!

[mklueh]

Had the same issue. Fixed it by using localhost instead of 127.0.0.1:

  webServer: {
    command: 'pnpm preview',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI
  }

I have the problem despite using localhost

[matths]

Hi @mklueh,

I had a similar / or maybe the same problem. It was because the webServer command, in your case pnpm preview might include a build step which indeed exceeds the timeout. So the solution for us was to raise the timeout. To do so, you have to specify it in the right place:

  webServer: {
    timeout: 2 * 60 * 1000,
    command: 'pnpm preview',
    url: 'http://localhost:5173',
    reuseExistingServer: !process.env.CI
  }

Hope this helps!
Cheers,
Matthias

[kamerat]

I also used sveltekit. For me none of the above worked. However, switching out url with port made it work:

  const port = process.env.CI ? 4173 : 3000;
  //....

  webServer: {
    command: process.env.CI ? 'npm run preview' : 'npm run dev',
    port: port,
    reuseExistingServer: !process.env.CI,
  },

Also, stdout:'pipe' option may give some usefull hints if you're still stuck.

[huehnerlady]

Hi,

We has this problem now and then but since updating to Playwright 1.48.1 yesterday we can hardly run the service anymore...

Our config file:

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

export default defineConfig({
  // Look for test files in the "tests" directory, relative to this configuration file.
  testDir: 'e2e-tests',

  // Run all tests in parallel.
  fullyParallel: true,

  // Fail the build on CI if you accidentally left test.only in the source code.
  forbidOnly: !!process.env['CI'],

  // Retry on CI only.
  retries: process.env['CI'] ? 2 : 0,

  // Opt out of parallel tests on CI.
  workers: process.env['CI'] ? 1 : undefined,

  // Reporter to use
  reporter: [
    ['list'], // You can combine multiple reporters
    ['html', { outputFile: './playwright-report/report.html' }],
    ['json', { outputFile: './playwright-report/report.json' }],
    ['junit', { outputFile: './playwright-report/report.xml' }],
    ['playwright-ctrf-json-reporter', {}],
  ],

  use: {
    // Base URL to use in actions like `await page.goto('/')`.
    baseURL: 'http://localhost:4200/',

    // Collect trace when retrying the failed test.
    trace: 'on-first-retry',
  },
  // Configure projects for major browsers.
  projects: [
    {
      name: 'Desktop Chrome',
      use: { ...devices['Desktop Chrome'] },
    },
    {
      name: 'Mobile Safari',
      use: {
        ...devices['iPhone 12 Mini'],
      },
    },
  ],
  // Run your local dev server before starting the tests.
  webServer: {
    command: 'npm run start',
    url: 'http://localhost:4200/',
    reuseExistingServer: !process.env['CI'],
    timeout: 120000,
  },
});

locally it all works fine, but when we run it in a github action (run on the github provided runners with os=ubuntu) we get the error:

> playwright test --fail-on-flaky-tests
[WebServer] Prebundling has been configured but will not be used because caching has been disabled.
[WebServer] Prebundling has been configured but will not be used because caching has been disabled.
Error: Timed out waiting 60000ms from config.webServer.
playwright-ctrf-json-reporter: successfully written ctrf json to ctrf/ctrf-report.json
Error: Process completed with exit code 1.

Any idea what we can do?

[LucaProvencal]

I also used sveltekit. For me none of the above worked. However, switching out url with port made it work:

const port = process.env.CI ? 4173 : 3000;
//....

webServer: {
command: process.env.CI ? 'npm run preview' : 'npm run dev',
port: port,
reuseExistingServer: !process.env.CI,
},
Also, stdout:'pipe' option may give some usefull hints if you're still stuck.

Using port instead of url worked for me! Not sure why the docs don't mention that. Thanks @kamerat !