search

microsoft / storywright

Capture screenshots for React Storybook using Playwright
MIT License
47 stars 9 forks source link

[Bug] StoryWright fails to fetch Steps when hooks are used in story #51

Open TristanWatanabe opened 1 year ago

TristanWatanabe commented 1 year ago

Issue:

Expected Behavior:

Steps to Reproduce:

1) Clone repro branch https://github.com/TristanWatanabe/fluentui/tree/storywright-hooks-bug 2) Run yarn workspace @fluentui/react-components vr:build 3) Run yarn workspace @fluentui/react-components vr:test 4) Observe dist/screenshots folder and see issue - only a static screenshot is taken (Component.Example With Hook.chromium.png). Comment out the useStyles() invocation in the story in the src/stories/Example/Example.stories.tsx file and re-run steps 2 and 3 to see the expected behavior where BOTH static screenshot and a steps screenshot are taken.

TristanWatanabe commented 1 year ago

Getting this error in the console when storyFn is invoked by the GetStories.js script and the story uses a react hook. It works on the storybook story itself but when storywright tries to invoke it, it breaks:

image

vinodkumarsharma276 commented 1 year ago

Hi @TristanWatanabe, Storywright is not meant to be used on a running Storybook server. To see the benefits of StoryWright:

  1. you need to produce assets of Storybook build by using build-storybook
  2. Assuming you've added storywright as a dependency in your project, you can execute storywright command passing assets locatios (in Step 1) as a config.
  3. This will open chrome by default in headless mode and you can expect screenshots @ dist/screenshots/storybook

For all possible configs refer --> https://github.com/microsoft/storywright/blob/main/src/main.ts

TristanWatanabe commented 1 year ago

@vinodkumarsharma276 - We do use StoryWright in the manner you described above. As mentioned in the original post, the issue is that when a react hook is used in a story, StoryWright silently fails and does not take screenshots for stories that have steps applied. The screenshot i shared in my previous post was just to show what might be the possible cause of this issue