How to Run Playwright Component Tests in GitHub Actions

Component tests mount a single component in a real browser, so there is no app server to start, just install and run test-ct.

After scaffolding component testing, run npx playwright test -c playwright-ct.config.ts in CI; browsers still need install --with-deps, but no webServer is required.

Steps

• Install browsers with install --with-deps.
• Run the component config with -c playwright-ct.config.ts.
• Upload the report like any Playwright run.

Workflow

jobs:
  ct:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with: { node-version: 20, cache: npm }
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test -c playwright-ct.config.ts
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: ct-report
          path: playwright-report/

Gotchas

• Component tests bundle with Vite under the hood, so they need the same build toolchain the app uses.
• They complement full E2E, they do not replace it; keep a few real end-to-end flows.

Related guides