lost-pixel / lost-pixel

Mode

Page screenshots

Feature description

Hi!

We're currently experimenting with Lost Pixel for https://github.com/opencollective/opencollective-frontend.

While the initial setup works mostly fine out of the box, we currently receive some false positives on animated elements - mostly loading spinners. Because the screenshots don't happen exactly at the same time, the spinner is in a different position when rendered.

It seems that Chromatic pauses animation to address this.

Examples

Styleguide: styleguide.opencollective.com

❗ storybook/design-system-loading-grid--default (click to expand)

Before	After

❗ storybook/o-auth-application-approve-screen--auto-approve-redirecting (click to expand)

Before	After

Thank you!

hey @Betree! thanks for using lost pixel! you could try to set it up in the correct way yourself - we didn't decide for the defaults but we might revise it. In beforeScreenshot you can prepare your browser in any possible way that you need.

module.exports = {
  pageShots: {
    pagesJsonUrl: 'http://172.17.0.1:9000/lost-pixel.json',
    baseUrl: 'http://172.17.0.1:9000',
    mask: [{ selector: 'span.animated-image' }],
  },
  lostPixelProjectId: 'xxx',
  apiKey: process.env.LOST_PIXEL_API_KEY,
  compareConcurrency: 10,
  shotConcurrency: 10,
  threshold: 10,
  beforeScreenshot: async (page) => {
    await page.addStyleTag({
      content: `iframe {
          visibility: hidden;
        }

        /* do not show underline animation */
        #toc-holder  a {
          background-size: 0 !important;
          background-image: none !important;
        }
        /* skip image display within section */
        section img {
          visibility: hidden;
        }

        /* hide cookie banner */
        #onetrust-consent-sdk {
          display: none;
        }`,
    })
  },
}

@d-ivashchuk Good stuff, thank you! I initially took a similar approach, but injecting CSS based on env variable: opencollective/opencollective-frontend@691f1f3 (#8940)
I'll switch to the suggested approach as it seems cleaner.

Could be interesting to add a page about animations on https://docs.lost-pixel.com

absolutely 👏🏼 contributions are very much welcome 😄 I still think we should have some sensible default for the animations - but making this super configurable was our initial approach and it should give the users all they need!

I'm surprised that this is not working properly. We have animations in a lot of projects and so far it wasn't an issue.

We do disable animations when taking screenshots:

lost-pixel/src/shots/shots.ts

Line 119 in 577ef49

animations: 'disabled',

This will only stop CSS animations, but not JS animations.
As it is a spinner I assume it's CSS, right?
@Betree

It turns out the problematic component was using SVG animations (which are deprecated). As part of the config change, I also pushed a conversion of this component to CSS animations which is what actually resolved the issue.

Now removing the custom config for animations is not a breaking change, so you're absolutely correct @chriskalmar: CSS animations are supported out-of-the-box.

Thank you both very much for the support!

TLDR ; if you're using SVG animations, either migrate (they're deprecated) to CSS animations or use a custom config to hide the whole thing.

Thanks for sharing your results @Betree. 🙏
I'm glad it worked out.

It might be a good idea to add a few words on the topic of animations to our docs @d-ivashchuk

Pause SVG animations when rendering tests

Mode

Feature description

Examples