none browser provider

[Aslemammad]

Clear and concise description of the problem

While working on landing #3079, I found out that the initial feature of the browser mode which simply is just starting a server and waiting for the user to navigate to that URL in their own browser is removed! I believe we need to have it again since it's a huge DX win and can play really well with vitest ui for the users.

Suggested solution

Having a new provider as @sheremet-va said which handles this case, I assume not so much should be gone into this browser provider and only the provider methods should be filled (for the sake of the provider)! I'd name this provider the none provider which does not open any browser for you as wd/playwright does.

Alternative

It was there before #2999.

Additional context

#3079

Validations

• Follow our Code of Conduct
• Read the Contributing Guidelines.
• Read the docs.
• Check that there isn't already an issue that request the same feature to avoid creating a duplicate.

[sheremet-va]

Before implementing this feature I would recommend outlining:

• how it works
• what does it achieve (without buzzwords)
• who it will be useful for

I would also recommend asking other community members if we need such a feature.

[Aslemammad]

I agree, I hope I can get back to it soon.

[Aslemammad]

As a provider, this feature will not require any automated browser to run, unlike webdriverio or playwright provider. Instead, we only need the browser server and its URL, which is currently available, to be given to the user. Therefore, the user can simply copy the URL and open it in their own browser. I expect less work in the openPage field for this one.

This approach will result in a faster response and a better and faster Developer Experience, especially for those who have their browsers next to their IDEs. Moreover, there will be no need for any dependency, and it can work in any environment and browser, which means that the user will not be limited to the browsers provided by Playwright or Webdriverio.

I understand that some of you may be concerned about isolation issues, such as extensions that the user has on their system. However, I do not see this as an issue since Vitest has a non-safe mode flag called --no-isolate next to the safe mode --isolate. Some users, including myself, may prefer the non-safe mode sometimes because of the experience it provides.

I believe that this new feature will be very useful for users who do TDD and those who use more special browsers instead of the regular ones. Also, it has the potential to work in stackblitz, which is currently not possible with other providers. I think this feature has the potential to be explored further and be accessed globally using a server that serves the vitest browser server.

[christian-bromann]

This sounds like a cool feature for the use case of writing unit / UI / component tests. In this case just spinning up my local browser that maybe already include some Chrome Devtools plugins can help accelerate my work writing tests. However in CI or when I want to just run the test, this would be not my default choice. So I think it should be careful documented for what purpose this should be used for and running browser tests through WebDriver should stay the default. Aside, great idea 👍

[userquin]

I like the idea, we only need a browser.

How about web containers? How can I test browser on StackBlizt?

On local you can run browser test with webdriverio on Chrome and them open Firefox and copy/paste the url.

[Aslemammad]

How about web containers? How can I test browser on StackBlizt?

I believe this would be possible with the none provider.

[sheremet-va]

There is openBrowser function in Vite, maybe we can just reuse it? This will effectively do what we did before the CI providers were implemented.

[userquin]

The problem with openBrowser is that we need to configure server.open = true | <url-path> before starting the dev server, if the dev server is started without previous configuration, it will not work (tested and not working): so, to make it working the none provider should be checked in the server integration for the browser to configure the open flag before starting it:

// packages/vitest/src/integrations/browser/server.ts
        enforce: 'post',
        name: 'vitest:browser:config',
        async config(config) {
          const browser: Pick<BrowserConfigOptions, 'api' | 'enabled' | 'provider'> = config.test?.browser ?? {}
          const server = resolveApiServerConfig(browser) || {
            port: defaultBrowserPort,
          }

          config.server = server
          config.server.fs ??= {}
          config.server.fs.strict = false

          if (browser.enabled === true && browser.provider === 'none')
            config.server.open = true

          return {
            resolve: {
              alias: config.test?.alias,
            },
          }
        },
      },

[bjarkihall]

Can this issue be closed since #4427 was merged?