fix: Playwright package release build

Author: dmtrKovalenko

.github/workflows/build.yml

@@ -12,7 +12,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Zig
         uses: mlugg/setup-zig@v2
@@ -127,7 +127,7 @@ jobs:
         shell: bash
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Zig
         uses: mlugg/setup-zig@v2
@@ -175,7 +175,7 @@ jobs:
         shell: bash
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Setup Zig
         uses: mlugg/setup-zig@v2
@@ -203,7 +203,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Download x86_64-linux artifact
         uses: actions/download-artifact@v4
@@ -238,7 +238,7 @@ jobs:
       image: mcr.microsoft.com/playwright:v1.56.0-noble
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Download x86_64-linux artifact
         uses: actions/download-artifact@v4
@@ -279,7 +279,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout code
-        uses: actions/checkout@v4
+        uses: actions/checkout@v5
 
       - name: Run typos
         uses: crate-ci/typos@master
@@ -293,7 +293,7 @@ jobs:
     runs-on: ubuntu-latest
     steps:
       - name: Checkout
-        uses: actions/checkout@v1
+        uses: actions/checkout@v5
 
       - name: Download all built binaries
         uses: actions/download-artifact@v4
@@ -330,6 +330,10 @@ jobs:
         env:
           NODE_AUTH_TOKEN: ${{ secrets.NPM_TOKEN }}
 
+      - name: Build playwright-odiff package
+        working-directory: npm_packages/playwright-odiff
+        run: npm run build
+
       - name: Publish playwright-odiff package
         working-directory: npm_packages/playwright-odiff
         run: npm publish
@@ -342,3 +346,24 @@ jobs:
           files: "binaries/*"
         env:
           GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
+
+  commit-sanity-check:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout
+        uses: actions/checkout@v5
+
+      - name: Verify binary was not commit in npm package folder 
+        run: |
+          if ! file ./npm_packages/odiff-bin/bin/odiff.exe | grep -q "Node.js script executable"; then 
+            echo "Looks like you commited a local binary to ./npm_packages/odiff-bin/bin/odiff.exe. Please revert"
+            exit 1
+          fi
+
+      - name: Check docs in readme
+        run: |
+          npm run update-readme
+          if ! git diff --quiet; then
+            echo "Please run `npm run update-readme` and commit changes."
+            exit 1
+          fi

images/diff.png

@@ -1,14 +1,15 @@
 {
   "name": "playwright-odiff",
-  "version": "4.3.2",
+  "version": "4.4.0-beta.1",
   "description": "Playwright custom matcher using odiff for screenshot comparison",
   "type": "module",
   "main": "dist/index.js",
   "types": "dist/index.d.ts",
   "exports": {
     ".": {
+      "types": "./dist/index.d.ts",
       "import": "./dist/index.js",
-      "types": "./dist/index.d.ts"
+      "default": "./dist/index.js"
     }
   },
   "scripts": {

npm_packages/playwright-odiff/package.json

@@ -1,6 +1,6 @@
-import type { ODiffScreenshotOptions } from "./types";
+import type { ODiffScreenshotOptions } from "./types.js";
 
-export { toHaveScreenshotOdiff } from "./toHaveScreenshotOdiff";
+export { toHaveScreenshotOdiff } from "./toHaveScreenshotOdiff.js";
 export type { ODiffScreenshotOptions as OdiffScreenshotOptions };
 
 // Type augmentation for Playwright's expect

npm_packages/playwright-odiff/src/index.ts

@@ -1,6 +1,6 @@
 import { expect } from "@playwright/test";
-import { toHaveScreenshotOdiff } from "./toHaveScreenshotOdiff";
-import "./types";
+import { toHaveScreenshotOdiff } from "./toHaveScreenshotOdiff.js";
+import "./types.js";
 
 expect.extend({
   toHaveScreenshotOdiff,

npm_packages/playwright-odiff/src/setup.ts

@@ -8,7 +8,7 @@
 import fs from "fs";
 import path from "path";
 import type { TestInfo, Locator } from "@playwright/test";
-import type { ODiffScreenshotOptions, MatcherResult } from "./types";
+import type { ODiffScreenshotOptions, MatcherResult } from "./types.js";
 import { ODiffOptions } from "odiff-bin";
 
 type NameOrSegments = string | string[];
@@ -269,7 +269,19 @@ export class SnapshotHelper {
     return this.createMatcherResult(output.join("\n"), false, log);
   }
 
-  handleMatching(): MatcherResult {
+  // becuase we write screenshots directly to the output path we
+  // have to simply unlink them on success which is a very fast operation
+  async handleMatching(): Promise<MatcherResult> {
+    await Promise.all([
+      fs.promises.unlink(this.actualPath).catch(() => {}),
+      fs.promises.unlink(this.previousPath).catch(() => {}),
+      fs.promises.unlink(this.diffPath).catch(() => {}),
+    ]).catch(() => {});
+
+    // Try to remove the test-results directory if it's empty
+    const testResultsDir = path.dirname(this.actualPath);
+    await fs.promises.rmdir(testResultsDir).catch(() => {});
+
     return this.createMatcherResult("", true);
   }
 

npm_packages/playwright-odiff/src/snapshotHelper.ts

@@ -2,9 +2,9 @@ import fs from "fs/promises";
 import fssync from "fs";
 import path from "path";
 import type { Page, Locator, TestInfo } from "@playwright/test";
-import type { ODiffScreenshotOptions, MatcherResult } from "./types";
+import type { ODiffScreenshotOptions, MatcherResult } from "./types.js";
 import { test } from "@playwright/test";
-import { SnapshotHelper } from "./snapshotHelper";
+import { SnapshotHelper } from "./snapshotHelper.js";
 import { ODiffServer } from "odiff-bin";
 
 type ODiffServerType = InstanceType<typeof ODiffServer>;
@@ -422,15 +422,14 @@ export async function toHaveScreenshotOdiff(
         true,
       );
     }
-    return helper.handleMatching();
+    return await helper.handleMatching();
   }
 
   if (
     helper.updateSnapshots === "changed" ||
     helper.updateSnapshots === "all"
   ) {
     if (result.hasActual) {
-      // Copy actual to expected (no read/write, just kernel copy)
       await fs.copyFile(helper.actualPath, helper.expectedPath);
       console.log(helper.expectedPath + " is re-generated, writing actual.");
       return helper.createMatcherResult(

npm_packages/playwright-odiff/src/toHaveScreenshotOdiff.ts

@@ -11,13 +11,11 @@ test.describe("toHaveScreenshotOdiff - Dynamic Content", () => {
     await page.goto(dynamicPagePath);
     await page.waitForLoadState("networkidle");
 
-    // Take first screenshot with static content
     await expect(page).toHaveScreenshotOdiff("dynamic-first.png");
 
-    // Click trigger to update the number
     await page.click("#trigger");
+    await page.waitForTimeout(100);
 
-    // Screenshots should be different due to changed number
     await expect(page).not.toHaveScreenshotOdiff("dynamic-first.png");
   });
 

npm_packages/playwright-odiff/test/dynamic-content.spec.ts

@@ -1,5 +1,6 @@
 <!DOCTYPE html>
 <html lang="en">
+
 <head>
     <meta charset="UTF-8">
     <meta name="viewport" content="width=device-width, initial-scale=1.0">
@@ -59,6 +60,7 @@
         }
     </style>
 </head>
+
 <body>
     <div class="container">
         <div class="label">Performance Now</div>
@@ -69,10 +71,14 @@
     <script>
         function updateNumber() {
             document.getElementById('number').textContent = performance.now().toFixed(0);
+            setInterval(() => {
+                document.getElementById('number').textContent = performance.now().toFixed(0);
+            }, 10)
         }
 
         // Update number once when trigger button is clicked
         document.getElementById('trigger').addEventListener('click', updateNumber);
     </script>
 </body>
+
 </html>

npm_packages/playwright-odiff/test/fixtures/dynamic-page.html

@@ -3,10 +3,10 @@
     // Language and Environment
     "target": "ES2022",
     "lib": ["ES2022"],
-    "module": "ES2022",
+    "module": "nodenext",
 
     // Module Resolution
-    "moduleResolution": "bundler",
+    "moduleResolution": "nodenext",
     "resolveJsonModule": true,
     "esModuleInterop": true,
     "allowSyntheticDefaultImports": true,