End-to-End Testing

Run the real app in a real browser and click your way through user flows. Either Cypress or Playwright is a good default.

4 min read Level 2/5 #vue#testing#e2e

What you'll learn

Add Cypress or Playwright
Write a smoke test that loads the home page
Stub the network for stability

End-to-end tests start the app, drive a real browser, and assert on user-visible behavior. Two tools dominate: Cypress (great DX, runs in Electron/Chrome) and Playwright (multi-browser, multi-tab, fast).

Cypress

npm i -D cypress
npx cypress open

A smoke test:

// cypress/e2e/home.cy.ts
describe('home', () => {
  it('greets the user', () => {
    cy.visit('/')
    cy.contains('Welcome')
    cy.get('input[name="search"]').type('vue')
    cy.contains('Results')
  })
})

Playwright

npm init playwright@latest

// tests/home.spec.ts
import { test, expect } from '@playwright/test'

test('greets the user', async ({ page }) => {
  await page.goto('/')
  await expect(page.getByText('Welcome')).toBeVisible()
  await page.getByLabel('Search').fill('vue')
  await expect(page.getByText('Results')).toBeVisible()
})

Stubbing the Network

Real HTTP makes tests flaky. Both tools let you intercept.

// Cypress
cy.intercept('GET', '/api/users', { fixture: 'users.json' })

// Playwright
await page.route('**/api/users', r => r.fulfill({ path: 'fixtures/users.json' }))

What to Test

Critical user flows (sign up, checkout)
Auth happy/sad paths
One smoke test per major page

Skip exhaustive coverage — leave that to component and unit tests.

SSR With Nuxt →