How to install Playwright and Artillery in the official JavaScript DevContainer (bookworm-24)?

I’m trying to set up a DevContainer environment based on mcr.microsoft.com/devcontainers/javascript-node:24-bookworm that includes:

• Artillery (performance testing),
• Playwright test runner, its browsers, and all required system libs.

This is my minimal project descriptor (package.json):

{
  "name": "my-playwright-project",
  "version": "1.0.0",
  "description": "Playwright project with Artillery for load testing",
  "scripts": {
    "test": "npx playwright test",
    "load:test": "artillery run artillery.yml"
  },
  "dependencies": {
  },
  "devDependencies": {
    "@playwright/test": "1.57.0",
    "playwright": "1.57.0",
    "artillery": "^2.0.0"
  },
  "engines": {
    "node": ">=18"
  }
}

Please help me to set up a clean installation routine for running the install commands:

• Should the node user run npm install first?

• Or should I set PLAYWRIGHT_BROWSERS_PATH and use root to run apt-get update && npx install playwright with-deps first?

To answer your questions first:

Q. Should the node user run npm install first?

First install Playwright’s system dependencies + browsers (requires root). Then run npm ci/npm install as the node user. This avoids permission issues and ensures the runtime has everything Playwright needs.

Q. Should you set PLAYWRIGHT_BROWSERS_PATH and run apt-get update && npx playwright install --with-deps first as root?

Yes, you have to set PLAYWRIGHT_BROWSERS_PATH to a shared location (/ms-playwright) so browsers are not hoisted into your project’s node_modules. Run npx @playwright/test install --with-deps as root so it can install the Debian packages and download browsers once, system-wide for the container image layer. Then switch to node and do npm ci.

You should use the stock image, set environment for Playwright browsers, and run app install as the node user.

Your devcontainer.json structure should be like

{
  "name": "JavaScript Node + Playwright + Artillery",
  "image": "mcr.microsoft.com/devcontainers/javascript-node:24-bookworm",
  "remoteUser": "node",
  "containerEnv": {
    // Keep Playwright browsers outside node_modules for reuse
    "PLAYWRIGHT_BROWSERS_PATH": "/ms-playwright"
  },
  "features": {
    // Optional: you can add common dev tools if desired
    // "ghcr.io/devcontainers/features/common-utils:2": {}
  },
  "postCreateCommand": "npm ci",
  "customizations": {
    "vscode": {
      "extensions": [
        "ms-playwright.playwright",
        "dbaeumer.vscode-eslint"
      ]
    }
  }
}

Kindly Install Playwright browsers and system dependencies as root, set ownership, then switch to node. Use the official DevContainer JavaScript/Node image (Debian bookworm, Node 24). Then your Dockerfile will look something like this:

FROM mcr.microsoft.com/devcontainers/javascript-node:24-bookworm
ENV PLAYWRIGHT_BROWSERS_PATH=/ms-playwright
USER root
RUN apt-get update && apt-get upgrade -y && \
    rm -rf /var/lib/apt/lists/*
RUN mkdir -p /ms-playwright && \
    npx --yes @playwright/test@1.57.0 install --with-deps && \
    chown -R node:node /ms-playwright

# Switch back to node for normal development workflow and npm installs
USER node
WORKDIR /workspaces/${LOCAL_WORKSPACE_FOLDER:-app}

Your package.json is absolutely fine with the above setup. The order is important:

1. Install Playwright browsers + system libs once at build time avoiding the need of sudo later.

2. Do npm ci as node user to avoid getting into unnecessary permissions issue in your workspace.

3. Playwright looks at PLAYWRIGHT_BROWSERS_PATH. Artillery runs locally via npx, no global installs needed.

Once the DevContainer starts:

# Installs dev deps (via postCreateCommand)
npm ci
# Run Playwright tests
npm run test
# Run Artillery load test
npm run load:test

Hope it clarifies your doubts.