fix issue and add test

.github/workflows/main.yml

@@ -13,7 +13,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: |
@@ -33,6 +33,9 @@ jobs:
       - name: Build Example Storybook v8
         run: npm run build-example-storybook-v8
 
+      - name: Build Example Storybook v8 compareAfterShot
+        run: npm run build-example-storybook-v8-compareAfterShot
+
       - name: Build Example Pages
         run: npm run build-example-next-js-pages
 

.github/workflows/pr.yml

@@ -14,7 +14,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: |
@@ -34,6 +34,9 @@ jobs:
       - name: Build Example Storybook v8
         run: npm run build-example-storybook-v8
 
+      - name: Build Example Storybook v8 compareAfterShot
+        run: npm run build-example-storybook-v8-compareAfterShot
+
       - name: Test
         run: npm run test
 
@@ -43,13 +46,13 @@ jobs:
       - name: Publish to Registry
         uses: elgohr/Publish-Docker-Github-Action@a0b8f0e2d777562c13523b9a4d9480bae383486b
         env:
-          RELEASE_VERSION: '${{ env.DOCKER_TAG }}'
+          RELEASE_VERSION: "${{ env.DOCKER_TAG }}"
         with:
           name: lostpixel/lost-pixel-pr-build
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-          tags: '${{ env.DOCKER_TAG }}'
-          buildoptions: '--compress --force-rm'
+          tags: "${{ env.DOCKER_TAG }}"
+          buildoptions: "--compress --force-rm"
 
       - name: Slack Notification
         uses: 8398a7/action-slack@a74b761b4089b5d730d813fbedcd2ec5d394f3af

.github/workflows/release.yml

@@ -16,7 +16,7 @@ jobs:
         uses: actions/setup-node@v3
         with:
           node-version: 18.x
-          cache: 'npm'
+          cache: "npm"
 
       - name: Install dependencies
         run: |
@@ -36,6 +36,9 @@ jobs:
       - name: Build Example Storybook v8
         run: npm run build-example-storybook-v8
 
+      - name: Build Example Storybook v8 compareAfterShot
+        run: npm run build-example-storybook-v8-compareAfterShot
+
       - name: Test
         run: npm run test
 
@@ -87,8 +90,8 @@ jobs:
           name: lostpixel/lost-pixel
           username: ${{ secrets.DOCKER_USERNAME }}
           password: ${{ secrets.DOCKER_PASSWORD }}
-          tags: 'latest,${{ github.event.release.tag_name }}'
-          buildoptions: '--compress --force-rm'
+          tags: "latest,${{ github.event.release.tag_name }}"
+          buildoptions: "--compress --force-rm"
           platforms: linux/amd64,linux/arm64
 
       - name: Slack Notification

examples/example-storybook-v8-compareAfterShot/.gitignore

@@ -0,0 +1,24 @@
+# See https://help.github.com/articles/ignoring-files/ for more about ignoring files.
+
+# dependencies
+/node_modules
+/.pnp
+.pnp.js
+
+# testing
+/coverage
+
+# production
+/build
+
+# misc
+.DS_Store
+.env.local
+.env.development.local
+.env.test.local
+.env.production.local
+
+npm-debug.log*
+
+# Storybook build
+storybook-static/

examples/example-storybook-v8-compareAfterShot/.lostpixel/.gitignore

@@ -0,0 +1,2 @@
+current
+difference

examples/example-storybook-v8-compareAfterShot/.storybook/main.ts

@@ -0,0 +1,25 @@
+import type { StorybookConfig } from "@storybook/react-webpack5";
+
+const config: StorybookConfig = {
+  stories: ["../src/**/*.mdx", "../src/**/*.stories.@(js|jsx|mjs|ts|tsx)"],
+  addons: [
+    "@storybook/addon-links",
+    "@storybook/addon-essentials",
+    "@storybook/preset-create-react-app",
+    "@storybook/addon-onboarding",
+    "@storybook/addon-interactions",
+  ],
+  framework: {
+    name: "@storybook/react-webpack5",
+    options: {
+      builder: {
+        useSWC: true,
+      },
+    },
+  },
+  docs: {
+    autodocs: "tag",
+  },
+  staticDirs: ["../public"],
+};
+export default config;

examples/example-storybook-v8-compareAfterShot/.storybook/preview.ts

@@ -0,0 +1,15 @@
+import type { Preview } from "@storybook/react";
+
+const preview: Preview = {
+  parameters: {
+    actions: { argTypesRegex: "^on[A-Z].*" },
+    controls: {
+      matchers: {
+        color: /(background|color)$/i,
+        date: /Date$/i,
+      },
+    },
+  },
+};
+
+export default preview;

examples/example-storybook-v8-compareAfterShot/README.md

@@ -0,0 +1,21 @@
+<h1>Create React App Latest (Webpack | TypeScript)</h1>
+
+<p>
+  This is project generated to serve as a reproduction starter for Storybook.
+</p>
+
+<a  href="https://stackblitz.com/github/storybookjs/sandboxes/tree/next/cra/default-ts/after-storybook?preset=node=">
+  View it in Stackblitz
+</a>
+
+<h3>Testing instructions</h3>
+
+<p>Install dependencies:</p>
+<pre>
+  npm install
+</pre>
+
+<p>Run Storybook:</p>
+<pre>
+  npm run storybook
+</pre>

examples/example-storybook-v8-compareAfterShot/lostpixel.config.ts

@@ -0,0 +1,20 @@
+// @ts-nocheck
+
+import { CustomProjectConfig } from 'lost-pixel';
+
+export const config: CustomProjectConfig = {
+  storybookShots: {
+    storybookUrl: './storybook-static',
+    breakpoints: [320, 768],
+  },
+  generateOnly: true,
+  failOnDifference: true,
+
+  flakynessRetries: 5,
+  compareAfterShot: true,
+
+  waitBetweenFlakynessRetries: 500,
+  waitBeforeScreenshot: 100,
+  waitForFirstRequest: 100,
+  waitForLastRequest: 100,
+};

examples/example-storybook-v8/lostpixel.config.ts

@@ -9,4 +9,12 @@ export const config: CustomProjectConfig = {
   },
   generateOnly: true,
   failOnDifference: true,
+
+  compareAfterShot: true,
+  flakynessRetries: 5,
+  // These times are greatly reduced due to compareAfterShot!
+  waitBetweenFlakynessRetries: 500,
+  waitBeforeScreenshot: 0,
+  waitForFirstRequest: 0,
+  waitForLastRequest: 0,
 };

package.json

@@ -15,6 +15,7 @@
     "build-example-storybook-v6.4": "rimraf examples/example-storybook-v6.4/storybook-static && docker run --rm -v $PWD/examples/example-storybook-v6.4:/storybook -w /storybook node:16-alpine sh -c 'npm install && npm run build-storybook'",
     "build-example-storybook-v6.5-storystore-v7": "rimraf examples/example-storybook-v6.5-storystore-v7/storybook-static && docker run --rm -v $PWD/examples/example-storybook-v6.5-storystore-v7:/storybook -w /storybook node:16-alpine sh -c 'npm install && npm run build-storybook'",
     "build-example-storybook-v8": "rimraf examples/example-storybook-v8/storybook-static && docker run --rm -v $PWD/examples/example-storybook-v8:/storybook -w /storybook node:16-alpine sh -c 'npm install && npm run build-storybook'",
+    "build-example-storybook-v8-compareAfterShot": "rimraf examples/example-storybook-v8-compareAfterShot/storybook-static && docker run --rm -v $PWD/examples/example-storybook-v8-compareAfterShot:/storybook -w /storybook node:16-alpine sh -c 'npm install && npm run build-storybook'",
     "build-example-next-js-pages": "cd examples/example-next-js-pages && npm ci --legacy-peer-deps && npm run build",
     "build-example-ladle": "cd examples/example-ladle && npm ci && npm run build",
     "build-example-vite": "cd examples/example-vite-app && npm ci && npm run build",

src/checkDifferences.ts

@@ -22,7 +22,7 @@ export const checkDifference = async ({
   total,
 }: {
   item: [number, ShotItem];
-  total?: number;
+  total: number;
 }): Promise<Difference> => {
   const logger = (message: string) => {
     log

src/runner.ts

@@ -42,9 +42,15 @@ export const runner = async (config: GenerateOnlyModeConfig) => {
 
     createShotsFolders();
 
-    log.process('info', 'general', '📸 Creating shots');
+    const { compareAfterShot } = config;
+
+    log.process(
+      'info',
+      'general',
+      `📸 Creating shots${compareAfterShot ? ' with compareAfterShot' : ''}`,
+    );
     const { shotItems, differences: differencesCreateShots } =
-      await createShots({ compareAfterShot: config.compareAfterShot });
+      await createShots({ compareAfterShot });
 
     const createShotsStop = process.hrtime(createShotsStart);
 

src/shots/shots.ts

@@ -19,19 +19,22 @@ import { resizeViewportToFullscreen, waitForNetworkRequests } from './utils';
 
 const takeScreenShot = async ({
   browser,
-  item: [index, shotItem],
+  item,
   logger,
   compareAfterShot,
+  total,
 }: {
   browser: Browser;
   item: [number, ShotItem];
   logger: ReturnType<typeof log.item>;
   compareAfterShot?: boolean;
+  total: number;
 }): Promise<{
   success: boolean;
   /** Defined if using compareAfterShot */
   difference?: Difference;
 }> => {
+  const [index, shotItem] = item;
   const context = await browser.newContext(shotItem.browserConfig);
   const page = await context.newPage();
   let success = false;
@@ -184,10 +187,11 @@ const takeScreenShot = async ({
         logger.process(
           'info',
           'general',
-          `Screenshot of '${shotItem.shotName}' taken${config.flakynessRetries > 0 ? ` (Retry ${retryCount})` : ''}. Now comparing.`,
+          `Screenshot of '${shotItem.shotName}' taken${retryCount > 0 ? ` (Retry ${retryCount})` : ''}.`,
         );
         difference = await checkDifference({
           item: [index, shotItem],
+          total,
         });
 
         if (difference.status === 'equivalent') break;
@@ -237,15 +241,18 @@ const takeScreenShot = async ({
 
 export const takeScreenShots = async (
   shotItems: ShotItem[],
-  props: {
-    browser?: BrowserType;
+  {
+    browser: _browser,
+    compareAfterShot,
+  }: {
+    browser: BrowserType;
     compareAfterShot?: boolean;
   },
 ): Promise<{ differences?: Differences }> => {
-  const browser = await (props.browser ?? getBrowser()).launch();
+  const browser = await (_browser ?? getBrowser()).launch();
   const total = shotItems.length;
 
-  const differences: Differences | undefined = props.compareAfterShot
+  const differences: Differences | undefined = compareAfterShot
     ? {
         aboveThresholdDifferenceItems: [],
         comparisonResults: {},
@@ -274,7 +281,13 @@ export const takeScreenShots = async (
       );
 
       const startTime = Date.now();
-      const result = await takeScreenShot({ browser, item, logger });
+      const result = await takeScreenShot({
+        browser,
+        item,
+        logger,
+        compareAfterShot,
+        total,
+      });
       const endTime = Date.now();
       const elapsedTime = Number((endTime - startTime) / 1000).toFixed(3);
 

test-on-examples.sh

@@ -13,6 +13,10 @@ cd examples \
 && cd example-storybook-v8 \
 && node ../../dist/bin.js \
 && cd .. \
+&& echo "======== Testing: example-storybook-v8-compareAfterShot" \
+&& cd example-storybook-v8-compareAfterShot \
+&& node ../../dist/bin.js \
+&& cd .. \
 && echo "======== Testing: example-next-js-pages" \
 && cd example-next-js-pages \
 && node ../../dist/bin.js \