Skip to content

Commit 9b3345b

Browse files
robertgussrobertguss
authored
feat: migrate E2E tests from Cypress to Playwright (#18)
* feat: initial Playwright setup and configuration - Install Playwright test framework and browsers - Create Playwright directory structure (tests/, fixtures/, helpers/) - Add Playwright configuration files - Add Playwright scripts to package.json - Copy test fixtures from Cypress - Update .gitignore for Playwright artifacts * feat: implement Phase 2 - core utilities and helpers for Playwright - Install @clerk/testing package for Clerk integration - Create authentication helper with Clerk testing support - Create payment helper for Stripe Checkout interactions - Create document helper for file upload and processing - Create database helper for test data management - Add global setup for Clerk testing environment - Create test fixtures for common functionality - Add example test demonstrating helper usage - Update Playwright config with global setup * feat: complete Phase 3 - migrate all E2E tests to Playwright - Migrate setup verification tests - Create subscription test index with common setup - Migrate upgrade flow tests (Free to Pro, Pro to Business) - Migrate downgrade flow tests (Business to Pro, cancellations) - Migrate payment failure tests (declined cards, 3DS, network errors) - Migrate subscription lifecycle tests (renewals, credits, notifications) - Update test fixtures to include helper references - Maintain full test coverage and scenarios from Cypress * feat: complete Phase 4 - implement advanced Playwright features - Add network interception helper for API mocking and monitoring - Add visual testing helper with screenshot comparison and accessibility - Add performance testing helper with metrics and benchmarking - Add trace analysis helper for enhanced debugging - Create advanced features demo test showcasing all capabilities - Add custom reporter with HTML and JSON output - Create GitHub Actions workflow with parallel execution - Update Playwright config to use custom reporter Advanced features include: - Visual regression testing with responsive design checks - Performance monitoring with budget assertions - Network mocking and failure simulation - Enhanced tracing with custom events - Accessibility testing and color contrast checks - Memory leak detection - API performance profiling - Flakiness detection - Custom test reporting with Slack integration * feat: complete Phase 5 - cleanup Cypress and update documentation - Remove Cypress dependencies from package.json - Remove Cypress scripts from package.json - Delete Cypress directory and all related files - Remove temporary Playwright config files - Update .gitignore to remove Cypress entries - Create comprehensive E2E testing documentation - Create Cypress to Playwright migration guide - Update CLAUDE.md with Playwright testing info - Clean up debug test files Documentation includes: - Complete E2E testing guide with examples - Migration guide with syntax comparisons - Best practices and troubleshooting - CI/CD setup instructions * fix: rename global setup file to match Clerk documentation - Rename global-setup.ts to global.setup.ts per Clerk docs - Update playwright.config.ts to use correct filename - Update documentation to reflect correct filename - Add setup helper scripts for easier configuration * docs: fix code block formatting in e2e-testing.md
1 parent acb84b3 commit 9b3345b

Some content is hidden

Large Commits have some content hidden by default. Use the searchbox below for content that may be hidden.

51 files changed

+5464
-3556
lines changed

‎.github/workflows/playwright.yml‎

Lines changed: 169 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,169 @@
1+
name: Playwright Tests
2+
3+
on:
4+
push:
5+
branches: [ main, develop ]
6+
pull_request:
7+
branches: [ main, develop ]
8+
9+
jobs:
10+
test:
11+
timeout-minutes: 60
12+
runs-on: ubuntu-latest
13+
strategy:
14+
fail-fast: false
15+
matrix:
16+
shardIndex: [1, 2, 3, 4]
17+
shardTotal: [4]
18+
steps:
19+
- uses: actions/checkout@v4
20+
21+
- uses: pnpm/action-setup@v2
22+
with:
23+
version: 8
24+
25+
- uses: actions/setup-node@v4
26+
with:
27+
node-version: 20
28+
cache: 'pnpm'
29+
30+
- name: Install dependencies
31+
run: pnpm install
32+
33+
- name: Install Playwright Browsers
34+
run: pnpm exec playwright install --with-deps
35+
36+
- name: Run Playwright tests
37+
run: pnpm exec playwright test --shard=${{ matrix.shardIndex }}/${{ matrix.shardTotal }}
38+
env:
39+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
40+
CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
41+
CLERK_TESTING_TOKEN: ${{ secrets.CLERK_TESTING_TOKEN }}
42+
NEXT_PUBLIC_CONVEX_URL: ${{ secrets.NEXT_PUBLIC_CONVEX_URL }}
43+
STRIPE_SECRET_KEY: ${{ secrets.STRIPE_TEST_SECRET_KEY }}
44+
CI: true
45+
46+
- uses: actions/upload-artifact@v4
47+
if: ${{ !cancelled() }}
48+
with:
49+
name: playwright-report-${{ matrix.shardIndex }}
50+
path: playwright-report/
51+
retention-days: 30
52+
53+
- uses: actions/upload-artifact@v4
54+
if: ${{ !cancelled() }}
55+
with:
56+
name: test-results-${{ matrix.shardIndex }}
57+
path: test-results/
58+
retention-days: 30
59+
60+
merge-reports:
61+
# Merge all test reports after shards complete
62+
if: ${{ !cancelled() }}
63+
needs: [test]
64+
runs-on: ubuntu-latest
65+
steps:
66+
- uses: actions/checkout@v4
67+
68+
- uses: pnpm/action-setup@v2
69+
with:
70+
version: 8
71+
72+
- uses: actions/setup-node@v4
73+
with:
74+
node-version: 20
75+
cache: 'pnpm'
76+
77+
- name: Install dependencies
78+
run: pnpm install
79+
80+
- name: Download blob reports from GitHub Actions Artifacts
81+
uses: actions/download-artifact@v4
82+
with:
83+
path: all-blob-reports
84+
pattern: playwright-report-*
85+
merge-multiple: true
86+
87+
- name: Merge into HTML Report
88+
run: pnpm exec playwright merge-reports --reporter html ./all-blob-reports
89+
90+
- name: Upload HTML report
91+
uses: actions/upload-artifact@v4
92+
with:
93+
name: html-report--attempt-${{ github.run_attempt }}
94+
path: playwright-report
95+
retention-days: 14
96+
97+
visual-tests:
98+
timeout-minutes: 30
99+
runs-on: ubuntu-latest
100+
steps:
101+
- uses: actions/checkout@v4
102+
103+
- uses: pnpm/action-setup@v2
104+
with:
105+
version: 8
106+
107+
- uses: actions/setup-node@v4
108+
with:
109+
node-version: 20
110+
cache: 'pnpm'
111+
112+
- name: Install dependencies
113+
run: pnpm install
114+
115+
- name: Install Playwright Browsers
116+
run: pnpm exec playwright install --with-deps chromium
117+
118+
- name: Run visual tests
119+
run: pnpm exec playwright test --grep @visual
120+
env:
121+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
122+
CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
123+
CLERK_TESTING_TOKEN: ${{ secrets.CLERK_TESTING_TOKEN }}
124+
NEXT_PUBLIC_CONVEX_URL: ${{ secrets.NEXT_PUBLIC_CONVEX_URL }}
125+
126+
- uses: actions/upload-artifact@v4
127+
if: ${{ !cancelled() }}
128+
with:
129+
name: visual-regression-report
130+
path: test-results/visual/
131+
retention-days: 30
132+
133+
performance-tests:
134+
timeout-minutes: 30
135+
runs-on: ubuntu-latest
136+
steps:
137+
- uses: actions/checkout@v4
138+
139+
- uses: pnpm/action-setup@v2
140+
with:
141+
version: 8
142+
143+
- uses: actions/setup-node@v4
144+
with:
145+
node-version: 20
146+
cache: 'pnpm'
147+
148+
- name: Install dependencies
149+
run: pnpm install
150+
151+
- name: Build application
152+
run: pnpm run build
153+
154+
- name: Install Playwright Browsers
155+
run: pnpm exec playwright install --with-deps chromium
156+
157+
- name: Run performance tests
158+
run: pnpm exec playwright test --grep @performance
159+
env:
160+
NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY: ${{ secrets.NEXT_PUBLIC_CLERK_PUBLISHABLE_KEY }}
161+
CLERK_SECRET_KEY: ${{ secrets.CLERK_SECRET_KEY }}
162+
NEXT_PUBLIC_CONVEX_URL: ${{ secrets.NEXT_PUBLIC_CONVEX_URL }}
163+
164+
- uses: actions/upload-artifact@v4
165+
if: ${{ !cancelled() }}
166+
with:
167+
name: performance-report
168+
path: performance-report.html
169+
retention-days: 30

‎.gitignore‎

Lines changed: 4 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -12,10 +12,10 @@
1212

1313
# testing
1414
/coverage
15-
cypress/downloads
16-
cypress/screenshots
17-
cypress/videos
18-
cypress/results
15+
test-results/
16+
playwright-report/
17+
playwright/.cache/
18+
.auth/
1919

2020
# next.js
2121
/.next/

‎CLAUDE.md‎

Lines changed: 15 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -83,11 +83,22 @@ This is a Next.js 15 application with Convex backend and Clerk authentication.
8383

8484
### Testing Approach
8585

86-
Currently no test framework is configured. When adding tests:
86+
The project uses multiple testing frameworks:
8787

88-
- Use Jest + React Testing Library for frontend
89-
- Use Convex's testing utilities for backend functions
90-
- Test files should follow `*.test.ts(x)` or `*.spec.ts(x)` naming
88+
- **Unit Tests**: Vitest for component and utility testing
89+
- **E2E Tests**: Playwright for end-to-end testing
90+
- **Test files**: Follow `*.test.ts(x)` or `*.spec.ts(x)` naming
91+
92+
#### E2E Testing Commands
93+
94+
```bash
95+
pnpm run pw:test # Run all E2E tests
96+
pnpm run pw:test:ui # Run tests in UI mode (recommended)
97+
pnpm run pw:test:debug # Debug tests
98+
pnpm run pw:report # View test report
99+
```
100+
101+
See `docs/e2e-testing.md` for comprehensive E2E testing documentation.
91102

92103
### Fast API PDF Processing Service
93104

‎cypress.config.ts‎

Lines changed: 0 additions & 35 deletions
This file was deleted.

‎cypress/e2e/setup-verification.cy.ts‎

Lines changed: 0 additions & 140 deletions
This file was deleted.

0 commit comments

Comments
 (0)