WIP playwright canary

.gitignore

@@ -11,11 +11,13 @@ yarn-error.log
 coverage
 test-results.json
 **/junit.xml
+playwright-cache-location.txt
 
 
 /**/.yarn/*
 !/**/.yarn/releases
 !/**/.yarn/plugins
 !/**/.yarn/sdks
 !/**/.yarn/versions
-/**/.pnp.*
+/**/.pnp.*
+test-results

package.json

@@ -6,7 +6,6 @@
     "storybook-addons",
     "test",
     "runner",
-    "jest",
     "testing-library",
     "playwright"
   ],
@@ -30,8 +29,9 @@
   ],
   "scripts": {
     "build": "tsup",
+    "build:nocache": "node scripts/delete-playwright-cache.js && tsup",
     "build-storybook": "storybook build",
-    "build:watch": "tsup --watch",
+    "build:watch": "concurrently \"tsup --watch\" \"nodemon\"",
     "generate-dynamic-stories": "node scripts/generate-dynamic-stories.js",
     "prepare": "husky install",
     "release": "yarn build && auto shipit",
@@ -56,6 +56,7 @@
     "@babel/template": "^7.22.5",
     "@babel/types": "^7.22.5",
     "@jest/types": "^29.6.3",
+    "@playwright/test": "^1.44.1",
     "@storybook/core-common": "next",
     "@storybook/csf": "^0.1.2",
     "@storybook/csf-tools": "next",
@@ -71,8 +72,7 @@
     "jest-runner": "^29.6.4",
     "jest-serializer-html": "^7.1.0",
     "jest-watch-typeahead": "^2.0.0",
-    "nyc": "^15.1.0",
-    "playwright": "^1.14.0"
+    "nyc": "^15.1.0"
   },
   "devDependencies": {
     "@auto-it/released": "^11.1.6",
@@ -102,6 +102,7 @@
     "jest-image-snapshot": "^6.2.0",
     "lint-staged": "^13.0.3",
     "node-fetch": "^2",
+    "nodemon": "^3.0.1",
     "pkg-up": "^5.0.0",
     "prettier": "^2.8.1",
     "react": "^17.0.1",
@@ -111,11 +112,19 @@
     "tempy": "^1.0.1",
     "ts-dedent": "^2.0.0",
     "ts-jest": "^29.0.0",
-    "tsup": "^6.5.0",
-    "typescript": "~4.9.4",
+    "tsup": "^8.0.1",
+    "typescript": "^5.3.2",
     "vite": "^4.4.5",
     "wait-on": "^7.2.0"
   },
+  "nodemonConfig": {
+    "watch": [
+      "src/playwright/csf-playwright-plugin.ts",
+      "src/util/*.ts"
+    ],
+    "exec": "node scripts/delete-playwright-cache.js",
+    "ext": "ts"
+  },
   "engines": {
     "node": "^16.10.0 || ^18.0.0 || >=20.0.0"
   },

playwright/test-runner-playwright.config.js

@@ -0,0 +1,13 @@
+const { defineConfig } = require('@storybook/test-runner');
+
+/**
+ * @type {import('@playwright/test').PlaywrightTestConfig}
+ */
+const config = {
+  /** Add your own overrides below,
+   * @see https://playwright.dev/docs/test-configuration
+   */
+};
+
+// TODO: check how we want to allow users to override the config
+module.exports = defineConfig(config);

scripts/delete-playwright-cache.js

@@ -0,0 +1,86 @@
+/**
+ * IMPORTANT: This script is only necessary because Playwright does not have a flag to disable or clear
+ * it's transform cache.
+ *
+ * Playwright caches the transform plugin from the test-runner, so if you make changes and rebuild,
+ * these changes would not be reflected in the test-runner. This script (hooked to nodemon) makes sure that
+ * whenever you change the csf-playwright-plugin.ts file, the cache is cleared and you actually get your changes.
+ */
+const fs = require('fs').promises;
+const path = require('path');
+
+const CACHE_FILE = 'playwright-cache-location.txt';
+
+const SEARCH_PATH = '/var/folders/';
+
+const PATTERN = /^playwright-transform-cache-/;
+
+async function directoryExists(dirPath) {
+  try {
+    const stat = await fs.stat(dirPath);
+    return stat.isDirectory();
+  } catch (error) {
+    return false;
+  }
+}
+
+async function getCachedPath() {
+  try {
+    const path = await fs.readFile(CACHE_FILE, 'utf8');
+    if (await directoryExists(path.trim())) {
+      return path;
+    }
+  } catch (error) {}
+  return null;
+}
+
+async function findPlaywrightTransformCacheDir(dirPath) {
+  try {
+    const files = await fs.readdir(dirPath, { withFileTypes: true });
+    for (const file of files) {
+      if (file.isDirectory()) {
+        const fullPath = path.join(dirPath, file.name);
+        if (PATTERN.test(file.name)) {
+          return fullPath;
+        }
+
+        const foundPath = await findPlaywrightTransformCacheDir(fullPath);
+        if (foundPath) {
+          return foundPath;
+        }
+      }
+    }
+  } catch (error) {}
+  return null;
+}
+
+// Find the Playwright transform cache directory and delete it
+// This is the pattern used by Playwright: /var/folders/{some-hash}/{some-other-hash}/T/playwright-transform-cache-501
+// it will look like this /var/folders/sv/lg8lnv0s4gg6_rt7s6cd52qr0000gn/T/playwright-transform-cache-501
+const main = async () => {
+  if (process.platform !== 'darwin') {
+    throw new Error('This script only works on macOS.');
+  }
+
+  let playwrightTransformPath = await getCachedPath();
+
+  if (!playwrightTransformPath) {
+    playwrightTransformPath = await findPlaywrightTransformCacheDir(SEARCH_PATH);
+
+    if (playwrightTransformPath) {
+      console.log(`📝 Writing the Playwright transform cache location to: ${CACHE_FILE}`);
+      await fs.writeFile(CACHE_FILE, playwrightTransformPath);
+    }
+  }
+
+  if (playwrightTransformPath) {
+    console.log(`🚮 Deleting the Playwright transform cache at: ${playwrightTransformPath}`);
+    await fs.rm(playwrightTransformPath, { recursive: true });
+  } else {
+    console.log('No Playwright transform cache to clear yet.');
+  }
+};
+
+if (process.env.CI === undefined) {
+  main();
+}

src/config/global.setup.ts

@@ -0,0 +1,3 @@
+export default async () => {
+  // here is where we potentially create and define files from index-json
+};