Capture screenshots for React Storybook using Playwright
Перейти к файлу
siyadava-sindhu 4fc65da673
Bumping React & types/React to V18 (#64)
* Bumping React & types/React to V18

* updating bump version to 1.0.0 since it has major R18 upgrade

* moving react and types/react to devdeps&peerdeps

* fixing syntactical error
2024-03-19 21:07:11 +05:30
.github/workflows Add prettier 2021-07-22 17:16:27 +02:00
.vscode Implementing use cases 2022-08-18 16:56:10 +05:30
bin Storywright - Capture screenshot for storybook (#13) 2021-07-09 11:15:22 +05:30
src Adding functionality to skip specific stories to skip DOM parsing 2023-08-18 11:41:49 +05:30
.gitignore Sanitizing code 2022-11-03 13:28:06 +05:30
CODE_OF_CONDUCT.md Initial CODE_OF_CONDUCT.md commit 2021-04-10 05:15:15 -07:00
LICENSE Initial LICENSE commit 2021-04-10 05:15:16 -07:00
README.md Insert documentation links (#47) 2022-10-18 12:26:07 +05:30
SECURITY.md Add prettier 2021-07-22 17:16:27 +02:00
SUPPORT.md Add prettier 2021-07-22 17:16:27 +02:00
package-lock.json Resolving package.json issue 2022-11-11 14:12:29 +05:30
package.json Bumping React & types/React to V18 (#64) 2024-03-19 21:07:11 +05:30
pageinit.back Fix timeout calculation in page (#29) 2021-12-15 18:05:21 +05:30
tsconfig.json Storywright - Capture screenshot for storybook (#13) 2021-07-09 11:15:22 +05:30
yarn.lock Bumping Dom Diffing 2023-03-27 18:47:33 +05:30

README.md

Storywright

Storywright is a tool to capture screenshots for React Storybook using Playwright.

How it works

Storywright works alongside Storybook to produce screenshots of the stories. In addition, it has capability to interact with the stories by clicking, hovering, waiting and many more actions.

Storywright exposes a React component, , which can be added as a decorator in stories. For eg:

If we have a button component, , and a story around that component, Button.stories.tsx, then:

In Button.stories.tsx:

const StoryWrightDemo = (story) => 
    <StoryWright>
        {story()}
    </StoryWright>
}

export default {
    title: "Button",
    decorators: [StoryWrightDemo]
}

export const ButtonStory = () => <Button></Button>

Above code will take screenshot of the whole page where Button is rendered.

Testing Interactions

To test interactions, you can add Steps to each state to interact with the UI. This is useful for clicking buttons, filling out forms, and getting the UI into the proper visual state to test.

Here is an same example as above with interactions:

const StoryWrightDemo = (story) => 
    <StoryWright
        steps={new Steps()
        click('.btn')
        .snapshot('snapshot1')
        .end()}
    >
        {story()}
    </StoryWright>
}

export default {
    title: "Button",
    decorators: [StoryWrightDemo]
}

export const ButtonStory = () => <Button></Button>

Following methods are currently available:

  • click(selector: string)
  • snapshot(filename: string)
  • hover(selector: string)
  • mouseUp(selector: string)
  • mouseDown(selector: string)
  • setValue(selector: string, value: string)
  • keys(selector: string, keys: string)
  • focus(selector: string)
  • executeScript(code: string)
  • wait(selector: string)
  • waitForNotFound(selector: string)
  • click(selector)
  • waitForTimeout(millisecs: number)