Vitest Browser : How to get viewport size during test execution ?

[theocerutti]

Hey!

Currently I've two test instance (one for desktop and another for mobile)

            {
                  name: 'desktop',
                  browser: 'chromium',
                  viewport: { width: 1920, height: 1080 },
                  include: [
                    '**/*.browser.desktop.test.?(c|m)[jt]s?(x)',
                    '**/*.browser.test.?(c|m)[jt]s?(x)',
                  ],
                  exclude: [
                    '**/*.browser.mobile.test.?(c|m)[jt]s?(x)',
                    ...excludedFiles,
                  ],
                },
                {
                  name: 'mobile',
                  browser: 'chromium',
                  viewport: { width: 344, height: 882 },
                  include: [
                    '**/*.browser.mobile.test.?(c|m)[jt]s?(x)',
                    '**/*.browser.test.?(c|m)[jt]s?(x)',
                  ],
                  exclude: [
                    '**/*.browser.desktop.test.?(c|m)[jt]s?(x)',
                    ...excludedFiles,
                  ],
                },

Is there a way to know which instance is run during a test ?
e.g:

test('My Test', async (context) => {
  if (context.name === 'desktop') {
    ...
  } else {
    ...
  }
});

[sheremet-va]

There are several way to get the project's name:

import { server } from 'vitest/browser'
test('My Test', ({ task }) => {
  console.log(server.config.name) // you can also read other config values
  console.log(task.file.projectName)
})

You can also provide any value to the project and read it in your tests:

{
  test: {
    name: 'desktop',
    provide: {
      desktopValue: 'hello world'
    },
  }
}

Inside the test you can either read the value directly:

import { inject } from 'vitest'
const desktopValue = inject('desktopValue')

Or you can inject it automatically to your test context:

import { test as baseTest } from 'vitest'
const test = baseTest.extend({
  desktopValue: ['default', { injected: true }],
})

test('My Test', ({ desktopValue }) => {
  console.log(desktopValue)
})