How to Test a Vue App End to End

The problem

A Vue app's test setup usually covers components with Vue Test Utils and maybe Vitest, plus Storybook. All useful — and none of it tells you that the real sign-up flow is broken, because no component test renders the whole app, hits the real API, and follows the router through a multi-step journey.

Why the usual approach falls short

• Component tests over-mock. Push coverage down far enough and you're testing mocks, not the app.
• A Playwright or Cypress suite is a second codebase — selectors, waits, fixtures — that drifts every time the UI moves.
• Reactive updates and router transitions make scripted E2E tests flakier; fixed waits race the framework.

How Manta fits

Point Manta at your running Vue app — a Vite dev deploy, a Nuxt preview, staging — and it uses it like a person: navigating Vue Router, waiting for reactive updates and hydration to settle, filling forms, following redirects. It reports broken flows with screenshots and reproduction steps, and swapping a component library or restructuring the DOM doesn't break coverage because there are no selectors to maintain.

For the flows that must always work, describe them in plain English.

Keep Vue Test Utils and Vitest for component and composable logic — the end-to-end testing guide covers the layering, and Manta vs Cypress covers the E2E tool choice.

What your first run looks like

1. Get a URL for the running app and a test account.
2. Start a run; Manta discovers routes and flows as it explores.
3. Review findings and the navigation map; lock in the critical journeys as plain-English checks.

Where it fits

Component tests underneath, Manta for end-to-end coverage of the running app, a small scripted set for exact assertions. See also how to test a React app end to end for the same picture in a different stack.