Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Storyshots: Allow taking a screenshot of just a specific element #12460

Merged

Conversation

StephanBijzitter
Copy link
Contributor

@StephanBijzitter StephanBijzitter commented Sep 11, 2020

I have a lot of very small React components, but the screenshots taken are of the entire viewport, which makes the files a lot larger than they need to be. Furthermore, it's much more difficult to see a 1 or 2 pixel difference on a file that's 600px wide, when the component itself is 50px wide.

What I did

I added an optional return value to the beforeScreenshot function; whenever an ElementHandle is returned, it is used as the basis for the screenshot. This is not a breaking change.

How to test

  • Is this testable with Jest or Chromatic screenshots?
    Probably, but there were not any tests yet.

  • Does this need a new example in the kitchen sink apps?
    Don't think so.

  • Does this need an update to the documentation?
    Yes, and done.

Copy link
Member

@shilman shilman left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Nice feature!

@shilman shilman changed the title Allow taking a screenshot of just a specific element Storyshots: Allow taking a screenshot of just a specific element Sep 12, 2020
@shilman shilman added this to the 6.1 maintenance milestone Sep 12, 2020
@shilman shilman merged commit b15b04e into storybookjs:next Sep 12, 2020
@StephanBijzitter StephanBijzitter deleted the storyshots-puppeteer-element branch September 12, 2020 11:07
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Projects
None yet
Development

Successfully merging this pull request may close these issues.

2 participants