1---
2title: Use Playwright for E2E Testing - Cross-Browser Support and Better DX
3impact: MEDIUM
4impactDescription: Cypress has browser limitations and some features require paid subscriptions
5type: best-practice
6tags: [vue3, testing, e2e, playwright, cypress, end-to-end]
7---
8 
9# Use Playwright for E2E Testing - Cross-Browser Support and Better DX
10 
11**Impact: MEDIUM** - Playwright offers superior cross-browser testing (Chromium, WebKit, Firefox), excellent debugging tools, and is fully open source. Cypress has limitations with WebKit support and requires paid subscriptions for some features.
12 
13Use Playwright for new E2E testing setups. Consider Cypress if team already has expertise or for its visual debugging UI.
14 
15## Task Checklist
16 
17- [ ] Install Playwright with browsers for your target platforms
18- [ ] Configure for Vue dev server integration
19- [ ] Set up projects for different browsers
20- [ ] Use locator strategies that match component test patterns
21- [ ] Configure CI for parallel test execution
22- [ ] Use trace and screenshot features for debugging
23 
24## Quick Setup
25 
26```bash
27# Install Playwright
28npm init playwright@latest
29 
30# This will create:
31# - playwright.config.ts
32# - tests/ directory
33# - tests-examples/ directory
34```
35 
36**playwright.config.ts:**
37```typescript
38import { defineConfig, devices } from '@playwright/test'
39 
40export default defineConfig({
41  testDir: './e2e',
42  fullyParallel: true,
43  forbidOnly: !!process.env.CI,
44  retries: process.env.CI ? 2 : 0,
45  workers: process.env.CI ? 1 : undefined,
46  reporter: 'html',
47 
48  use: {
49    // Base URL for navigation
50    baseURL: 'http://localhost:5173',
51    // Capture trace on first retry
52    trace: 'on-first-retry',
53    // Screenshot on failure
54    screenshot: 'only-on-failure',
55  },
56 
57  projects: [
58    {
59      name: 'chromium',
60      use: { ...devices['Desktop Chrome'] },
61    },
62    {
63      name: 'firefox',
64      use: { ...devices['Desktop Firefox'] },
65    },
66    {
67      name: 'webkit',
68      use: { ...devices['Desktop Safari'] },
69    },
70    // Mobile viewports
71    {
72      name: 'Mobile Chrome',
73      use: { ...devices['Pixel 5'] },
74    },
75  ],
76 
77  // Run local dev server before tests
78  webServer: {
79    command: 'npm run dev',
80    url: 'http://localhost:5173',
81    reuseExistingServer: !process.env.CI,
82  },
83})
84```
85 
86## E2E Test Example
87 
88```typescript
89// e2e/user-flow.spec.ts
90import { test, expect } from '@playwright/test'
91 
92test.describe('User Authentication', () => {
93  test('user can log in and see dashboard', async ({ page }) => {
94    // Navigate to login
95    await page.goto('/login')
96 
97    // Fill login form
98    await page.getByLabel('Email').fill('[email protected]')
99    await page.getByLabel('Password').fill('password123')
100    await page.getByRole('button', { name: 'Sign In' }).click()
101 
102    // Verify redirect to dashboard
103    await expect(page).toHaveURL('/dashboard')
104    await expect(page.getByRole('heading', { name: 'Welcome' })).toBeVisible()
105  })
106 
107  test('shows error for invalid credentials', async ({ page }) => {
108    await page.goto('/login')
109 
110    await page.getByLabel('Email').fill('[email protected]')
111    await page.getByLabel('Password').fill('wrongpassword')
112    await page.getByRole('button', { name: 'Sign In' }).click()
113 
114    await expect(page.getByRole('alert')).toContainText('Invalid credentials')
115    await expect(page).toHaveURL('/login')
116  })
117})
118```
119 
120## Playwright vs Cypress Comparison
121 
122| Feature | Playwright | Cypress |
123|---------|------------|---------|
124| Browsers | Chromium, Firefox, WebKit | Chromium, Firefox, Electron (WebKit experimental) |
125| Cross-browser | Full support | Limited |
126| Parallelization | Built-in | Requires Cypress Cloud |
127| Open source | Fully | Core only |
128| Mobile testing | Device emulation | Limited |
129| Debugging | Inspector, trace viewer | Time-travel UI |
130| API testing | Built-in | Plugin required |
131| Iframes | Full support | Limited |
132 
133## Testing Vue Components with Data-Testid
134 
135```typescript
136// e2e/product-list.spec.ts
137import { test, expect } from '@playwright/test'
138 
139test('user can add product to cart', async ({ page }) => {
140  await page.goto('/products')
141 
142  // Use data-testid for reliable selectors
143  await page.getByTestId('product-card').first().click()
144 
145  // Verify product detail page
146  await expect(page.getByTestId('product-title')).toBeVisible()
147 
148  // Add to cart
149  await page.getByTestId('add-to-cart-button').click()
150 
151  // Verify cart updated
152  await expect(page.getByTestId('cart-count')).toHaveText('1')
153})
154```
155 
156## Page Object Pattern for Vue Apps
157 
158```typescript
159// e2e/pages/LoginPage.ts
160import { Page, Locator } from '@playwright/test'
161 
162export class LoginPage {
163  readonly page: Page
164  readonly emailInput: Locator
165  readonly passwordInput: Locator
166  readonly submitButton: Locator
167  readonly errorMessage: Locator
168 
169  constructor(page: Page) {
170    this.page = page
171    this.emailInput = page.getByLabel('Email')
172    this.passwordInput = page.getByLabel('Password')
173    this.submitButton = page.getByRole('button', { name: 'Sign In' })
174    this.errorMessage = page.getByRole('alert')
175  }
176 
177  async goto() {
178    await this.page.goto('/login')
179  }
180 
181  async login(email: string, password: string) {
182    await this.emailInput.fill(email)
183    await this.passwordInput.fill(password)
184    await this.submitButton.click()
185  }
186}
187```
188 
189```typescript
190// e2e/auth.spec.ts
191import { test, expect } from '@playwright/test'
192import { LoginPage } from './pages/LoginPage'
193 
194test('successful login', async ({ page }) => {
195  const loginPage = new LoginPage(page)
196  await loginPage.goto()
197  await loginPage.login('[email protected]', 'password123')
198 
199  await expect(page).toHaveURL('/dashboard')
200})
201```
202 
203## Visual Regression Testing
204 
205```typescript
206test('homepage visual regression', async ({ page }) => {
207  await page.goto('/')
208 
209  // Full page screenshot comparison
210  await expect(page).toHaveScreenshot('homepage.png')
211 
212  // Element-specific screenshot
213  await expect(page.getByTestId('hero-section')).toHaveScreenshot('hero.png')
214})
215```
216 
217## Running Tests
218 
219```bash
220# Run all tests
221npx playwright test
222 
223# Run in headed mode (see browser)
224npx playwright test --headed
225 
226# Run specific file
227npx playwright test e2e/auth.spec.ts
228 
229# Run in specific browser
230npx playwright test --project=chromium
231 
232# Debug mode
233npx playwright test --debug
234 
235# Generate test from actions
236npx playwright codegen localhost:5173
237```
238 
239## Reference
240- [Playwright Documentation](https://playwright.dev/)
241- [Vue.js E2E Testing Recommendations](https://vuejs.org/guide/scaling-up/testing#e2e-testing)
242- [Playwright Best Practices](https://playwright.dev/docs/best-practices)
243