Combine Storybook snapshots with full page application snapshots

[patocallaghan]

I'm not sure if this issue is opened in the correct repo but happy to be advised if need be.

We have Percy currently setup to snapshot our Storybook integration. This works well but now we also want to snapshot some full pages from our application. To do this we've integrated Cypress into our app and have been experimenting with @percy/cypress.

In isolation @percy/storybook and @percy/cypress work fine but the problem is that they create two unique Percy builds and according to Percy support you can only have a single Percy status check, so the last one finished always wins.

To try and figure out a way around this I came across parallel builds which gave me the idea of trying to combine the two snapshotting tasks into a single percy build.

@percy/cypress uses percy exec so it supports the --parallel flag. @percy/storybook on the other hand doesn't support the --parallel.

So some questions:

1. Is it possible to have percy storybook support the --parallel?
2. If not, do you have any other recommendations on how I can get this sort of setup working? I've been contemplating just manually using Cypress to visit and screenshot Storybook manually but I was hoping to make use of this SDK so it's automatic.

[Robdel12]

Hey @patocallaghan! With the new beta Storybook SDK you can combine builds into a single build if you'd like. You would just need to set the PERCY_PARALLEL_TOTAL env var for Storybook builds (since there's no --parallel CLI flag for the storybook subcommand). That will put the build into parallel mode and you'll be able to combine any builds together with the same NONCE: https://docs.percy.io/docs/parallel-test-suites#advanced-details

according to Percy support you can only have a single Percy status check

This isn't correct -- if there are two Percy projects, you can link both of those projects to the same GitHub repo (we used to have 5 different Percy projects linked to this Storybook SDK). For example:

From there you can mark if those checks are required or not. It's pretty similar to this approach: https://docs.percy.io/docs/multiple-projects-per-repo

[patocallaghan]

Thanks @Robdel12. This is great 🙇‍♂️ I'll do some experimentation and I'll let you know how I get on. I think the separate project approach will probably be the cleanest for our use case.

[patocallaghan]

Just confirming creating multiple Percy projects and pointing to a single repo worked for me. This allowed me to have both storybook and cypress snapshots and multiple PR status checks. Thanks for your help @Robdel12