Skip to content

Commit da682b8

Browse files
jyu115jyu115
authored
[MOB-12020] playwright GitHub actions setup (#536)
* add playwright to ci.yml * add readme about playwright CI * Fix corrupted yarn.lock file * add failsafe step for lockfile regeneration * add jwt_generator to .env * fix yarn command * fix webpack parsing error * fix test * set permissions according to best practice * cache browsers to optimize CI resources * increase worker count to 2 * test: Fix Node PATH in Git hooks * test: verify node path fix * cleanup: remove test file * refactor basepage * fix typo * fix auth test * refactor: add server mgmt, enhanced reporting, improved caching * update right version for wait-on * try again * remove redundant config and optimize browser installation * optimize browser installation more * tweak and optimize CI config * finetune playwright configs
1 parent 642889e commit da682b8

File tree

11 files changed

+2799
-923
lines changed

11 files changed

+2799
-923
lines changed

‎.github/workflows/ci.yml‎

Lines changed: 179 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
# source: https://github.com/actions/starter-workflows/blob/main/ci/node.js.yml
55

66
name: ci
7-
7+
permissions:
8+
contents: read
89
on:
910
push:
1011
branches:
@@ -20,8 +21,8 @@ jobs:
2021
- name: Use Node.js 18.12.0
2122
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
2223
with:
23-
node-version: '18.12.0'
24-
cache: 'yarn'
24+
node-version: "18.12.0"
25+
cache: "yarn"
2526
- run: yarn install --frozen-lockfile
2627
- run: yarn prepublishOnly
2728
- run: node index.node.js
@@ -31,3 +32,178 @@ jobs:
3132
with:
3233
token: ${{ secrets.CODECOV_TOKEN }}
3334
- run: yarn check-deps
35+
36+
e2e-tests:
37+
runs-on: ubuntu-latest
38+
timeout-minutes: 15
39+
40+
strategy:
41+
matrix:
42+
browser: [chromium, firefox, webkit]
43+
fail-fast: false
44+
45+
steps:
46+
- uses: actions/checkout@b4ffde65f46336ab88eb53be808477a3936bae11 # v4.1.1
47+
- name: Setup Node.js
48+
uses: actions/setup-node@60edb5dd545a775178f52524783378180af0d1f8 # v4.0.2
49+
with:
50+
node-version: "18.12.0"
51+
cache: "yarn"
52+
- name: Install dependencies
53+
run: |
54+
yarn install --frozen-lockfile
55+
yarn prepublishOnly
56+
- name: Cache React dependencies
57+
uses: actions/cache@v4
58+
with:
59+
path: react-example/node_modules
60+
key: ${{ runner.os }}-react-deps-${{ hashFiles('react-example/yarn.lock') }}
61+
restore-keys: |
62+
${{ runner.os }}-react-deps-
63+
- name: Install React example dependencies
64+
working-directory: ./react-example
65+
run: |
66+
# Try frozen lockfile first, fallback to regeneration if corrupted
67+
yarn install --frozen-lockfile || {
68+
echo "Lockfile corrupted, regenerating..."
69+
rm yarn.lock
70+
yarn install
71+
}
72+
# Advanced browser caching strategy
73+
- name: Cache Playwright browsers
74+
uses: actions/cache@v4
75+
id: playwright-cache
76+
with:
77+
path: ~/.cache/ms-playwright
78+
key: ${{ runner.os }}-playwright-v2-${{ matrix.browser }}-${{ hashFiles('react-example/yarn.lock') }}
79+
restore-keys: |
80+
${{ runner.os }}-playwright-v2-${{ matrix.browser }}-
81+
${{ runner.os }}-playwright-${{ matrix.browser }}-
82+
${{ runner.os }}-playwright-v2-
83+
# Browser-specific installation strategy
84+
- name: Install Playwright browsers
85+
working-directory: ./react-example
86+
run: |
87+
echo "📥 Installing ${{ matrix.browser }} browser..."
88+
89+
# Smart installation based on browser type and cache status
90+
cache_hit="${{ steps.playwright-cache.outputs.cache-hit }}"
91+
92+
if [ "$cache_hit" = "true" ]; then
93+
echo "Cache hit: Installing browser only..."
94+
yarn playwright install ${{ matrix.browser }}
95+
elif [ "${{ matrix.browser }}" = "webkit" ]; then
96+
echo "Cache miss + WebKit: Installing with dependencies..."
97+
yarn playwright install ${{ matrix.browser }} --with-deps
98+
elif [ "${{ matrix.browser }}" = "firefox" ]; then
99+
echo "Cache miss + Firefox: Installing with dependencies..."
100+
yarn playwright install ${{ matrix.browser }} --with-deps
101+
else
102+
echo "Cache miss + Chromium: Installing browser only..."
103+
yarn playwright install ${{ matrix.browser }}
104+
fi
105+
# WebKit-specific dependency fix (Ubuntu 22.04 compatibility)
106+
- name: Fix WebKit dependencies
107+
if: matrix.browser == 'webkit'
108+
run: |
109+
echo "🔧 Applying WebKit Ubuntu 22.04 fixes..."
110+
sudo apt-get update -qq
111+
# Install the exact library versions WebKit needs
112+
sudo apt-get install -y libwoff2-1.1.0 libwoff2dec1 fonts-liberation || true
113+
echo "✅ WebKit dependencies updated"
114+
115+
# Browser environment setup (flags now handled by Playwright config)
116+
- name: Setup browser environment
117+
run: |
118+
echo "🚀 Browser environment configured via Playwright config"
119+
echo "✅ CI-optimized browser launch parameters will be applied automatically"
120+
- name: Create environment configuration
121+
working-directory: ./react-example
122+
run: |
123+
cat > .env << 'EOF'
124+
API_KEY=${{ secrets.ITERABLE_API_KEY }}
125+
JWT_SECRET=${{ secrets.JWT_SECRET }}
126+
USE_JWT=true
127+
JWT_GENERATOR=https://jwt-generator.stg-itbl.co/generate
128+
[email protected]
129+
EOF
130+
- name: Build React example app
131+
working-directory: ./react-example
132+
run: yarn build
133+
# Enhanced server startup with better resource management
134+
- name: Start React example server
135+
working-directory: ./react-example
136+
run: |
137+
echo "🚀 Starting React server..."
138+
139+
# Set Node.js memory limits for better stability
140+
export NODE_OPTIONS="--max-old-space-size=4096"
141+
142+
# Start server with optimized settings
143+
yarn webpack serve --config webpack.config.js --port 8080 --host 0.0.0.0 &
144+
SERVER_PID=$!
145+
echo "Server started with PID: $SERVER_PID"
146+
147+
# Enhanced health check with better error reporting
148+
for i in {1..20}; do
149+
if curl -f http://localhost:8080 >/dev/null 2>&1; then
150+
echo "✅ Server ready after ${i} attempts ($(($i*3)) seconds)"
151+
break
152+
fi
153+
if [ $i -eq 20 ]; then
154+
echo "❌ Server startup failed after 60 seconds"
155+
echo "📋 Debug information:"
156+
ps aux | grep webpack || true
157+
netstat -tulpn | grep 8080 || true
158+
curl -v http://localhost:8080 || true
159+
exit 1
160+
fi
161+
sleep 3
162+
echo "Server startup attempt $i/20..."
163+
done
164+
# Enhanced test execution with browser-specific optimizations
165+
- name: Run Playwright tests
166+
working-directory: ./react-example
167+
run: |
168+
yarn playwright test --project=${{ matrix.browser }}
169+
env:
170+
CI: true
171+
# Browser-specific environment variables
172+
DISPLAY: :99 # Virtual display for browsers
173+
# WebKit library path configuration
174+
LD_LIBRARY_PATH: $HOME/.cache/ms-playwright/${{ matrix.browser }}-*/minibrowser-wpe/lib:$LD_LIBRARY_PATH
175+
# Enhanced artifact management
176+
- name: Upload Playwright report
177+
uses: actions/upload-artifact@v4
178+
if: always()
179+
with:
180+
name: playwright-report-${{ matrix.browser }}-${{ github.run_number }}
181+
path: react-example/playwright-report/
182+
retention-days: 14
183+
184+
- name: Upload test results
185+
uses: actions/upload-artifact@v4
186+
if: always()
187+
with:
188+
name: test-results-${{ matrix.browser }}-${{ github.run_number }}
189+
path: react-example/test-results/
190+
retention-days: 7
191+
# Comprehensive cleanup with port management
192+
- name: Cleanup server processes
193+
if: always()
194+
run: |
195+
echo "🧹 Cleaning up server processes..."
196+
197+
# Kill all processes using port 8080
198+
sudo lsof -ti:8080 | xargs -r sudo kill -9 || true
199+
200+
# Kill by process names
201+
pkill -f "webpack serve" || true
202+
pkill -f "node.*webpack" || true
203+
204+
# Kill any remaining browser processes
205+
pkill -f "chrome" || true
206+
pkill -f "firefox" || true
207+
pkill -f "webkit" || true
208+
209+
echo "✅ Cleanup completed"

‎README.md‎

Lines changed: 67 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -2740,6 +2740,73 @@ yarn start # In one terminal
27402740
yarn playwright # In another terminal
27412741
```
27422742

2743+
## CI/CD with GitHub Actions
2744+
2745+
The project uses GitHub Actions for continuous integration, including automated Playwright E2E testing across multiple browsers.
2746+
2747+
### CI Pipeline Overview
2748+
2749+
The CI pipeline (`/.github/workflows/ci.yml`) runs:
2750+
2751+
1. **Unit Tests**: SDK build verification and Jest unit tests
2752+
2. **E2E Tests**: Playwright tests across Chromium, Firefox, and WebKit browsers
2753+
2754+
### Playwright CI Configuration
2755+
2756+
The E2E tests run automatically on every push and pull request:
2757+
2758+
- **Browsers**: Tests run simultaneously on Chromium, Firefox, and WebKit
2759+
- **Environment**: Automatically configured with test API keys
2760+
- **Reports**: Test results and screenshots are uploaded as artifacts
2761+
- **Retry Strategy**: Failed tests are retried twice on CI
2762+
2763+
### Required GitHub Secrets
2764+
2765+
The repository uses these configured secrets for Playwright E2E testing in CI:
2766+
2767+
- **`ITERABLE_API_KEY`**: Iterable web API key for SDK authentication during testing
2768+
- **`JWT_SECRET`**: JWT secret associated with the API key for token generation
2769+
2770+
These secrets are already configured in the repository's GitHub Actions settings. They enable the CI environment to authenticate with Iterable's API and test SDK functionality with real API endpoints.
2771+
2772+
**Test Configuration Details:**
2773+
- **Default Test User**: `[email protected]` is used as the default test user for CI testing
2774+
- **Test Project**: The API_KEY uses Iterable's production test project:
2775+
- **Project**: Mobile SDK Test (Do Not Delete) (Project ID: 1226)
2776+
- **URL**: https://app.iterable.com/campaigns/manage?projectId=1226
2777+
2778+
> **Note for developers**: If you need to update these secrets or configure them in a fork, go to Repository Settings → Secrets and variables → Actions and update the values accordingly.
2779+
2780+
### CI Environment Configuration
2781+
2782+
During CI execution, the environment is automatically configured with:
2783+
2784+
```bash
2785+
API_KEY=${{ secrets.ITERABLE_API_KEY }}
2786+
JWT_SECRET=${{ secrets.JWT_SECRET }}
2787+
USE_JWT=true
2788+
[email protected]
2789+
```
2790+
2791+
### Features Tested in CI
2792+
2793+
The automated tests cover:
2794+
2795+
- **Authentication**: Login form functionality and user management
2796+
- **Navigation**: All app sections (Commerce, Events, Users, InApp, Embedded)
2797+
- **UUA Testing**: Unknown user activation and consent management
2798+
- **Core SDK Integration**: Proper initialization and configuration
2799+
2800+
### Accessing CI Results
2801+
2802+
After CI runs, you can:
2803+
2804+
- View test results in the GitHub Actions tab
2805+
- Download test reports and screenshots from artifacts
2806+
- Debug failed tests using uploaded traces and videos
2807+
2808+
For detailed troubleshooting and local development setup, see the [E2E Testing Guide](./react-example/e2e/README.md).
2809+
27432810
# Contributing
27442811

27452812
Looking to contribute? Please see the [contributing instructions here](./CONTRIBUTING.md)

0 commit comments

Comments
 (0)