[Thảo luận Playwright] Cache GitHub Actions

Phong Do · 10/03/2025 · 3 phút đọc

Khi chạy trên môi trường CI, nếu mỗi lần bạn lại cài lại toàn bộ các Playwright browser, nó sẽ tốn 15s đến 1 phút. Để tiết kiệm được thời gian này, bạn có thể dùng phương pháp: cache GitHub Actions lại.

Một thảo luận trên trên cộng đồng discord Playwright, người trả lời có dẫn cả link của file GitHub Actions mẫu, mình post lại lên đây cho các bạn tham khảo.

Reg:
Xin chào các bạn, mình có thể dùng actions/cache@v4 cho các dependencies của Playwright không? Ví dụ như các trình duyệt của Playwright ấy? 🤔

Hiện tại thì đây là cấu hình mặc định của mình:

name: Playwright Tests  
on:  
  push:  
    branches: [ main, master ]  
  pull_request:  
    branches: [ main, master ]  
jobs:  
  test:  
    timeout-minutes: 60  
    runs-on: ubuntu-latest  
    steps:  
    - uses: actions/checkout@v4  
    - uses: actions/setup-node@v4  
      with:  
        node-version: lts/*  
    - name: Install dependencies  
      run: npm ci  
    - name: Install Playwright Browsers  
      run: npx playwright install --with-deps  
    - name: Run Playwright tests  
      run: npm run faker:test  
    - uses: actions/upload-artifact@v4  
      if: ${{ !cancelled() }}  
      with:  
        name: playwright-report  
        path: playwright-report/  
        retention-days: 2

Đây là file playwright.yml mặc định. Nhưng mà nó cứ cài lại trình duyệt mỗi lần chạy. Liệu mình có thể dùng actions/cache@v4 cho các trình duyệt Playwright không? 🧐

alex.img:
Ý tưởng hay đấy! 😎 Đúng rồi, bạn có thể dùng được. Có nhiều ví dụ về config GitHub Actions nếu bạn search Google hoặc hỏi AI nhé.

Mình đã dùng cách này trong một dự án playground gần đây. Caching được gắn với phiên bản của Playwright, nên khi Playwright upgrade thì nó sẽ refresh lại:
👉 Link GitHub

name: Playwright Tests
on:
  push:
    branches: [ main ]
  workflow_dispatch:

jobs:
  test:
    environment: Production
    timeout-minutes: 5
    runs-on: ubuntu-latest
    steps:
    - uses: actions/checkout@v4
    - uses: actions/setup-node@v4
      with:
        node-version: lts/*
    - name: Install dependencies
      run: npm ci

    - name: Extract Playwright version for caching browser executables
      id: playwright-version
      run:
        echo "PLAYWRIGHT_VERSION=$(jq '.devDependencies["@playwright/test"]' package.json -r)" >> $GITHUB_ENV
    - name: Playwright version
      run: echo ${{ env.PLAYWRIGHT_VERSION }}
    - name: Cache playwright binaries
      uses: actions/cache@v4
      id: playwright-cache
      with:
        path: |
          ~/.cache/ms-playwright
        key: ${{ runner.os }}-playwright-${{ env.PLAYWRIGHT_VERSION }}
    - name: Install Playwright Browsers for current OS and playwright version if not cached yet
      run: npx playwright install --with-deps chromium
      if: steps.playwright-cache.outputs.cache-hit != 'true'
    
    - name: Run Playwright tests
      run: npx playwright test 
      env:
        CI: true
        BASE_URL:  ${{ vars.BASE_URL }}
        USERNAME: ${{ secrets.USERNAME }}
        PASSWORD: ${{ secrets.PASSWORD }}
   
    - uses: actions/upload-artifact@v4
      if: ${{ !cancelled() }}
      with:
        name: playwright-report
        path: playwright-report/
        retention-days: 10
        if-no-files-found: ignore