Skip to content

Commit 7e6bca2

Browse files
MarkoIvaneticMarkoIvanetic
committed
update github yaml
1 parent b5e1847 commit 7e6bca2

File tree

6 files changed

+226
-19
lines changed

6 files changed

+226
-19
lines changed

‎.github/actions/e2e-setup/action.yml‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
name: 🎭 E2E Test Setup
2+
description: 'Setup Playwright and install browsers for E2E testing'
3+
4+
inputs:
5+
browsers:
6+
description: 'Browsers to install (chromium, firefox, webkit, or all)'
7+
required: false
8+
default: 'chromium'
9+
10+
runs:
11+
using: 'composite'
12+
steps:
13+
- name: 🎭 Install Playwright Browsers
14+
run: pnpm exec playwright install --with-deps ${{ inputs.browsers }}
15+
shell: bash
16+
17+
- name: 📋 Verify Playwright Installation
18+
run: pnpm exec playwright --version
19+
shell: bash

‎.github/workflows/playwright.yml‎

Lines changed: 82 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -1,27 +1,92 @@
1-
name: Playwright Tests
1+
name: 🎭 Playwright E2E Tests
2+
23
on:
34
push:
4-
branches: [main, master]
5+
branches: [main]
56
pull_request:
6-
branches: [main, master]
7+
branches: [main]
8+
workflow_dispatch:
9+
710
jobs:
8-
test:
11+
e2e-tests:
12+
name: 🧪 E2E Tests
913
timeout-minutes: 60
10-
runs-on: ubuntu-latest
14+
runs-on: ubuntu-22.04
15+
16+
env:
17+
NODE_ENV: test
18+
NEXTAUTH_SECRET: 'test-secret-for-ci-only'
19+
NEXT_PUBLIC_EXAMPLE_VARIABLE: 'CI Test Variable'
20+
CI: true
21+
1122
steps:
12-
- uses: actions/checkout@v4
13-
- uses: actions/setup-node@v4
23+
- name: 📥 Checkout Repository
24+
uses: actions/checkout@v4
25+
26+
- name: 💻 Node setup
27+
uses: ./.github/actions/node-setup
28+
29+
- name: 🎭 E2E Setup
30+
uses: ./.github/actions/e2e-setup
1431
with:
15-
node-version: lts/*
16-
- name: Install dependencies
17-
run: npm install -g pnpm && pnpm install
18-
- name: Install Playwright Browsers
19-
run: pnpm exec playwright install --with-deps
20-
- name: Run Playwright tests
21-
run: pnpm exec playwright test
22-
- uses: actions/upload-artifact@v4
32+
browsers: 'chromium'
33+
34+
- name: �️ Build Frontend App
35+
run: pnpm --filter @infinum/frontend build
36+
shell: bash
37+
38+
- name: 🚀 Start Frontend App (Background)
39+
run: |
40+
pnpm --filter @infinum/frontend start &
41+
echo "FRONTEND_PID=$!" >> $GITHUB_ENV
42+
shell: bash
43+
44+
- name: ⏳ Wait for Frontend to be Ready
45+
run: |
46+
echo "Waiting for frontend to start on http://localhost:3000..."
47+
timeout 60s bash -c 'until curl -f http://localhost:3000 > /dev/null 2>&1; do
48+
echo "Waiting for frontend..."
49+
sleep 3
50+
done'
51+
echo "Frontend is ready!"
52+
shell: bash
53+
54+
- name: 🔍 Health Check
55+
run: |
56+
echo "Running health check..."
57+
curl -f http://localhost:3000 -I | head -5
58+
echo "Health check passed!"
59+
shell: bash
60+
61+
- name: 🧪 Run Playwright E2E Tests
62+
run: pnpm e2e
63+
shell: bash
64+
env:
65+
PLAYWRIGHT_JUNIT_OUTPUT_NAME: test-results.xml
66+
67+
- name: 🛑 Stop Frontend App
68+
if: always()
69+
run: |
70+
if [ ! -z "$FRONTEND_PID" ]; then
71+
kill $FRONTEND_PID || true
72+
fi
73+
shell: bash
74+
75+
- name: 📊 Upload Playwright Report
76+
uses: actions/upload-artifact@v4
2377
if: ${{ !cancelled() }}
2478
with:
25-
name: playwright-report
26-
path: playwright-report/
79+
name: playwright-report-${{ github.run_id }}
80+
path: |
81+
packages/e2e-frontend/playwright-report/
82+
packages/e2e-frontend/test-results/
2783
retention-days: 30
84+
85+
- name: 📊 Upload Coverage Reports
86+
uses: actions/upload-artifact@v4
87+
if: success()
88+
with:
89+
name: e2e-coverage-${{ github.run_id }}
90+
path: |
91+
reports/a11y/
92+
retention-days: 7

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -30,7 +30,9 @@
3030
"test:watch": "turbo run test:watch --ui=tui --continue",
3131
"test:coverage": "turbo run test:coverage --parallel --log-order=grouped --continue",
3232
"test:coverage:watch": "turbo run test:coverage:watch --ui=tui --continue",
33-
"e2e": "npx playwright test packages/e2e-frontend --config=packages/e2e-frontend/playwright.config.ts"
33+
"e2e": "npx playwright test packages/e2e-frontend --config=packages/e2e-frontend/playwright.config.ts",
34+
"e2e:headed": "npx playwright test packages/e2e-frontend --config=packages/e2e-frontend/playwright.config.ts --headed",
35+
"e2e:ui": "npx playwright test packages/e2e-frontend --config=packages/e2e-frontend/playwright.config.ts --ui"
3436
},
3537
"devDependencies": {
3638
"@actions/core": "1.11.1",

‎packages/e2e-frontend/README.md‎

Lines changed: 111 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,111 @@
1+
# E2E Testing with Playwright
2+
3+
This package contains end-to-end tests for the frontend application using Playwright.
4+
5+
## Setup
6+
7+
The E2E tests are configured to run against your Next.js frontend application running on `http://localhost:3000`.
8+
9+
## Running Tests
10+
11+
### Locally
12+
13+
1. **Start the frontend application:**
14+
```bash
15+
# From project root
16+
pnpm --filter @infinum/frontend dev
17+
```
18+
19+
2. **Run E2E tests:**
20+
```bash
21+
# From project root
22+
pnpm e2e
23+
24+
# Or with different modes
25+
pnpm --filter e2e-frontend test:headed # See browser window
26+
pnpm --filter e2e-frontend test:debug # Step-by-step debugging
27+
pnpm --filter e2e-frontend test:ui # Interactive UI mode
28+
```
29+
30+
### In CI/CD
31+
32+
The tests automatically run in GitHub Actions on:
33+
- Push to `main`/`master` branches
34+
- Pull requests to `main`/`master` branches
35+
- Manual workflow dispatch
36+
37+
## Test Structure
38+
39+
- **`home.spec.ts`** - Homepage functionality and visual regression
40+
- **`login.spec.ts`** - Authentication flows
41+
- **`home-axe.spec.ts`** - Accessibility testing
42+
- **`multi-device.spec.ts`** - Responsive design testing
43+
- **`pages/`** - Page Object Models for reusable page interactions
44+
- **`utils/`** - Shared test utilities
45+
46+
## Configuration
47+
48+
- **Base config:** `../test-utils/base.playwright.config.ts`
49+
- **Local config:** `playwright.config.ts`
50+
51+
## Key Features
52+
53+
### Visual Regression Testing
54+
Screenshots are automatically captured and compared:
55+
```bash
56+
# Update snapshots when UI changes are intentional
57+
pnpm --filter e2e-frontend test:update-snapshots
58+
```
59+
60+
### Accessibility Testing
61+
Uses `@axe-core/playwright` for automated a11y checks.
62+
63+
### Page Object Pattern
64+
Reusable page objects in `pages/` directory for maintainable tests.
65+
66+
## Debugging
67+
68+
### Local Debugging
69+
```bash
70+
# Run with browser visible
71+
pnpm --filter e2e-frontend test:headed
72+
73+
# Step through with Playwright Inspector
74+
pnpm --filter e2e-frontend test:debug
75+
76+
# Interactive test runner
77+
pnpm --filter e2e-frontend test:ui
78+
```
79+
80+
### CI Debugging
81+
- Playwright reports and videos are uploaded as artifacts
82+
- Check the "Artifacts" section in failed GitHub Action runs
83+
- Download and view the HTML report locally
84+
85+
## Environment Variables
86+
87+
The tests use these environment variables:
88+
- `NEXTAUTH_SECRET` - Required for authentication
89+
- `NODE_ENV=test` - Set automatically in CI
90+
- `CI=true` - Enables CI-specific behavior
91+
92+
## Troubleshooting
93+
94+
### Common Issues
95+
96+
1. **Frontend not ready:** Increase timeout in CI if the app takes longer to start
97+
2. **Flaky tests:** Check for race conditions, add proper waits
98+
3. **Screenshot differences:** Update snapshots after intentional UI changes
99+
100+
### Useful Commands
101+
102+
```bash
103+
# Show test report after running tests
104+
pnpm --filter e2e-frontend test:report
105+
106+
# Run specific test file
107+
pnpm exec playwright test home.spec.ts
108+
109+
# Run tests matching pattern
110+
pnpm exec playwright test --grep "login"
111+
```

‎packages/e2e-frontend/package.json‎

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -3,7 +3,12 @@
33
"version": "0.0.0",
44
"private": true,
55
"scripts": {
6-
"test": "playwright test"
6+
"test": "playwright test",
7+
"test:headed": "playwright test --headed",
8+
"test:debug": "playwright test --debug",
9+
"test:ui": "playwright test --ui",
10+
"test:report": "playwright show-report",
11+
"test:update-snapshots": "playwright test --update-snapshots"
712
},
813
"devDependencies": {
914
"@playwright/test": "^1.55.0"

‎turbo.json‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -95,6 +95,11 @@
9595
},
9696
"//#check-licenses:root": {
9797
"cache": false
98+
},
99+
"e2e": {
100+
"dependsOn": ["^build"],
101+
"cache": false,
102+
"inputs": ["packages/e2e-frontend/**/*.{ts,js}", "packages/test-utils/**/*.ts"]
98103
}
99104
}
100105
}

0 commit comments

Comments
 (0)