playwright workflow cache

Author: PatrikMatiasko

.github/workflows/playwright.yml

@@ -7,6 +7,20 @@ on:
   pull_request:
     branches:
       - "*"
+
+  # Allow updating snapshots during manual runs
+  workflow_call:
+    inputs:
+      update-snapshots:
+        description: "Update snapshots?"
+        type: boolean
+
+  # Allow updating snapshots during automatic runs
+  workflow_dispatch:
+    inputs:
+      update-snapshots:
+        description: "Update snapshots?"
+        type: boolean
 jobs:
   test:
     runs-on: ubuntu-latest
@@ -25,6 +39,18 @@ jobs:
           npm install
           npx playwright install --with-deps
 
+      - name: Set up cache
+        id: cache
+        uses: actions/cache@v4
+        with:
+          key: cache/${{github.repository}}/${{github.ref}}
+          restore-keys: cache/${{github.repository}}/refs/heads/master
+          path: .test/**
+
+      - name: Initialize snapshots
+        if: ${{steps.cache.outputs.cache-hit != 'true' || inputs.update-snapshots == 'true'}}
+        run: npx playwright test --update-snapshots --reporter html
+
       - name: Test
         run: npx playwright test --ignore-snapshots
 
@@ -35,3 +61,4 @@ jobs:
           name: playwright-report
           path: playwright-report/
           retention-days: 30
+          overwrite: true

package.json

@@ -109,7 +109,7 @@
     "react-resize-detector": "^9.1.0",
     "react-responsive": "^9.0.2",
     "react-select": "^5.8.0",
-    "react-spinners": "^0.13.8",
+    "react-spinners": "^0.14.1",
     "react-table": "^7.8.0",
     "react-toastify": "^9.1.3",
     "react-transition-group": "^4.4.5",
@@ -122,69 +122,69 @@
     "vm-browserify": "^1.1.2"
   },
   "devDependencies": {
-    "@babel/cli": "^7.24.1",
+    "@babel/cli": "^7.24.8",
     "@babel/plugin-proposal-private-property-in-object": "^7.21.11",
-    "@babel/plugin-transform-runtime": "^7.24.3",
-    "@babel/runtime": "^7.24.4",
-    "@chromatic-com/storybook": "^1.3.4",
-    "@emotion/jest": "^11.11.0",
-    "@playwright/test": "^1.43.1",
-    "@storybook/addon-essentials": "^8.2.6",
-    "@storybook/addon-interactions": "^8.2.6",
-    "@storybook/addon-links": "^8.2.6",
-    "@storybook/addon-themes": "^8.2.6",
-    "@storybook/addon-webpack5-compiler-swc": "^1.0.4",
-    "@storybook/blocks": "^8.2.6",
-    "@storybook/react": "^8.2.6",
-    "@storybook/react-webpack5": "^8.2.6",
-    "@storybook/test": "^8.2.6",
+    "@babel/plugin-transform-runtime": "^7.24.7",
+    "@babel/runtime": "^7.25.0",
+    "@chromatic-com/storybook": "^1.6.1",
+    "@emotion/jest": "^11.13.0",
+    "@playwright/test": "^1.46.0",
+    "@storybook/addon-essentials": "^8.2.7",
+    "@storybook/addon-interactions": "^8.2.7",
+    "@storybook/addon-links": "^8.2.7",
+    "@storybook/addon-themes": "^8.2.7",
+    "@storybook/addon-webpack5-compiler-swc": "^1.0.5",
+    "@storybook/blocks": "^8.2.7",
+    "@storybook/react": "^8.2.7",
+    "@storybook/react-webpack5": "^8.2.7",
+    "@storybook/test": "^8.2.7",
     "@svgr/cli": "^8.1.0",
     "@svgr/webpack": "^8.1.0",
-    "@testing-library/jest-dom": "^6.4.2",
+    "@testing-library/jest-dom": "^6.4.8",
     "@testing-library/react": "^14.1.2",
-    "@types/jest": "^29.5.10",
+    "@types/jest": "^29.5.12",
     "babel-loader": "^8.3.0",
     "babel-plugin-inline-react-svg": "^2.0.2",
     "babel-plugin-optimize-clsx": "^2.6.2",
     "babel-preset-react-app": "^10.0.1",
     "child_process": "^1.0.2",
     "cross-env": "^7.0.3",
-    "css-loader": "^6.8.1",
-    "eslint": "8.54.0",
-    "eslint-config-prettier": "^9.0.0",
+    "css-loader": "^7.1.2",
+    "eslint": "8.57.0",
+    "eslint-config-prettier": "^9.1.0",
     "eslint-config-react-app": "^7.0.1",
     "eslint-formatter-pretty": "^5.0.0",
-    "eslint-plugin-import": "^2.29.0",
-    "eslint-plugin-jest": "^27.6.0",
-    "eslint-plugin-jsx-a11y": "^6.8.0",
-    "eslint-plugin-prettier": "^5.1.3",
-    "eslint-plugin-react": "^7.33.2",
-    "eslint-plugin-react-hooks": "^4.6.0",
+    "eslint-plugin-import": "^2.29.1",
+    "eslint-plugin-jest": "^28.7.0",
+    "eslint-plugin-jsx-a11y": "^6.9.0",
+    "eslint-plugin-prettier": "^5.2.1",
+    "eslint-plugin-react": "^7.35.0",
+    "eslint-plugin-react-hooks": "^4.6.2",
     "eslint-plugin-storybook": "^0.8.0",
-    "eslint-plugin-testing-library": "^6.0.2",
+    "eslint-plugin-testing-library": "^6.2.2",
     "fast-glob": "^3.3.2",
-    "fs-extra": "^11.1.1",
-    "husky": "^9.0.11",
+    "fs-extra": "^11.2.0",
+    "husky": "^9.1.4",
     "identity-obj-proxy": "^3.0.0",
     "jest": "^29.7.0",
     "jest-environment-jsdom": "^29.7.0",
     "jest-watch-typeahead": "^2.2.2",
     "lint-staged": "^15.2.2",
-    "npm-run-all": "^4.1.5",
+    "npm-run-all2": "^5.0.2",
     "path": "^0.12.7",
     "postcss-modules": "^6.0.0",
     "prettier": "^3.3.2",
     "prop-types": "^15.8.1",
     "resize-observer-polyfill": "^1.5.1",
     "rimraf": "^5.0.5",
-    "sass": "^1.75.0",
+    "sass": "^1.77.8",
     "sass-loader": "^13.3.2",
-    "storybook": "^8.2.6",
+    "storybook": "^8.2.7",
     "style-loader": "^3.3.3",
-    "ts-jest": "^29.1.2",
+    "ts-jest": "^29.2.4",
     "util": "^0.12.5",
     "uuid": "^9.0.1",
-    "webpack": "^5.91.0",
+    "webpack": "^5.93.0",
     "yargs": "^17.7.2"
   },
   "sideEffects": false