Using the webServer config with a Vite dev server?

[coreybyrum7]

Discussed in https://github.com/microsoft/playwright/discussions/18873

^{Originally posted by alexbjorlig November 17, 2022}
I'm trying to use playwright with a Vite dev server.

In my config I have

webServer: {
        command: 'npm run dev -- test',
        url: 'http://localhost:3000/',
        timeout: 10 * 1000,
        reuseExistingServer: !process.env.CI,
    },

But it does not seem to actually work. It simply times out.

[pavelfeldman]

Could you share a minimal project we can try it with?

[thomascullen]

Having a similar issue. Not entirely sure why, but using 127.0.0.1 instead of localhost seems to work for me.

webServer: {
    command: 'npm run dev -- test',
    url: 'http://127.0.0.1:3000/',
    timeout: 10 * 1000,
    reuseExistingServer: !process.env.CI,
},

[pavelfeldman]

Having a similar issue. Not entirely sure why, but using 127.0.0.1 instead of localhost seems to work for me.

Since Node 18, localhost is resolved to ipv6 by default. If your vite server is listening on ipv4, it won't be discovered.

[yury-s]

This was fixed in #21104. It will be released in 1.32, you can give it a try in @next

[pavelfeldman]

Will be fixed in 1.32.2

[lxfu1]

Same question !

[coreybyrum7]

Will be fixed in 1.32.2

Thanks for the reply @pavelfeldman. I see this was marked as fixed. Is the original config expected to work in 1.32.2 (with Vite GHA deploy)? Or is there something else needed

webServer: {
   command: 'npm run dev -- test',
   url: 'http://localhost:3000/',
   timeout: 10 * 1000,
   reuseExistingServer: !process.env.CI,
},

[SgtPooki]

FYI, this was breaking for me too until I switched my config from:

  webServer: {
    command: `npx vite --port ${port}`,
    timeout: 10 * 1000,
    url: `http://127.0.0.1:${port}`,
    reuseExistingServer: !process.env.CI,
  },

into

  webServer: {
    command: `npx vite --port ${port}`,
    timeout: 10 * 1000,
    port,
    reuseExistingServer: !process.env.CI,
  },

[n1k1t0ss]

Using the port instead of url might be a bad idea. The difference is that port could be open much earlier than server really goes up. #11811 (comment) For example, in angular app - after port opens - angular still required to build bundles, and only after that starts http. So some of my tests started too early and failed because of timeout (because building bundles took some tiime).

So, in my case, the problem was in the name of index.html file. It looks like playwright is waiting for exactly "index.html" file, and if you deploy it with different name, like "index.test.html" it won't work. Even if you define it correctly in nx configuration, like that - nrwl/nx#2935 (comment) it would work in serve mode, but not for a playwright tests! So I just placed this file in another folder and replaced original file with the exact "index.hml"