Running vitest browser in GitLab CI

[bu-michael]

vite.config.ts:

/// <reference types="vitest" />
import { defineConfig } from "vite";

export default defineConfig({
  build: {
    target: "ES2022",
  },
  test: {
    mockReset: true,
    browser: {
      enabled: true,
      name: "chrome",
      provider: "webdriverio",
      providerOptions: {},
    },
  },
});

.gitlab-ci.yml:

....
unit-test:
  image: node:20
  script:
    - apt-get update
    - apt-get install -yq gconf-service libasound2 libatk1.0-0 libc6 libcairo2
      libcups2 libdbus-1-3 libexpat1 libfontconfig1 libgbm1 libgcc1 libgconf-2-4
      libgdk-pixbuf2.0-0 libglib2.0-0 libgtk-3-0 libnspr4 libpango-1.0-0
      libpangocairo-1.0-0 libstdc++6 libx11-6 libx11-xcb1 libxcb1 libxcomposite1
      libxcursor1 libxdamage1 libxext6 libxfixes3 libxi6 libxrandr2 libxrender1
      libxss1 libxtst6 ca-certificates fonts-liberation libnss3 lsb-release
      xdg-utils wget
    - npm install
    - npm run test:unit
...

package.json:

{
...
  "scripts": {
    "test:unit": "vitest run --browser.headless"
  }
}

GitLab CI gives me

$ npm run test:unit
vite-project@0.0.0 test:unit
vitest run --browser.headless
RUN v2.0.5 /builds/webprojects/fluid-calculator
Browser runner started at http://localhost:5173/
2024-08-09T07:35:30.393Z ERROR webdriver: Request failed with status 500 due to session not created: session not created: Chrome failed to start: exited normally.
(session not created: DevToolsActivePort file doesn't exist)
(The process started from chrome location /tmp/chrome/linux-127.0.6533.99/chrome-linux64/chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
2024-08-09T07:35:30.394Z ERROR webdriver: session not created: session not created: Chrome failed to start: exited normally.
(session not created: DevToolsActivePort file doesn't exist)
(The process started from chrome location /tmp/chrome/linux-127.0.6533.99/chrome-linux64/chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
at getErrorFromResponseBody (file:///builds/webprojects/fluid-calculator/node_modules/webdriver/build/utils.js:195:12)
at NodeJSRequest._request (file:///builds/webprojects/fluid-calculator/node_modules/webdriver/build/request/index.js:193:23)
at process.processTicksAndRejections (node:internal/process/task_queues:95:5)
at async startWebDriverSession (file:///builds/webprojects/fluid-calculator/node_modules/webdriver/build/utils.js:64:20)
at async WebDriver.newSession (file:///builds/webprojects/fluid-calculator/node_modules/webdriver/build/index.js:19:45)
at async remote (file:///builds/webprojects/fluid-calculator/node_modules/webdriverio/build/index.js:46:22)
at async WebdriverBrowserProvider.openBrowser (file:///builds/webprojects/fluid-calculator/node_modules/@vitest/browser/dist/webdriver-BdVqnfdE.js:201:20)
at async WebdriverBrowserProvider.openPage (file:///builds/webprojects/fluid-calculator/node_modules/@vitest/browser/dist/webdriver-BdVqnfdE.js:238:29)
at async Promise.all (index 0)
at async executeTests (file:///builds/webprojects/fluid-calculator/node_modules/@vitest/browser/dist/index.js:2454:5)
⎯⎯⎯⎯⎯⎯ 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: Failed to create session.
session not created: Chrome failed to start: exited normally.
(session not created: DevToolsActivePort file doesn't exist)
(The process started from chrome location /tmp/chrome/linux-127.0.6533.99/chrome-linux64/chrome is no longer running, so ChromeDriver is assuming that Chrome has crashed.)
❯ startWebDriverSession node_modules/webdriver/build/utils.js:69:15
❯ process.processTicksAndRejections node:internal/process/task_queues:95:5
❯ WebDriver.newSession node_modules/webdriver/build/index.js:19:45
❯ remote node_modules/webdriverio/build/index.js:46:22
❯ WebdriverBrowserProvider.openBrowser node_modules/@vitest/browser/dist/webdriver-BdVqnfdE.js:201:20
❯ WebdriverBrowserProvider.openPage node_modules/@vitest/browser/dist/webdriver-BdVqnfdE.js:238:29
❯ executeTests node_modules/@vitest/browser/dist/index.js:2454:5
❯ runWorkspaceTests node_modules/@vitest/browser/dist/index.js:2471:7
⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯⎯
Test Files no tests
Tests no tests
Errors 1 error
Start at 07:35:15
Duration 15.03s (transform 0ms, setup 0ms, collect 0ms, tests 0ms, environment 0ms, prepare 0ms)

I'm trying to apply Puppeteer configuration as described in https://pptr.dev/troubleshooting/#running-puppeteer-on-gitlabci

Next, you have to use '--no-sandbox' mode and also '--disable-setuid-sandbox' when launching Puppeteer. This can be done by passing them as an arguments to your .launch() call: puppeteer.launch({ args: ['--no-sandbox', '--disable-setuid-sandbox'] });.

But how can I do this?

Any other ideas?

[bu-michael]

Running it with playwright works. However, any suggestions on making GitLab CI run the tests with webdriverio are appreciated!

[AriPerkkio]

If playwright works just fine, it doesn't sound like this is really a Vitest issue. Have you checked WebdriverIO project for Gitlab CI related issues? Like webdriverio/webdriverio#12195?

[bu-michael]

@AriPerkkio Thanks for your hint. Any idea on how pass options to chrome in vitest? The options "headless", "disable-gpu", "no-sandbox" and "disable-setuid-sandbox" seem to solve the issue according to those two sources:

• [🐛 Bug]: Chrome testing fails on Gitlab CI, but not locally webdriverio/webdriverio#12195 (comment)
• https://pptr.dev/troubleshooting/#running-puppeteer-on-gitlabci

[AriPerkkio]

This should be possible with https://vitest.dev/config/#browser-provideroptions

[sheremet-va]

If you add @vitest/browser/providers/webdriverio to compilerOptions.types in your tsconfig, then you can see all available options in your providerOptions. Adding args will solve your issue:

export default defineConfig({
  test: {
    browser: {
      providerOptions: {
        capabilities: {
          'goog:chromeOptions': {
            args: ['disable-gpu', 'no-sandbox', 'disable-setuid-sandbox']
          }
        }
      }
    }
  }
})