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#

Suggest an edit