Cache playwright browser

Author: yoriiis

.github/workflows/e2e-tests.yml

@@ -24,8 +24,35 @@ jobs:
       - name: Install dependencies
         run: npm ci
 
-      - name: Install Playwright Browsers
+      # https://github.com/microsoft/playwright/issues/7249#issuecomment-1385567519
+      - name: Store Playwright's Version
+        run: |
+          PLAYWRIGHT_VERSION=$(npm ls @playwright/test | grep @playwright | sed 's/.*@//')
+          echo "Playwright's Version: $PLAYWRIGHT_VERSION"
+          echo "PLAYWRIGHT_VERSION=$PLAYWRIGHT_VERSION" >> $GITHUB_ENV
+
+      - name: Cache Playwright Browsers for Playwright's Version
+        id: cache-playwright-browsers
+        uses: actions/cache@v4
+        with:
+          path: ~/.cache/ms-playwright
+          key: playwright-browsers-${{ env.PLAYWRIGHT_VERSION }}
+
+      - name: Setup Playwright
+        if: steps.cache-playwright-browsers.outputs.cache-hit != 'true'
         run: npx playwright install --with-deps
 
+      - name: Install system dependencies for WebKit
+        # Some WebKit dependencies seem to lay outside the cache and will need to be installed separately
+        if: ${{ steps.cache-playwright-browsers.outputs.cache-hit == 'true' }}
+        run: npx playwright install-deps webkit
+
       - name: Run Playwright tests
         run: npm run e2e
+
+      - uses: actions/upload-artifact@v4
+        if: ${{ !cancelled() }}
+        with:
+          name: playwright-report
+          path: playwright-report/
+          retention-days: 30

.gitignore

@@ -2,3 +2,4 @@ node_modules/
 dist
 lib
 test-results
+playwright-report

config/playwright.config.ts

@@ -9,6 +9,12 @@ export default defineConfig({
 		timeout: 60 * 1000,
 		reuseExistingServer: !process.env.CI
 	},
+	reporter: !process.env.GITHUB_ACTIONS
+		? [
+				['list', { printSteps: true, forceColor: true }],
+				['html', { open: 'never' }]
+			]
+		: 'html',
 	projects: [
 		{
 			name: 'Chrome Desktop',

tests/common.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 
 const providers = ['html5', 'youtube', 'vimeo', 'dailymotion']
 

tests/player.spec.ts

@@ -1,4 +1,4 @@
-import { test, expect } from '@playwright/test'
+import { expect, test } from '@playwright/test'
 
 test.describe('HTML5 Player Tests', () => {
 	test.beforeEach(async ({ page }) => {