FAQ from Customers/Technical FAQ Flashcards
(34 cards)
When someone comments, how am I notified?
Currently, we only have email notifications, nothing in-app (it’ll go to the GitHub email that you linked, although can configure it to send to diff emails)
We’ve started to use chromatic, but we noticed that the storybook URL is associated with the build version. We were wondering if there is a url we could use to access the latest storybook build for a given chromatic project.
Yes, you can do that. If you head to the “manage” tab for a given project and click “collaborate” you can scroll down and view the Storybook custom links (your link ishere). You’ll be able to input any branch name, and that URL will always give you the most updated Storybook.
What’s the difference between the free plan and premium plans?
The free plan includes all the core features. Publish unlimited Storybooks to review with unlimited collaborators. Get component history across branches and commits. Plus 5,000 free snapshots/month. All in a secure, private workspace for your entire team.
Premium plans scale to meet your team’s needs. You get more snapshots and access to a suite of browsers that extend your test coverage in one click. Test across multiple viewports and multiple browsers at once.
Do you charge for inviting teammates?
No, we don’t charge you “per seat”. UI libraries and design systems only thrive when everyone is included. We wouldn’t do anything to jeopardize the adoption of your components.
How do you count the number of snapshots for billing?
Snapshots are counted at the account level. If your account has multiple projects we sum the number of snapshots used by each project to get your total usage.
How fast are Chromatic’s visual tests and what is max concurrency?
Chromatic optimizes your visual tests for speed. Your tests run on as many machines as needed to deliver results in the least time possible. Our infrastructure is effectively capable of running all your tests in parallel, no matter how many builds you run, or stories you write. For instance, customers often test 2000+ permutations in less than a minute.
What if I exceed my plan’s monthly snapshot limit?
If you have a free plan, review and testing will be paused when you exhaust the 5,000 free snapshots per month. This may affect your PR checks.
If you have a premium plan, review and testing will not be interrupted. You’ll be billed for extra snapshots beyond the included amount at the end of the month.
How do I change my plan?
Change your plan in account settings. All changes are prorated to the day.
What if I don’t end up liking it? Can I get a refund?
If you aren’t happy with Chromatic we’ll refund your money. We want customers to ship consistent UIs, save time, and build bulletproof component libraries. If it’s not working out for you, just email us to get a refund for your current months usage.
Can I deactivate my account?
Yes, deactivate anytime. We’ll be sad to see you go!
Why publish Storybook in the cloud?
Collaboration, reproduction, and history. When you publish Storybook using Chromatic, your team gets a universal reference point for discussion that’s always up to date. This allows you to gather clearer, more precise feedback in less time. Reproducing bugs is painless because your teammates interact with the real UI without needing a dev environment. Your components are individually versioned by commit so your team can visualize UI changes over time.
What if I already deploy Storybook using S3, Heroku, Netlify, or Vercel?
You don’t need to do this anymore. Chromatic is a Storybook-optimized cloud service for frontend teams that includes collaboration, access control, versioning, history, and integrations with your existing tools. That said, we’re happy customers of those hosting services and recommend them for other situations.
Why test components instead of screens?
Screen testing is burdensome for apps made with components. Components are reused across many screens. If a component changes, it often results in a deluge of test failures on every screen it’s used. Sorting through these failures on every screen is excruciating.
Why run tests in the cloud?
Speed and collaboration. Local tests inevitably slow to a crawl when tasked with snapshotting even a modest component libary. This blocks the development workflow. Further, collaborating on review is impossible because tests run on an individual machine. Chromatic runs tests in parallel at cloud-speed and offers a collaborative online review flow made for app teams.
Does Chromatic replace Jest or Enzyme?
Nope. Chromatic complements your existing Jest or Enzyme tests. Chromatic adds coverage where none previously existed: the rendered UI. It is built to detect UI regressions. In practice, creating and maintaining Chromatic visual tests takes much less effort than the equivalent unit test.
How is this compared to Selenium or Cypress?
Chromatic complements your existing End-to-End tests with Selenium or Cypress. E2E tests are intended to QA the “happy path”, but are time-consuming to create and brittle to maintain. They end up being poor value for wide UI test coverage. Adding Chromatic to your test suite gives you expansive yet accurate UI coverage without having to write even more tests.
Can I get rid of my BrowserStack or Sauce subscription?
Our aim isn’t to replace services like Browserstack or Sauce. Cloud browser services are invaluable for verifying interactive behavior (e.g., clicking around the UI) and End-to-End testing but aren’t built or priced for visual testing.
Chromatic gives professional UI engineers a purpose-built service for visual testing which helps you reduce your reliance on cloud browser services. In practice, our customers typically scale back their usage and save a boatload of money while increasing their testing productivity.
Isn’t this just snapshot testing? (Jest)
Not quite. Jest snapshot testing captures your component’s HTML output. Chromatic captures a pixel-perfect image. Chromatic is best suited for testing UIs for these reasons:
- The way the browser renders UI is also determined by styling and assets such as images. Unlike Jest snapshots, Chromatic renders markup, styling, and assets in a browser to capture what users really see.
- Changes are not necessarily “failures”. Deciphering intentional changes from bugs is hard when all you have is a markup diff. Chromatic’s online merge manager helps you visualize, review, and merge UI changes.
- Code changes don’t always result in UI changes. Jest snapshot tests only identify changes in code. This ends up leading to a lot of false positives and resorting to “approve all” to make test failures go away. Chromatic does not have this problem.
But what about Jest image snapshot? Image snapshotting is one of Chromatic’s features. With Chromatic you also get cloud performance, an online review flow, no-hassle branching, painless merging, component history, and more work-saving features for professional developers.
Why should I bother documenting components?
Reuse saves you and your team time. Developers invest countless hours building components. Documenting for reuse helps you get the most out of the time you’ve already spent. That reduces the manual work for everyone.
Doesn’t documentation take a lot of work?
Nope. We created theStorybook Docsaddon in collaboration with the open source community to auto-generate component documentation. Further customize those docs with Markdown, JSDoc, or TSDoc comments.
How is Chromatic different from visual testing tools like Applitools and Percy?
Chromatic is a faster, simpler, and cost effective alternative to Applitools or Percy that is built for UI components and component libraries. Our customers compare us favorably on developer experience and price.
Product differentiation:
- Components are first class citizens in Chromatic so our workflow is necessarily different
- Deep integration with Storybook (we’re core maintainers)
- Track each components baselines through branches and merges
- Generate a living component library online
- Rewind component history
- Review components one at a time, approvals carry over from build to build
We’re proud of our developer experience:
- “It just works” – sensible defaults out of the box, no writing webdriver tests or custom integrations
- Lightning fast test runs (modern cloud architecture) with no cap on concurrency
- Automatic PR badging for GitHub, GitLab, and Bitbucket
Where are my images and fonts?
Make sure your resource hosts are reliably fast. When possible serve resources statically via Storybook or use a dedicated service. Learn more aboutresource loading in Chromatic.
Why am I getting cross-origin errors with my stories?
Most likely you are calling intowindow.parentsomewhere in your code. As we serve your Storybook preview iframe inside ourwww.chromatic.comdomain this leads to a x-origin error as your code doesn’t have access to our frame (with good reason!).
Generally speaking it is a good idea to wrap calls like that in atry { } catchin case the code is running in a context where that’s not possible (e.g Chromatic).
Why is my content being cut off vertically in my snapshots?
Make sure there are no elements inadvertently cutting off content through the use of overflow or height styles.
For elements that have relative height styles based on the size of the viewport (such asheight: 100vh), all content nested under that element will show up in a screenshot unless eitheroverflow: hiddenoroverflow: scrollis used to hide what is outside of that element (and therefore outside of the viewport).
When Chromatic takes a screenshot for an element that has a viewport-relative height as well as styling to hide/scroll the overflow, a default viewport height of900pxwill be used. This default is only used when we can’t detect a “natural” height for the outermost DOM element (root ancestor), for instance, in the case of scrollable divs.
