Skip to content

Commit e4321b8

Browse files
Copilot0xrinegade
Copilot
and
0xrinegade
committed
Improved E2E testing setup and GitHub Actions integration
Co-authored-by: 0xrinegade <[email protected]>
1 parent a58cd7d commit e4321b8

File tree

7 files changed

+317
-23
lines changed

7 files changed

+317
-23
lines changed

‎.github/workflows/e2e-tests.yml‎

Lines changed: 13 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -42,7 +42,20 @@ jobs:
4242
libpangocairo-1.0-0 \
4343
libxss1 \
4444
xvfb
45+
46+
- name: Set up Puppeteer environment variables
47+
run: |
48+
echo "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true" >> $GITHUB_ENV
49+
echo "PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser" >> $GITHUB_ENV
4550
51+
- name: Start Next.js dev server
52+
run: |
53+
npm run dev &
54+
echo "Waiting for dev server to start..."
55+
sleep 20
56+
env:
57+
NODE_ENV: test
58+
4659
- name: Run tests with Xvfb
4760
run: |
4861
mkdir -p screenshots

‎.github/workflows/pr-build.yml‎

Lines changed: 118 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,118 @@
1+
name: PR Build and Test
2+
3+
on:
4+
pull_request:
5+
types: [opened, synchronize, reopened]
6+
7+
jobs:
8+
build:
9+
runs-on: ubuntu-latest
10+
11+
steps:
12+
- uses: actions/checkout@v3
13+
14+
- name: Set up Node.js
15+
uses: actions/setup-node@v3
16+
with:
17+
node-version: '18'
18+
cache: 'npm'
19+
20+
- name: Install dependencies
21+
run: npm ci
22+
23+
- name: Lint
24+
run: npm run lint
25+
26+
- name: Build
27+
run: npm run build
28+
29+
- name: Unit tests
30+
run: npm test
31+
32+
- name: Notify PR
33+
uses: actions/github-script@v6
34+
with:
35+
github-token: ${{ secrets.GITHUB_TOKEN }}
36+
script: |
37+
github.rest.issues.createComment({
38+
issue_number: context.issue.number,
39+
owner: context.repo.owner,
40+
repo: context.repo.repo,
41+
body: '✅ Build and unit tests completed successfully. E2E tests will run separately.'
42+
})
43+
44+
e2e-tests:
45+
needs: build
46+
runs-on: ubuntu-latest
47+
48+
steps:
49+
- uses: actions/checkout@v3
50+
51+
- name: Set up Node.js
52+
uses: actions/setup-node@v3
53+
with:
54+
node-version: '18'
55+
cache: 'npm'
56+
57+
- name: Install dependencies
58+
run: npm ci
59+
60+
- name: Install Puppeteer dependencies
61+
run: |
62+
sudo apt-get update
63+
sudo apt-get install -y --no-install-recommends \
64+
chromium-browser \
65+
libgbm1 \
66+
libnss3 \
67+
libatk1.0-0 \
68+
libatk-bridge2.0-0 \
69+
libcups2 \
70+
libdrm2 \
71+
libxkbcommon0 \
72+
libxcomposite1 \
73+
libxdamage1 \
74+
libxrandr2 \
75+
libasound2 \
76+
libpangocairo-1.0-0 \
77+
libxss1 \
78+
xvfb
79+
80+
- name: Set up Puppeteer environment variables
81+
run: |
82+
echo "PUPPETEER_SKIP_CHROMIUM_DOWNLOAD=true" >> $GITHUB_ENV
83+
echo "PUPPETEER_EXECUTABLE_PATH=/usr/bin/chromium-browser" >> $GITHUB_ENV
84+
85+
- name: Start Next.js dev server
86+
run: |
87+
npm run dev &
88+
echo "Waiting for dev server to start..."
89+
sleep 20
90+
env:
91+
NODE_ENV: test
92+
93+
- name: Run E2E tests with Xvfb
94+
run: |
95+
mkdir -p screenshots
96+
xvfb-run --server-args="-screen 0 1280x720x24" npm run test:e2e
97+
98+
- name: Archive screenshots
99+
uses: actions/upload-artifact@v3
100+
if: always()
101+
with:
102+
name: e2e-screenshots
103+
path: screenshots/
104+
retention-days: 5
105+
106+
- name: Notify PR with E2E results
107+
uses: actions/github-script@v6
108+
if: always()
109+
with:
110+
github-token: ${{ secrets.GITHUB_TOKEN }}
111+
script: |
112+
const outcome = '${{ job.status }}' === 'success' ? '✅ E2E tests passed' : '❌ E2E tests failed';
113+
github.rest.issues.createComment({
114+
issue_number: context.issue.number,
115+
owner: context.repo.owner,
116+
repo: context.repo.repo,
117+
body: `${outcome} - [See detailed logs](https://github.com/${context.repo.owner}/${context.repo.repo}/actions/runs/${context.runId})`
118+
})

‎docs/E2E-TESTING.md‎

Lines changed: 48 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -15,32 +15,49 @@ The E2E tests simulate real user interactions with the application in a browser
1515

1616
## Running Tests
1717

18-
### Local Testing
18+
### Using the Test Runner Script
1919

20-
To run the E2E tests locally:
20+
The easiest way to run tests is with the test runner script:
21+
22+
```bash
23+
# Make the script executable
24+
chmod +x run-e2e-tests.sh
25+
26+
# Run tests locally
27+
./run-e2e-tests.sh --env local
28+
29+
# Run tests with debugging enabled (saves screenshots)
30+
./run-e2e-tests.sh --env local --debug
31+
32+
# Run tests in Docker
33+
./run-e2e-tests.sh --env docker
34+
35+
# Run tests in CI environment
36+
./run-e2e-tests.sh --env ci
37+
```
38+
39+
### Using npm Scripts
40+
41+
You can also use the npm scripts directly:
2142

2243
```bash
2344
# Install dependencies
2445
npm ci
2546

26-
# Run E2E tests
47+
# Run E2E tests locally
2748
npm run test:e2e
2849

2950
# Run E2E tests with debugging (saves screenshots)
3051
npm run test:e2e:debug
31-
```
3252

33-
### Docker Testing
53+
# Run in Docker
54+
npm run test:e2e:docker
3455

35-
To run tests in a Docker container:
36-
37-
```bash
38-
# Build and run the test container
39-
docker-compose -f docker-compose.test.yml up --build
56+
# Run in CI environment
57+
npm run test:e2e:ci
4058

41-
# Or using Docker directly
42-
docker build -t svmp2p-e2e-tests -f Dockerfile.test .
43-
docker run --rm -v $(pwd)/screenshots:/app/screenshots svmp2p-e2e-tests
59+
# Run in all environments
60+
npm run test:e2e:all
4461
```
4562

4663
## Test Structure
@@ -66,6 +83,8 @@ src/tests/e2e/
6683
- `jest-puppeteer.config.js`: Puppeteer configuration
6784
- `Dockerfile.test`: Docker configuration for running tests
6885
- `docker-compose.test.yml`: Docker Compose configuration for testing
86+
- `run-e2e-tests.sh`: Helper script for running tests in different environments
87+
- `.github/workflows/e2e-tests.yml`: GitHub Actions workflow for running E2E tests
6988

7089
## Creating New Tests
7190

@@ -108,7 +127,22 @@ describe('My Feature', () => {
108127
- If elements aren't found, check that your selectors match the rendered HTML
109128
- If the application doesn't load, ensure the development server is running on port 3000
110129
- Check screenshots in the `screenshots` directory to diagnose issues
130+
- Look for browser console errors in the test output when running with DEBUG=true
111131

112132
## CI/CD Integration
113133

114-
E2E tests are automatically run in GitHub Actions for pull requests and pushes to main branch. The workflow is defined in `.github/workflows/e2e-tests.yml`.
134+
E2E tests are automatically run in GitHub Actions for pull requests and pushes to main branch. The workflow is defined in `.github/workflows/e2e-tests.yml` and `.github/workflows/pr-build.yml`.
135+
136+
When a PR is created or updated, the CI pipeline will:
137+
1. Build the application
138+
2. Run unit tests
139+
3. Run E2E tests
140+
4. Report results back to the PR
141+
142+
## Reporting Issues
143+
144+
When reporting issues with E2E tests:
145+
1. Include the exact command used to run the tests
146+
2. Share any screenshots generated during the failing test
147+
3. Include the complete error message and stack trace
148+
4. Specify your environment (local, Docker, CI)

‎jest-puppeteer.config.js‎

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,25 @@
11
module.exports = {
22
launch: {
33
headless: 'new',
4-
args: ['--no-sandbox', '--disable-setuid-sandbox', '--disable-dev-shm-usage'],
4+
args: [
5+
'--no-sandbox',
6+
'--disable-setuid-sandbox',
7+
'--disable-dev-shm-usage',
8+
'--disable-web-security',
9+
'--disable-features=IsolateOrigins,site-per-process'
10+
],
511
defaultViewport: {
612
width: 1280,
713
height: 720
8-
}
14+
},
15+
timeout: 30000, // 30 seconds timeout for browser launch
916
},
1017
server: {
11-
command: 'npm run dev',
18+
command: process.env.CI ? 'echo "Using external server in CI"' : 'npm run dev',
1219
port: 3000,
13-
launchTimeout: 60000, // 60 seconds timeout for server launch
14-
usedPortAction: 'kill' // kill process if port is already in use
15-
}
20+
launchTimeout: 120000, // 120 seconds timeout for server launch
21+
usedPortAction: 'kill', // kill process if port is already in use
22+
debug: true
23+
},
24+
browserContext: 'default'
1625
};

‎package.json‎

Lines changed: 3 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -13,7 +13,9 @@
1313
"test": "jest",
1414
"test:e2e": "jest --config jest-e2e.config.js",
1515
"test:e2e:debug": "DEBUG=true jest --config jest-e2e.config.js",
16-
"test:e2e:docker": "docker-compose -f docker-compose.test.yml up --build"
16+
"test:e2e:docker": "docker-compose -f docker-compose.test.yml up --build",
17+
"test:e2e:ci": "./run-e2e-tests.sh --env ci",
18+
"test:e2e:all": "./run-e2e-tests.sh --env local && ./run-e2e-tests.sh --env docker"
1719
},
1820
"repository": {
1921
"type": "git",

‎run-e2e-tests.sh‎

Lines changed: 98 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,98 @@
1+
#!/bin/bash
2+
set -e
3+
4+
# Colors for output
5+
GREEN='\033[0;32m'
6+
RED='\033[0;31m'
7+
BLUE='\033[0;34m'
8+
NC='\033[0m' # No Color
9+
10+
echo -e "${BLUE}=========================================${NC}"
11+
echo -e "${BLUE} SVM P2P Exchange E2E Test Runner ${NC}"
12+
echo -e "${BLUE}=========================================${NC}"
13+
14+
# Default environment
15+
ENV="local"
16+
17+
# Parse command line arguments
18+
while [[ $# -gt 0 ]]; do
19+
key="$1"
20+
case $key in
21+
--env)
22+
ENV="$2"
23+
shift
24+
shift
25+
;;
26+
--debug)
27+
DEBUG=true
28+
shift
29+
;;
30+
*)
31+
echo "Unknown option: $1"
32+
exit 1
33+
;;
34+
esac
35+
done
36+
37+
# Check if Docker is available for Docker environment
38+
if [ "$ENV" = "docker" ]; then
39+
if ! command -v docker &> /dev/null || ! command -v docker-compose &> /dev/null; then
40+
echo -e "${RED}Error: Docker and docker-compose are required for Docker environment${NC}"
41+
exit 1
42+
fi
43+
fi
44+
45+
echo -e "${BLUE}Environment: ${ENV}${NC}"
46+
if [ -n "$DEBUG" ]; then
47+
echo -e "${BLUE}Debug mode: enabled${NC}"
48+
fi
49+
50+
# Create screenshots directory if it doesn't exist
51+
mkdir -p screenshots
52+
53+
# Run tests based on environment
54+
case $ENV in
55+
"local")
56+
echo -e "${BLUE}Starting local tests...${NC}"
57+
if [ -n "$DEBUG" ]; then
58+
npm run test:e2e:debug
59+
else
60+
npm run test:e2e
61+
fi
62+
;;
63+
"docker")
64+
echo -e "${BLUE}Starting tests in Docker...${NC}"
65+
if [ -n "$DEBUG" ]; then
66+
DEBUG=true docker-compose -f docker-compose.test.yml up --build
67+
else
68+
docker-compose -f docker-compose.test.yml up --build
69+
fi
70+
;;
71+
"ci")
72+
echo -e "${BLUE}Starting tests for CI environment...${NC}"
73+
# Start the Next.js dev server
74+
npm run dev &
75+
echo "Waiting for dev server to start..."
76+
sleep 20
77+
78+
# Run tests with Xvfb
79+
if [ -n "$DEBUG" ]; then
80+
DEBUG=true xvfb-run --server-args="-screen 0 1280x720x24" npm run test:e2e
81+
else
82+
xvfb-run --server-args="-screen 0 1280x720x24" npm run test:e2e
83+
fi
84+
;;
85+
*)
86+
echo -e "${RED}Unknown environment: ${ENV}${NC}"
87+
exit 1
88+
;;
89+
esac
90+
91+
# Check exit code
92+
if [ $? -eq 0 ]; then
93+
echo -e "${GREEN}All tests passed successfully!${NC}"
94+
exit 0
95+
else
96+
echo -e "${RED}Tests failed. Check the logs and screenshots for more details.${NC}"
97+
exit 1
98+
fi

0 commit comments

Comments
 (0)