Allow usage of Playwright devices with vitest

[Christian24]

Clear and concise description of the problem

Hello,

Playwright exports device configurations that contain viewports, user agent touch and so on: https://playwright.dev/docs/emulation
It would be nice to use these in a vitest configuration directly.

Suggested solution

1. Export devices directly from vitest-browser-playwright.
2. Allow to use a device as instance in the configuration

Alternative

Provide examples/documentation how to simulate capabilities like touch

Additional context

No response

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]

You should be able to use it already:

import { playwright } from '@vitest/browser-playwright'
import { devices } from 'playwright'

export default defineConfig({
  test: {
    browser: {
      enabled: true,
      instances: [
        {
          browser: 'chromium',
          provider: playwright({ contextOptions: { ...devices['iPhone 13'] } })
        },
      ],
    },
  },
})

It would be nice to export and document though.

[Christian24]

Thanks @sheremet-va, I tried this, but it doesn't work:

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Errors ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯

Vitest caught 1 unhandled error during the test run.
This might cause false positive tests. Resolve unhandled errors to make sure your tests are not affected.

⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯ Unhandled Error ⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Error: browser.newContext: "deviceScaleFactor" option is not supported with null "viewport"

I tried setting viewport instead, but it doesn't work either:

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
import { playwright } from '@vitest/browser-playwright'
import { devices } from 'playwright'

const iphone13 = devices['iPhone 13']

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      browser: {
        provider: playwright(),
        enabled: true,
        instances: [
          {
            browser: 'chromium',
            provider: playwright({ contextOptions: { ...iphone13 } }),
            viewport: iphone13.viewport,
          },
        ],
      },
      exclude: [...configDefaults.exclude, 'e2e/**'],
      root: fileURLToPath(new URL('./', import.meta.url)),
    },
  }),
)

[sheremet-va]

Try disabling browser.ui. Vitest resets the viewport if UI is enabled (which is the default). Or run tests in headless mode (it disabled ui automatically)

[Christian24]

I tried headless: true, but no luck:

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
import { playwright } from '@vitest/browser-playwright'
import { devices } from 'playwright'

const iphone13 = devices['iPhone 13']

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      browser: {
        provider: playwright(),
        enabled: true,
        instances: [
          {
            browser: 'chromium',
            headless: true,
            provider: playwright({
              contextOptions: { ...iphone13 },
            }),
          },
        ],
      },
      exclude: [...configDefaults.exclude, 'e2e/**'],
      root: fileURLToPath(new URL('./', import.meta.url)),
    },
  }),
)

[sheremet-va]

import { fileURLToPath } from 'node:url'
import { mergeConfig, defineConfig, configDefaults } from 'vitest/config'
import viteConfig from './vite.config'
import { playwright } from '@vitest/browser-playwright'
import { devices } from 'playwright'

const iphone13 = devices['iPhone 13']

export default mergeConfig(
  viteConfig,
  defineConfig({
    test: {
      browser: {
        provider: playwright(),
        enabled: true,
+       headless: true,
        instances: [
          {
            browser: 'chromium',
-           headless: true,
            provider: playwright({
              contextOptions: { ...iphone13 },
            }),
          },
        ],
      },
      exclude: [...configDefaults.exclude, 'e2e/**'],
      root: fileURLToPath(new URL('./', import.meta.url)),
    },
  }),
)