trying more ideas

Author: jderochervlk

e2e/LandingPage.test.res e2e/LandingPageTest.rese2e/LandingPage.test.res renamed to e2e/LandingPageTest.res

@@ -11,7 +11,7 @@
   "scripts": {
     "build:scripts": "yarn dlx tsdown@0.20.0 scripts/*.jsx -d _scripts --no-clean --ext .mjs",
     "build:generate-llms": "node _scripts/generate_llms.mjs",
-    "build:res": "rescript build --warn-error +3+8+11+12+26+27+31+32+33+34+35+39+44+45+110",
+    "build:res": "rescript build --warn-error +3+8+11+12+26+27+31+32+33+34+35+39+44+45+110 && node scripts/postprocess-e2e.mjs",
     "build:sync-bundles": "node scripts/sync-playground-bundles.mjs",
     "build:update-index": "yarn build:generate-llms && node _scripts/generate_feed.mjs > public/blog/feed.xml",
     "build:vite": "react-router build",

package.json

@@ -21,6 +21,22 @@ const baseURL = process.env.PLAYWRIGHT_BASE_URL ?? "http://localhost:8788";
 const useLocalServer = !process.env.PLAYWRIGHT_BASE_URL;
 
 export default defineConfig({
+  /**
+   * Apply a Babel plugin to rewrite the first parameter of ReScript-compiled
+   * test callbacks from `async param => …` to `async ({ ...param }) => …`.
+   *
+   * Playwright requires the first parameter of every test/hook callback to use
+   * object destructuring syntax so it can statically determine which fixtures
+   * the test depends on. ReScript always compiles record-pattern arguments to a
+   * plain identifier (`param`), which Playwright rejects.
+   *
+   * The plugin uses object-rest destructuring (`{ ...param }`) so the callback
+   * body is completely unchanged — `param.page` etc. continue to work.
+   */
+  build: {
+    babelPlugins: [["./src/bindings/playwright-babel-plugin.mjs"]],
+  },
+
   /**
    * Start Wrangler Pages dev server automatically for local runs so that
    * `yarn e2e` works after `yarn build` with zero extra setup.

playwright.config.mjs

@@ -0,0 +1,53 @@
+#!/usr/bin/env node
+/**
+ * postprocess-e2e.mjs
+ *
+ * Rewrites ReScript-compiled e2e test files so that Playwright can parse
+ * fixture dependencies from the test callback signatures.
+ *
+ * Playwright calls `fn.toString()` on every test/hook callback and requires
+ * the first parameter to use object destructuring syntax, e.g.:
+ *
+ *   async ({ page }) => { … }
+ *
+ * ReScript always compiles record-pattern arguments to a plain identifier:
+ *
+ *   async param => { … }
+ *
+ * This script rewrites every occurrence of `async param =>` to
+ * `async ({ ...param }) =>` in the generated e2e .jsx files. Using object-rest
+ * (`{ ...param }`) satisfies Playwright's `{…}` check while leaving the
+ * callback body completely unchanged — `param.page` etc. continue to work
+ * because `param` is still in scope with all the same properties.
+ */
+
+import { readFileSync, writeFileSync } from "node:fs";
+import { readdir } from "node:fs/promises";
+import { join } from "node:path";
+import { fileURLToPath } from "node:url";
+
+const __dirname = fileURLToPath(new URL(".", import.meta.url));
+const e2eDir = join(__dirname, "..", "e2e");
+
+const files = (await readdir(e2eDir)).filter((f) => f.endsWith(".test.jsx"));
+
+if (files.length === 0) {
+  console.error("postprocess-e2e: no .test.jsx files found in e2e/");
+  process.exit(1);
+}
+
+for (const file of files) {
+  const filePath = join(e2eDir, file);
+  const original = readFileSync(filePath, "utf8");
+  const rewritten = original.replaceAll(
+    "async param =>",
+    "async ({ ...param }) =>",
+  );
+
+  if (rewritten !== original) {
+    writeFileSync(filePath, rewritten, "utf8");
+    console.log(`postprocess-e2e: patched ${file}`);
+  } else {
+    console.log(`postprocess-e2e: no changes needed in ${file}`);
+  }
+}

scripts/postprocess-e2e.mjs

@@ -27,41 +27,48 @@ external context: page => browserContext = "context"
  * automatically when CHROMATIC_PROJECT_TOKEN is present in the environment;
  * when the token is absent every `takeSnapshot` call is a no-op so the suite
  * still runs as ordinary Playwright tests.
+ *
+ * `test` and all hooks are bound directly to `@chromatic-com/playwright` so
+ * that Playwright's source-location tracking (which captures frame[1] of a
+ * fresh `Error.captureStackTrace`) points at the test file rather than any
+ * intermediate wrapper. ReScript's compiled callbacks are rewritten into the
+ * required object-destructuring form by a Babel plugin configured in
+ * `playwright.config.mjs`.
  * ─────────────────────────────────────────────────────────────────────────────
  */
-@module("./playwright-shim.mjs")
+@module("@chromatic-com/playwright")
 external test: (string, fixtures => promise<unit>) => unit = "test"
 
 /** Group related tests under a shared label. */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external describe: (string, unit => unit) => unit = "describe"
 
 /** Run a hook before every test in the current scope. */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external beforeEach: (fixtures => promise<unit>) => unit = "beforeEach"
 
 /** Run a hook after every test in the current scope. */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external afterEach: (fixtures => promise<unit>) => unit = "afterEach"
 
 /** Run a hook once before all tests in the current scope (worker-level). */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external beforeAll: (fixtures => promise<unit>) => unit = "beforeAll"
 
 /** Run a hook once after all tests in the current scope (worker-level). */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external afterAll: (fixtures => promise<unit>) => unit = "afterAll"
 
 /**
  * Mark a test as the only one that should run in this file while debugging.
  * Tests decorated with `only` must not be committed — set `forbidOnly: true`
  * in playwright.config.mjs to enforce this in CI.
  */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external only: (string, fixtures => promise<unit>) => unit = "only"
 
 /** Skip a test unconditionally. */
-@module("./playwright-shim.mjs") @scope("test")
+@module("@chromatic-com/playwright") @scope("test")
 external skip: (string, fixtures => promise<unit>) => unit = "skip"
 
 /**

src/bindings/Playwright.res

@@ -1,66 +1,26 @@
 /**
  * playwright-shim.mjs
  *
- * Playwright's fixture-injection system inspects the source of the callback
- * passed to `test()` and requires the first parameter to use object
- * destructuring syntax, e.g. `async ({ page }) => {}`.
+ * Provides `takeSnapshot` (with viewport-clipping and automatic testInfo
+ * injection) and re-exports `expect` from `@chromatic-com/playwright`.
  *
- * ReScript always compiles record-destructuring arguments to the non-
- * destructuring form `async param => { let page = param.page; … }`, which
- * Playwright rejects with "First argument must use the object destructuring
- * pattern".
+ * `test` and all hook functions are bound directly to `@chromatic-com/playwright`
+ * in `Playwright.res` so that Playwright's source-location tracking (which
+ * captures frame[1] of a fresh `Error.captureStackTrace`) points at the test
+ * file rather than any intermediate wrapper.
  *
- * This shim sits between the ReScript bindings and `@chromatic-com/playwright`.
- * Every function that accepts a `fixtures` callback is wrapped so that the
- * outer function Playwright sees uses real destructuring syntax, and the inner
- * ReScript-compiled callback is called with the same object.
- *
- * The ReScript `Playwright.res` bindings point at this file via
- * `@module("./playwright-shim.mjs")` instead of pointing directly at
- * `@chromatic-com/playwright`.
+ * ReScript's compiled test callbacks (`async param => { let page = param.page; … }`)
+ * are rewritten into the object-destructuring form Playwright requires by the
+ * Babel plugin in `playwright-babel-plugin.mjs`, configured via `transform` in
+ * `playwright.config.mjs`.
  */
 
 import {
-  test as _test,
+  test,
   expect,
   takeSnapshot as _takeSnapshot,
 } from "@chromatic-com/playwright";
 
-/** Wrap a ReScript fixtures-callback so Playwright sees destructuring syntax. */
-function wrapFn(fn) {
-  return async ({ page, context }) => fn({ page, context });
-}
-
-/**
- * `test(name, fn)` — register a single test.
- * Attach the same helper methods that Playwright's `test` object exposes so
- * that `@scope("test")` bindings in ReScript continue to work correctly.
- */
-export function test(name, fn) {
-  return _test(name, wrapFn(fn));
-}
-
-/** `test.describe(name, fn)` — group tests; no fixture injection needed. */
-test.describe = (name, fn) => _test.describe(name, fn);
-
-/** `test.only(name, fn)` — run only this test while debugging. */
-test.only = (name, fn) => _test.only(name, wrapFn(fn));
-
-/** `test.skip(name, fn)` — unconditionally skip a test. */
-test.skip = (name, fn) => _test.skip(name, wrapFn(fn));
-
-/** `test.beforeEach(fn)` — run before every test in the current scope. */
-test.beforeEach = (fn) => _test.beforeEach(wrapFn(fn));
-
-/** `test.afterEach(fn)` — run after every test in the current scope. */
-test.afterEach = (fn) => _test.afterEach(wrapFn(fn));
-
-/** `test.beforeAll(fn)` — run once before all tests in the current scope. */
-test.beforeAll = (fn) => _test.beforeAll(wrapFn(fn));
-
-/** `test.afterAll(fn)` — run once after all tests in the current scope. */
-test.afterAll = (fn) => _test.afterAll(wrapFn(fn));
-
 /**
  * `takeSnapshot(page, name)` — capture a Chromatic visual snapshot.
  *
@@ -97,7 +57,7 @@ export async function takeSnapshot(page, name) {
   }, viewportHeight);
 
   try {
-    await _takeSnapshot(page, name, _test.info());
+    await _takeSnapshot(page, name, test.info());
   } finally {
     // Always restore original styles, even if takeSnapshot throws.
     await page.evaluate((prev) => {