Best practices for caching npm + Playwright + pre-commit in GitHub Action

[Kevindodiya75]

Why are you starting this discussion?

Question

What GitHub Actions topic or product is this about?

General

Discussion Details

I'm trying to optimize my CI workflow by adding caching.

Current setup that needs caching:

- name: Install npm dependencies
  run: npm install

- name: Install Playwright Browsers
  run: npx playwright install --with-deps

- uses: actions/setup-python@v3
- uses: pre-commit/action@v3.0.1

Each run reinstalls everything from scratch. What's the best way to cache:

• npm packages
• Playwright browsers
• pre-commit hooks

Any examples or recommended actions?

[pratikrath126]

Excellent question! Here are best practices for caching each component in GitHub Actions:

1. npm packages

Use the actions/cache with the npm cache key:

- name: Cache npm dependencies
  uses: actions/cache@v4
  with:
    path: ~/.npm
    key: ${{ runner.os }}-npm-${{ hashFiles(package-lock.json) }}
    restore-keys: |
      ${{ runner.os }}-npm-

2. Playwright browsers

Cache the Playwright browser binaries:

- name: Cache Playwright browsers
  uses: actions/cache@v4
  with:
    path: ~/.cache/ms-playwright
    key: ${{ runner.os }}-playwright-${{ hashFiles(package-lock.json) }}

3. pre-commit hooks

Cache the pre-commit environment:

- name: Cache pre-commit
  uses: actions/cache@v4
  with:
    path: ~/.cache/pre-commit
    key: ${{ runner.os }}-pre-commit-${{ hashFiles(.pre-commit-config.yaml) }}
    restore-keys: |
      ${{ runner.os }}-pre-commit-

Full example workflow:

jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      
      - name: Cache npm
        uses: actions/cache@v4
        with:
          path: ~/.npm
          key: ${{ runner.os }}-npm-${{ hashFiles(package-lock.json) }}
          
      - name: Cache Playwright
        uses: actions/cache@v4
        with:
          path: ~/.cache/ms-playwright
          key: ${{ runner.os }}-playwright-${{ hashFiles(package-lock.json) }}
          
      - name: Cache pre-commit
        uses: actions/cache@v4
        with:
          path: ~/.cache/pre-commit
          key: ${{ runner.os }}-pre-commit-${{ hashFiles(.pre-commit-config.yaml) }}
          
      - name: Install dependencies
        run: npm ci
        
      - name: Install Playwright browsers
        run: npx playwright install --with-deps
        
      - name: Run pre-commit
        uses: pre-commit/action@v3.0.1

This setup should significantly speed up your CI runs by avoiding redundant installations!

[rikream]

Hi,

You can speed up your CI workflow by using caching in GitHub Actions so dependencies don’t reinstall every run.

Cache npm dependencies

If you use setup-node, caching is built in:

- uses: actions/setup-node@v4
  with:
    node-version: 18
    cache: 'npm'

- run: npm install

This caches npm packages based on your package-lock.json file.

Cache Playwright browsers

Playwright downloads browsers to a cache directory. You can cache it like this:

- uses: actions/cache@v3
  with:
    path: ~/.cache/ms-playwright
    key: playwright-${{ runner.os }}-${{ hashFiles('package-lock.json') }}

Then run:

npx playwright install --with-deps

If nothing changed, the cached browsers will be reused.

Cache pre-commit hooks

Pre-commit stores hooks in ~/.cache/pre-commit:

- uses: actions/cache@v3
  with:
    path: ~/.cache/pre-commit
    key: precommit-${{ runner.os }}-${{ hashFiles('.pre-commit-config.yaml') }}

This prevents reinstalling hooks each run.

General advice

Use lock/config files in cache keys so the cache refreshes only when dependencies change. Also, avoid caching node_modules directly — caching npm’s package cache is usually more reliable.

This should noticeably reduce CI runtime.

[github-actions[bot]]

🕒 Discussion Activity Reminder 🕒

This Discussion has been labeled as dormant by an automated system for having no activity in the last 60 days. Please consider one the following actions:

1️⃣ Close as Out of Date: If the topic is no longer relevant, close the Discussion as out of date at the bottom of the page.

2️⃣ Provide More Information: Share additional details or context — or let the community know if you've found a solution on your own.

3️⃣ Mark a Reply as Answer: If your question has been answered by a reply, mark the most helpful reply as the solution.

Note: This dormant notification will only apply to Discussions with the Question label. To learn more, see our recent announcement.

Thank you for helping bring this Discussion to a resolution! 💬