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
@@ -274,12 +274,63 @@ jobs:
           path: npm_packages/playwright-odiff/test-results
           retention-days: 7
 
+  valgrind:
+    name: Valgrind Memory Check
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v5
+
+      - name: Setup Zig
+        uses: mlugg/setup-zig@v2
+        with:
+          version: 0.15.2
+
+      - name: Install nasm and valgrind
+        run: |
+          sudo apt-get update
+          sudo apt-get install -y nasm valgrind
+
+      - name: Build with debug symbols
+        run: |
+          zig build -Doptimize=Debug
+
+      - name: Run valgrind memcheck - normal mode with diff output
+        run: |
+          set +e
+          valgrind --leak-check=full --show-leak-kinds=all --error-exitcode=99 --errors-for-leak-kinds=definite,possible \
+            --suppressions=.valgrind.supp \
+            ./zig-out/bin/odiff test/png/orange.png test/png/orange_changed.png /tmp/diff-output.png 2>&1 | grep -vE "(DWARF2 reader: Badly formed|Can't handle line info entry)"
+          EXIT_CODE=$?
+          if [ $EXIT_CODE -eq 99 ]; then
+            echo "ERROR: Valgrind detected memory errors!"
+            exit 1
+          else
+            echo "Valgrind passed, command exit code: $EXIT_CODE"
+            exit 0
+          fi
+
+      - name: Run valgrind memcheck - normal mode without diff output
+        run: |
+          set +e
+          valgrind --leak-check=full --show-leak-kinds=all --error-exitcode=99 --errors-for-leak-kinds=definite,possible \
+            --suppressions=.valgrind.supp \
+            ./zig-out/bin/odiff test/png/orange.png test/png/orange_changed.png 2>&1 | grep -vE "(DWARF2 reader: Badly formed|Can't handle line info entry)"
+          EXIT_CODE=$?
+          if [ $EXIT_CODE -eq 99 ]; then
+            echo "ERROR: Valgrind detected memory errors!"
+            exit 1
+          else
+            echo "Valgrind passed, command exit code: $EXIT_CODE"
+            exit 0
+          fi
+
   spellcheck:
     name: Spell check
     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 +344,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
@@ -321,7 +372,7 @@ jobs:
           registry-url: "https://registry.npmjs.org"
           cache-dependency-path: "package-lock.json"
 
-      - name: Copy root readme 
+      - name: Copy root readme
         run: cp README.md npm_packages/odiff-bin/README.md
 
       - name: Publish odiff-bin package
@@ -330,6 +381,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 +397,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

.valgrind.supp

@@ -0,0 +1,26 @@
+{
+   zlib_deflate_uninit_hash
+   Memcheck:Cond
+   fun:slide_hash
+   fun:fill_window
+   fun:deflate_fast
+   fun:deflate
+}
+
+{
+   zlib_deflate_uninit_value
+   Memcheck:Value8
+   fun:slide_hash
+   fun:fill_window
+   fun:deflate_fast
+   fun:deflate
+}
+
+{
+   zlib_deflate_uninit_value_4
+   Memcheck:Value4
+   fun:slide_hash
+   fun:fill_window
+   fun:deflate_fast
+   fun:deflate
+}

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 {
+  // because 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>