docs-screenshots

Automated screenshot pipeline for Bitwarden documentation.

Setup

npm install
npx playwright install chromium
cp .env.example .env
# Fill in .env values

Usage

npm run screenshot                                                 # all projects
npm run screenshot:web                                             # all web projects
npm run screenshot:web:adminconsole                                # admin console only
npm run screenshot:web:passwordmanager                             # password manager only
npm run screenshot:web:secretsmanager                              # secrets manager only
npx playwright test screenshots/web/adminconsole/policies.spec.js  # specific spec

Output is written to the terminal and automatically saved to last-run.log for inspection.

Debugging

When a spec fails, check the log:

cat last-run.log

Playwright also writes an error-context.md file to the output/ directory for each failed test, containing the page snapshot and test source at the point of failure. These are useful for diagnosing wait selector issues.

Authentication

Specs log in automatically using BW_EMAIL and BW_PASSWORD from .env. The login helper (screenshots/web/helpers/login.js) handles the full flow including dismissing any post-login prompts that appear after login.

Requirements:

• Email verification must be disabled on the account
• BW_EMAIL and BW_PASSWORD must be set in .env

Important: Bitwarden does not persist session tokens to localStorage in local development builds, so saved session state (storageState) cannot be reused across specs. Each spec performs a full login. To avoid rate limiting, specs run sequentially (workers: 1) and specs that require multiple screenshots on the same page perform all captures in a single test rather than separate tests.

Environments

The target URL is controlled by WEB_APP_URL in .env. If not set, it defaults to https://vault.bitwarden.com. Two environments are documented in .env.example:

• https://vault.bitwarden.com — production
• https://vault.qa.bitwarden.pw — QA

After changing WEB_APP_URL, no other changes are needed — all specs read from .env at runtime.

Configuration

All configuration lives in .env. Copy .env.example to get started:

Variable	Description	Default
WEB_APP_URL	Target web vault URL	https://vault.bitwarden.com
ORG_ID	Organization GUID for Admin Console specs	(required for org-scoped specs)
SM_ORG_ID	Organization GUID for Secrets Manager specs	(required for SM specs)
BW_EMAIL	Login email for the screenshot account	(required)
BW_PASSWORD	Master password for the screenshot account	(required)

Your org GUIDs can be found in the URL when navigating to the relevant product:

• Admin Console: https://vault.bitwarden.com/#/organizations/<ORG_ID>/...
• Secrets Manager: https://vault.bitwarden.com/#/sm/<SM_ORG_ID>/...

In most cases these will be the same GUID.

Known limitations

• Session persistence: Bitwarden's web vault keeps auth tokens in memory rather than localStorage in local dev builds. storageState cannot be used to share sessions across specs — each spec logs in independently.
• Rate limiting: Running many specs back-to-back can trigger login rate limiting. workers: 1 mitigates this by running specs sequentially. Specs that need multiple screenshots on one page (e.g. vault.spec.js) consolidate all captures into a single test to minimize logins.
• Self-signed certificates: Local environments using https://localhost require ignoreHTTPSErrors: true in playwright.config.js, which is already set.
• Viewport and layout: The viewport is set to 1280×1100. Some pages use min-height: 100vh layouts that expand to fill the viewport — fullPage: true may capture excess whitespace on these pages. The current viewport height was chosen to minimize this for most pages.

Specs

See SPECS.md for a full list of specs and their outputs.

Structure

screenshots/              Playwright specs, organized by client then product area
  web/                    Web client
    adminconsole/         Admin Console specs
      helpers/            Shared helpers (login.js)
    passwordmanager/      Password Manager specs
    secretsmanager/       Secrets Manager specs
scripts/                  Upload and utility scripts (Contentful pipeline — Phase 2)
output/                   Generated screenshots (gitignored)
  web/
    adminconsole/
    passwordmanager/
    secretsmanager/
last-run.log              Output from the most recent run (gitignored)

---