Free tools Windows power users keep installed
One-click scans. No signup required.
To visually test Vue.js components with Storybook, create stories for the component states that matter, capture those stories, and compare later captures with accepted visual baselines. Review every reported difference: approve it if the design change is intentional, or fix the component or story and rerun the test if it is not. A screenshot comparison checks appearance; it does not prove that the component behaves correctly when a user interacts with it.
What Storybook visual tests check
A visual test captures a rendered Storybook story and compares the image with a prior baseline. Differences can reveal changes in layout, color, size, contrast, and other visible details. Storybook describes the purpose directly: “Visual tests catch bugs in UI appearance.” Storybook’s visual-testing documentation explains the workflow.
As an Amazon Associate I earn from qualifying purchases.
Stories are the test cases: each story describes a component in a particular state, and the team can use those states as visual checks. As the official Vue tutorial puts it, “every story is essentially a test specification.” A useful set of stories covers the variations you want to keep stable, rather than only the component’s default appearance.
Do these 3 things before closing this tab:
1Clear out junk files and repair common Windows errors2Fix the driver behind crashes, sound loss and screen glitches3Repair Windows errors before they cause bigger problemsSet up Storybook for Vue 3 with Vite
Storybook’s documented Vue 3 + Vite integration lists Vue 3 and Vite 5 or later as requirements. From the project directory, run:
#1 Best Overall
npm create storybook@latestWhen installation is complete, start Storybook with:
npm run storybookThese requirements and commands apply to the Vue 3 + Vite integration documented by Storybook; other Vue and build-tool combinations may have different setup steps. Check the current Vue 3 + Vite framework documentation for compatibility and setup details.
Create stories for the states you need to protect
Choose component states that would matter if they changed visually, then represent them as stories. Include the relevant props and variations for your component. For example, a button might need stories for its primary and disabled appearances, while a form field might need its normal and error states. These are illustrative examples; select states that match your own interface.
Keep stories focused on one meaningful state at a time. When a visual test reports a difference, a clear story makes it easier to tell which state changed and whether that change was expected.
Run visual checks and review differences
- Capture a first run. The initial visual-test run creates the baseline images against which later captures are compared.
- Run the check again after a change. Storybook captures the stories and compares their current renderings with the known baselines.
- Inspect the differences. Use the visual-test results to see which stories changed and review the changed pixels in context.
- Choose what to do. If the visual change is intentional, accept it as the updated baseline. If it is unexpected, correct the component or story and rerun the check.
A diff is a review signal, not an automatic verdict. The team still needs to decide whether the new appearance is correct.
Use Chromatic for a hosted visual-testing workflow
Storybook documents Chromatic as its cloud visual-testing service, with an addon named @chromatic-com/storybook. The documented setup requires a Chromatic account and project. To add the integration, Storybook documents this command:
npx storybook@latest add @chromatic-com/storybookThen sign in to Chromatic, select or create a project, and link it to the addon. The integration’s chromatic.config.json options include projectId and optional buildScriptName, debug, and zip. Add the required project configuration using the current Storybook and Chromatic instructions; addon commands and configuration can change.
Quick wins for a faster PC:
Fix the driver behind crashes, sound loss and screen glitchesFind Drivers →Clear out junk files and repair common Windows errorsFree Scan →Scan for outdated or missing drivers - takes under a minuteDriver Scan →For team automation, Storybook’s visual-testing documentation describes configuring CI with Chromatic authentication and a project token. It also describes pull- or merge-request checks that notify teams about test errors or UI changes. Confirm the current integration steps for your project rather than assuming a particular CI provider or service-plan feature.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Choose visual, interaction, snapshot, or accessibility tests by question
| Test type | What it checks | What you maintain or review |
|---|---|---|
| Visual | Whether the rendered appearance differs from an image baseline. | Stories and visual baselines; a person reviews whether changes are intended. |
| Interaction | Whether the component responds correctly to simulated user actions. | A story’s play function, which simulates actions and asserts outcomes. |
| Snapshot | Whether rendered DOM or HTML has changed. | Markup snapshots; Storybook notes these can be noisy to maintain. |
| Accessibility | Accessibility issues identified by accessibility checks. | Accessibility checks alongside component tests; they complement rather than replace appearance and behavior checks. |
For interaction testing, Storybook documents using a story’s play function to simulate actions and assert outcomes. These tests can run with the Storybook Vitest addon or test-runner. A visual check answers “does it look right?”; an interaction check answers whether it responds as expected. Neither image diffs nor markup snapshots alone establish that all user behavior works. See the Storybook testing overview and interaction-testing documentation.
Or skip the browser setup
If you need a screenshot of a page rather than a Storybook-specific visual regression workflow, ScreenshotNeo provides a screenshot API and MCP server. It does not replace stories, baselines, or review of Storybook visual diffs.
One GET request can return a screenshot or PDF; for example, save a WebP screenshot with cURL:
curl -G "https://api.screenshotneo.com/v1/shot" -d access_key=YOUR_API_KEY --data-urlencode url=https://stripe.com -o shot.webpSee the ScreenshotNeo API documentation for request options. Cookie banners and consent notices are accepted and removed before capture, along with known newsletter popups and chat widgets; each cleanup step can be turned off. Bot checks, blank pages, timeouts, failed loads, and cache hits are not billed. Its MCP server offers take_screenshot, get_page_info, and capture_pdf tools for AI agents and MCP clients. The free plan includes 1,000 screenshots per month with no card; paid plans start at $5 for 3,000 shots.
Sign up for ScreenshotNeo’s free plan to try 1,000 screenshots a month with no card.
Quick Recap
Troubleshoot common visual-test problems
- The integration setup does not match your project. The cited framework setup is specifically for Vue 3 with Vite 5 or later. Check Storybook’s current framework documentation for your Vue version and build tool.
- A visual test reports a difference you did not expect. Inspect the affected story and its state. If the difference is unintended, fix the component or story and rerun; do not accept the baseline just to clear the report.
- A new design change appears as a failure. Review the changed rendering. If the change is intentional, accept the updated baseline so later runs compare against the approved appearance.
- A screenshot looks right, but an action is broken. Visual tests cover appearance, not behavior. Add an interaction test using a story’s
playfunction and assertions for the expected outcome. - Addon commands or configuration do not work as documented. Storybook’s commands, addon names, and configuration are version-sensitive. Recheck the current visual-testing documentation and Chromatic setup instructions for your installed versions.
Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.
