Automate your tests in CI/CD pipelines and build professional test reporting dashboards
CI/CD is like having a robot assistant that automatically tests your code every time you make changes. No more "it works on my machine" excuses!
CI (Continuous Integration)
Automatically build and test code when pushed to repository
CD (Continuous Deployment)
Automatically deploy code to production after tests pass
GitHub Actions runs your tests automatically when you push code. It's free for public repos!
# .github/workflows/test.yml
name: Run Tests
on:
push:
branches: [ main, develop ]
pull_request:
branches: [ main ]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- name: Setup Node.js
uses: actions/setup-node@v3
with:
node-version: '18'
- name: Install dependencies
run: npm ci
- name: Run tests
run: npm test
- name: Upload test results
if: always()
uses: actions/upload-artifact@v3
with:
name: test-results
path: test-results/
# .github/workflows/playwright.yml
name: Playwright Tests
on: [push, pull_request]
jobs:
test:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- uses: actions/setup-node@v3
- name: Install dependencies
run: npm ci
- name: Install Playwright Browsers
run: npx playwright install --with-deps
- name: Run Playwright tests
run: npx playwright test
- name: Upload test report
if: always()
uses: actions/upload-artifact@v3
with:
name: playwright-report
path: playwright-report/
jobs:
test:
runs-on: ubuntu-latest
strategy:
matrix:
browser: [chromium, firefox, webkit]
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npx playwright test --project=${{ matrix.browser }}
Jenkins is the most popular CI/CD tool in enterprises. Learn to integrate your tests!
// Jenkinsfile
pipeline {
agent any
stages {
stage('Checkout') {
steps {
git 'https://github.com/your-repo.git'
}
}
stage('Install Dependencies') {
steps {
sh 'npm install'
}
}
stage('Run Tests') {
steps {
sh 'npm test'
}
}
stage('Generate Report') {
steps {
publishHTML([
reportDir: 'test-results',
reportFiles: 'index.html',
reportName: 'Test Report'
])
}
}
}
post {
always {
junit 'test-results/**/*.xml'
}
failure {
mail to: 'team@example.com',
subject: "Build Failed: ${env.JOB_NAME}",
body: "Check console output"
}
}
}
Docker ensures tests run the same way everywhere - your laptop, CI server, or production.
# Dockerfile
FROM mcr.microsoft.com/playwright:v1.40.0-focal
WORKDIR /app
COPY package*.json ./
RUN npm ci
COPY . .
CMD ["npx", "playwright", "test"]
# Build and run
docker build -t my-tests .
docker run my-tests
# docker-compose.yml
version: '3.8'
services:
tests:
build: .
volumes:
- ./test-results:/app/test-results
environment:
- BASE_URL=http://app:3000
app:
image: my-app:latest
ports:
- "3000:3000"
Run tests in parallel to save time. 100 tests in 10 minutes instead of 100 minutes!
// playwright.config.ts
export default defineConfig({
// Run tests in parallel
workers: process.env.CI ? 4 : 2,
// Retry failed tests
retries: process.env.CI ? 2 : 0,
// Shard tests across machines
shard: {
current: Number(process.env.SHARD) || 1,
total: Number(process.env.TOTAL_SHARDS) || 1
}
});
# Run sharded tests
SHARD=1 TOTAL_SHARDS=4 npx playwright test
SHARD=2 TOTAL_SHARDS=4 npx playwright test
SHARD=3 TOTAL_SHARDS=4 npx playwright test
SHARD=4 TOTAL_SHARDS=4 npx playwright test
Beautiful reports make it easy to see what passed, what failed, and why.
# Install Allure
npm install --save-dev allure-playwright
// playwright.config.ts
reporter: [
['html'],
['allure-playwright']
],
# Generate and open report
npx playwright test
allure generate ./allure-results --clean
allure open ./allure-report
// reporter.js - Custom reporter
class CustomReporter {
onTestEnd(test, result) {
const data = {
name: test.title,
status: result.status,
duration: result.duration,
timestamp: new Date()
};
// Send to dashboard API
fetch('https://dashboard.com/api/results', {
method: 'POST',
body: JSON.stringify(data)
});
}
}
Flaky tests pass sometimes and fail sometimes - the nightmare of every QA engineer. Let's fix them!
// 1. Use proper waits
await page.waitForSelector('.element', { state: 'visible' });
// 2. Isolate tests
test.beforeEach(async ({ page }) => {
await page.goto('/fresh-start');
await clearDatabase();
});
// 3. Retry flaky tests
test.describe.configure({ retries: 2 });
// 4. Mock external services
await page.route('**/api/external', route => {
route.fulfill({ body: mockData });
});
Build a production-ready CI/CD pipeline with tests, reports, and notifications.
# .github/workflows/complete-pipeline.yml
name: Complete Test Pipeline
on:
push:
branches: [ main ]
pull_request:
schedule:
- cron: '0 2 * * *' # Run daily at 2 AM
jobs:
unit-tests:
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npm run test:unit
e2e-tests:
needs: unit-tests
runs-on: ubuntu-latest
strategy:
matrix:
browser: [chromium, firefox, webkit]
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npx playwright install
- run: npx playwright test --project=${{ matrix.browser }}
- uses: actions/upload-artifact@v3
if: always()
with:
name: report-${{ matrix.browser }}
path: playwright-report/
api-tests:
needs: unit-tests
runs-on: ubuntu-latest
steps:
- uses: actions/checkout@v3
- run: npm ci
- run: npm run test:api
notify:
needs: [e2e-tests, api-tests]
if: always()
runs-on: ubuntu-latest
steps:
- name: Send Slack notification
uses: 8398a7/action-slack@v3
with:
status: ${{ job.status }}
text: 'Test pipeline completed'
You've mastered CI/CD integration and test management:
Next: Performance & Security Testing in Module 7!