Skip to content
Home

Frequently Asked Questions (FAQ)

Visual tests and Vitest browser mode

Screenshot tests run with Vitest browser mode and use Playwright as the browser provider under the hood. The helper in core/vitest-screenshots/ drives a single Firefox page per worker against the running portal on http://localhost:8000. The screenshot config sets fileParallelism: true, so test files run in parallel across workers while tests inside a file run sequentially on the same page.

Installing screenshot browser

For running screenshot tests (visual tests), a headless Firefox browser is needed.

In normal circumstances, the browser will be installed automatically via yarn install – but to either upgrade to a newer version, or to wipe out existing versions and run the install manually, you can run these commands, depending on your needs:

yarn workspace @dnb/eufemia playwright uninstall --all
yarn workspace @dnb/eufemia add -D @playwright/test
yarn workspace @dnb/eufemia playwright install firefox


yarn workspace dnb-design-system-portal playwright uninstall --all
yarn workspace dnb-design-system-portal add -D @playwright/test
yarn workspace dnb-design-system-portal playwright install firefox

Alternative install: skip authentication

However, since Node.js and corporate proxies do not enjoy each other's company, this might fail with an Error: unable to get local issuer certificate error. In that case, your only option might be to disable all authentication for this command.

NODE_TLS_REJECT_UNAUTHORIZED=0 yarn workspace @dnb/eufemia playwright install firefox

Alternative install: manually

Or, in the very worst case, you can manually download the zip file that yarn workspace @dnb/eufemia playwright install firefox attempts to download, and extract the file ("Nightly" for Firefox) to the folder indicated when yarn test:screenshots fails.

How can I run all screenshot tests without stopping on first failure?

By default, CI runs only affected screenshot tests based on changed files and reverse dependencies. If a global style change is detected, all screenshot tests are run.

To force all screenshot tests and continue after failures, include --run-all in your commit message:

git commit -m "feat: implement new feature --run-all"

This disables --bail and runs all screenshot tests, so you can see all visual differences at once.

The CI/CD pipeline automatically detects this flag and adjusts the test behavior accordingly.

What does build:mini do?

When running build:mini scripts, the build will be faster and the output will be smaller. It's used for the CI/CD pipeline to build the package for the documentation preview.

Dependency issues

ESLint compat patch

  • We patch eslint-plugin-compat to always report APIs, even inside if statements. The patch lives in .yarn/patches/ and is referenced from packages/dnb-eufemia/package.json as patch:eslint-plugin-compat@npm:*. If you reinstall dependencies, keep the patch or reapply it with yarn patch-commit.

Babel