For Vue apps

E2E + Visual Testing
for Vue Apps.

Vue's reactivity system hides state bugs from Vitest. Nuxt hydration fails silently. SFC refactors break every CSS selector your Cypress suite targets. Lastest tests your running Vue app in a real browser - record your flows once, replay deterministic Playwright tests on every commit. Part of the testing toolkit for developers doing QA.

Start Free →View source
Vue 3 + Nuxt readySelf-healing selectors$0 self-hosted
Lastest test recorder capturing a user flow on a Vue 3 or Nuxt application
Record. Replay. Ship.

Why Vitest Alone Isn't Enough

Your composable tests pass. Your app is still broken. Here's why.

Vitest and Vue Test Utils test components in isolation - no real browser, no Vue Router transitions, no Pinia store hydration, no Nuxt SSR. When a watch fires out of order, when a route guard fails on a real click, when a layout shift hides your submit button - your unit suite says green.

01

Lean on Vitest and composable tests.

You mount the component, trigger the event, assert the emitted value. It passes. Then a Pinia action mutates shared state in a way your isolated test didn't model, the navigation guard throws on a real transition, and the Nuxt hydration mismatch flickers the hero on first paint.

  • No real browser - no layout, no paint, no navigation
  • Reactivity bugs are invisible to component-scoped tests
  • Nuxt SSR/hydration breaks silently between server and client
  • Vue Router guard logic never exercised in unit tests
02

Use Lastest. Record once. Replay on every commit.

Point Lastest at your running Vue app - Vue CLI, Vite, Nuxt, whatever serves HTML. Click through the flow. Hit stop. Lastest stores deterministic Playwright code with 7-layer self-healing selectors, captures a visual baseline, and replays on every PR for free.

  • Real browser, real routing, real Pinia state
  • Survives SFC refactors - 7-layer selector fallback
  • 3 visual diff engines - Pixelmatch, SSIM, Butteraugli
  • Zero tokens per replay - run in CI for $0
  • Works with your stack - Pinia, Vue Router, Nuxt, Quasar

Built For Vue Workflows

You build with SFCs. Lastest tests the result.

Two capabilities that matter when you're a Vue developer who also owns QA.

01 · Record

Click through your Vue app. That's the test.

Open the recorder, navigate your Vue SPA - route transitions, form submissions, modals, toasts, Pinia-driven state changes. Hit stop. Lastest generates deterministic Playwright code with a 7-layer selector fallback. SFC restructures, scoped style renames, Composition API refactors - the selectors survive.

  • Works on localhost, staging, or any deployed URL
  • Captures Vue Router transitions and Nuxt page loads
  • No access to source required - tests the running app
Recorder timeline capturing a Vue app user flow

02 · Visual diff

Did the last SFC refactor quietly break the layout?

Vue's scoped styles and reactivity mean a single <style scoped> change can cascade through slots and nested components. Your Cypress suite passes and the sidebar overlaps the content area. Lastest compares screenshots with three diff engines and surfaces visual drift before the merge.

  • Text-region-aware diffs reduce false positives from reactive data
  • Branch-to-branch compare for PR review
  • Approve or reject each change with one click
Visual diff slider comparing baseline vs new Vue app screenshot

Common questions for Vue apps

Does Lastest work with Vue 3 Composition API and Vue 2 Options API?
Both. Lastest tests the running app, not source code, so the API style is irrelevant. The recorder captures the rendered DOM and emits Playwright code that survives most refactors.
What about Nuxt 3 SSR, Nitro, and hybrid rendering?
All transparent. Lastest exercises the URL Nuxt serves, with auto-wait for hydration. Server components, lazy hydration, and ISR routes all work.
How does it handle Vuex / Pinia state?
You don’t mock state. Lastest drives the real Vue app the way a user does: clicks the button, watches the store update, asserts the rendered UI. State bugs that only fire on real network or hydration timing get caught.
Will it survive Vue template refactors that rename classes?
A 7-layer selector fallback (data-testid, id, role, aria-label, text, CSS, OCR) survives most refactors. When everything breaks, AI Test Fixing proposes a patch you approve in one click.
Can it integrate with Vitest and Vue Test Utils?
Yes. Lastest is additive. Keep Vitest plus Vue Test Utils for component logic; use Lastest for the integration seams unit tests can’t reach: routing, real network, real layout, real visual rendering.
What does it cost?
Self-hosted is $0 forever (open source, FSL-1.1-ALv2), with unlimited screenshots and replays. Lastest Cloud is a flat $299/month with no per-seat or per-screenshot fees, and a free evaluation tier. Replays cost zero tokens either way.

Add E2E tests
to your Vue app.
In five minutes.

No cloud account. No API key. No procurement. Point it at your Vue app's URL and go. Open source, FSL-1.1-ALv2 licensed, $0 forever.

★ Star & Install from GitHub →
install

# 1. clone

$ git clone https://github.com/las-team/lastest

 

# 2. start

$ cd lastest && docker-compose up -d

 

# 3. point at your Vue app

$ open http://localhost:3000

 

✓ back to shipping features.