waitFor leads to timeout with storybook 7

[F43nd1r]

When using a waitFor statement with storybook 7 storycap will time out with

warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
error Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
ScreenshotTimeoutError: Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
    at Timeout._onTimeout (C:\Git\storycap-storybook7-reproducer\node_modules\.store\storycap-npm-4.0.0-881e192bdd\node_modules\storycap\lib\node\capturing-browser.js:132:24)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)

A small reproducer is available here https://github.com/F43nd1r/storycap-storybook7-reproducer

[jacktan165]

I have the same issue but with

  play: async ({ canvasElement }) => {
    const canvas = within(canvasElement);

    const room = await canvas.findByText('Room');
    await userEvent.click(room);
  },

EDIT:
It looks like running this test by itself passed. Storycap starts to timeout intermittently if I have multiple stories. This story might randomly passed or failed in Storybook v7, but for anything below v6 it consistently passed all stories.

It looks like it is not the stories itself that are the problem. I have a relatively simple story that displays a Paragraph and that timeout. There is a bug somewhere in v4.0.0 which I am trying to have a look at right now (I might not be able to solve it, since I am not familiar with it).

[jacktan165]

I can't figure it out sorry, and I don't have time to look at it. Essentially storycap just needs to support Storybook v7.

[Gvegas12]

При использовании waitFor инструкции с storybook 7 время ожидания storycap истекает с

warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
error Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
ScreenshotTimeoutError: Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
    at Timeout._onTimeout (C:\Git\storycap-storybook7-reproducer\node_modules\.store\storycap-npm-4.0.0-881e192bdd\node_modules\storycap\lib\node\capturing-browser.js:132:24)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)

Небольшой репродуктор доступен здесь https://github.com/F43nd1r/storycap-storybook7-reproducer

Hi!
The following code solved this problem:

storybook/preview.ts

import { Preview } from "@storybook/react";

import { withScreenshot } from "storycap";

const preview: Preview = {
	parameters: {
		actions: { argTypesRegex: "^on[A-Z].*" },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/,
			},
		},
	},
	decorators: [withScreenshot()], // <--- just added `withScreenshot()` to `decorators`
};

export default preview;

[undesicimo]

При использовании waitFor инструкции с storybook 7 время ожидания storycap истекает с

warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
warn Capture timeout exceeded in 5000 msec. Retry to screenshot this story after this sequence. PopupButton Story
error Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
ScreenshotTimeoutError: Screenshot timeout exceeded. 'capture' function is not triggered in 5000 ms. Target story: PopupButton/Story
    at Timeout._onTimeout (C:\Git\storycap-storybook7-reproducer\node_modules\.store\storycap-npm-4.0.0-881e192bdd\node_modules\storycap\lib\node\capturing-browser.js:132:24)
    at listOnTimeout (node:internal/timers:559:17)
    at processTimers (node:internal/timers:502:7)

Небольшой репродуктор доступен здесь https://github.com/F43nd1r/storycap-storybook7-reproducer

Hi! The following code solved this problem:

storybook/preview.ts

import { Preview } from "@storybook/react";

import { withScreenshot } from "storycap";

const preview: Preview = {
	parameters: {
		actions: { argTypesRegex: "^on[A-Z].*" },
		controls: {
			matchers: {
				color: /(background|color)$/i,
				date: /Date$/,
			},
		},
	},
	decorators: [withScreenshot()], // <--- just added `withScreenshot()` to `decorators`
};

export default preview;

invoking the withScreenshot worked for me as well. Seems to be marked as deprecated though. storycap now runs on managed mode without timeouts

[wg-kim]

this is also work in storybook8.