CI/CD Integration

Production-ready CI/CD pipelines for automated testing, deployment, and quality assurance. Copy these proven configurations and adapt them to your project needs.

Quick Start Examples

GitHub Actions - React Basic

Essential testing pipeline for React applications with TypeScript, ESLint, and Playwright E2E tests.

.github/workflows/ci.yml

name: React CI Pipeline

on:
  push:
    branches: [ main, develop ]
  pull_request:
    branches: [ main ]

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        node-version: [20, 22]
        
    steps:
    - uses: actions/checkout@v4
    
    - name: Use Node.js ${{ matrix.node-version }}
      uses: actions/setup-node@v4
      with:
        node-version: ${{ matrix.node-version }}
        cache: 'npm'
    
    - name: Install dependencies
      run: npm ci
    
    - name: Run linting
      run: npm run lint
      
    - name: Run type checking
      run: npm run typecheck
    
    - name: Run unit tests
      run: npm run test:coverage
    
    - name: Run E2E tests
      run: npm run test:e2e
      
    - name: Upload coverage
      uses: codecov/codecov-action@v4
      with:
        token: ${{ secrets.CODECOV_TOKEN }}
        file: ./coverage/lcov.info

Bitbucket - WordPress VIP

Enterprise WordPress pipeline with VIP compliance, security scanning, and Capistrano deployment.

bitbucket-pipelines.yml

# Bitbucket Pipeline for WordPress with VIP Standards
image: projectassistant/pipelines:3.0

definitions:
  caches:
    composer: ~/.composer/cache
    node: node_modules

  steps:
    - step: &vip-standards
        name: WordPress VIP Standards Check
        caches:
          - composer
        script:
          - composer install --no-scripts --no-progress
          - vendor/bin/phpcs --standard=WordPress-VIP-Go --report=summary .
        artifacts:
          - phpcs_report.csv
    
    - step: &security-scan
        name: Security Vulnerability Scan
        caches:
          - composer
        script:
          - composer install --no-scripts --no-progress
          - vendor/bin/security-checker security:check composer.lock
          
    - step: &unit-tests
        name: PHPUnit Tests
        caches:
          - composer
        services:
          - mysql
        script:
          - composer install --no-scripts --no-progress
          - cp .env.testing .env
          - vendor/bin/phpunit --coverage-text
        artifacts:
          - test-reports/**
          - coverage/**
    
    - step: &build-assets
        name: Build Theme Assets
        caches:
          - node
        script:
          - cd wp-content/themes/your-theme
          - npm ci
          - npm run build
          - npm run test
        artifacts:
          - wp-content/themes/your-theme/dist/**

    - step: &deploy-staging
        name: Deploy to Staging
        deployment: staging
        script:
          - bundle install
          - bundle exec cap staging deploy

pipelines:
  branches:
    main:
      - parallel:
        - step: *vip-standards
        - step: *security-scan
      - step: *unit-tests
      - step: *build-assets
      - step: *deploy-staging

Production-Grade Pipeline

GitHub Actions - Advanced React Testing

Comprehensive pipeline featuring parallel testing, sharding, path filtering, and advanced reporting. Includes accessibility testing, visual regression, and Allure reporting.

Path Filtering

Only run tests when code changes

Parallel Testing

4-way unit test sharding

A11y Testing

Automated accessibility checks

Multi-Browser

Chromium, Firefox, WebKit

.github/workflows/advanced-ci.yml

name: Advanced React Testing Pipeline

on:
  push:
    branches: [main, develop, 'feature/**']
    paths:
      - 'src/**'
      - 'tests/**'
      - 'package.json'
      - 'vite.config.ts'
  pull_request:
    branches: [main, develop]

concurrency:
  group: ${{ github.workflow }}-${{ github.ref }}
  cancel-in-progress: true

env:
  NODE_ENV: test
  CI: true
  FORCE_COLOR: true

jobs:
  changes:
    runs-on: ubuntu-latest
    outputs:
      tests: ${{ steps.changes.outputs.tests }}
      src: ${{ steps.changes.outputs.src }}
    steps:
      - uses: actions/checkout@v4
      - uses: dorny/paths-filter@v3
        id: changes
        with:
          filters: |
            tests:
              - 'tests/**'
              - 'src/**'
              - 'package.json'
              - 'vite.config.ts'
            src:
              - 'src/**'

  quality-checks:
    runs-on: ubuntu-latest
    needs: changes
    if: needs.changes.outputs.tests == 'true'
    strategy:
      matrix:
        node-version: [20, 22]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'
      
      - name: Install dependencies
        run: npm ci --prefer-offline --no-audit

      - name: Run ESLint
        run: npm run lint -- --format=json --output-file=eslint-report.json
        continue-on-error: true

      - name: Run TypeScript check
        run: npm run type-check

      - name: Upload ESLint results
        uses: actions/upload-artifact@v4
        if: always()
        with:
          name: eslint-results-node-${{ matrix.node-version }}
          path: eslint-report.json

  unit-tests:
    runs-on: ubuntu-latest
    needs: changes
    if: needs.changes.outputs.tests == 'true'
    strategy:
      matrix:
        node-version: [20, 22]
        shard: [1, 2, 3, 4]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: ${{ matrix.node-version }}
          cache: 'npm'

      - name: Install dependencies
        run: npm ci --prefer-offline --no-audit

      - name: Run unit tests (shard ${{ matrix.shard }})
        run: |
          npm run test:unit -- \
            --shard=${{ matrix.shard }}/4 \
            --coverage \
            --reporter=junit \
            --outputFile.junit=./test-results/junit-unit-${{ matrix.shard }}.xml

      - name: Upload coverage to Codecov
        uses: codecov/codecov-action@v4
        with:
          token: ${{ secrets.CODECOV_TOKEN }}
          file: ./coverage/lcov.info
          flags: unit-tests,node-${{ matrix.node-version }}

  e2e-tests:
    runs-on: ubuntu-latest
    needs: changes
    if: needs.changes.outputs.tests == 'true'
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
        shard: [1, 2, 3]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'npm'

      - name: Install dependencies
        run: npm ci --prefer-offline --no-audit

      - name: Install Playwright browsers
        run: npx playwright install --with-deps ${{ matrix.browser }}

      - name: Build application
        run: npm run build

      - name: Run E2E tests
        run: |
          npx playwright test \
            --project=${{ matrix.browser }} \
            --shard=${{ matrix.shard }}/3 \
            --reporter=junit
        env:
          PLAYWRIGHT_JUNIT_OUTPUT_NAME: junit-e2e-${{ matrix.browser }}-shard-${{ matrix.shard }}.xml

  accessibility-tests:
    runs-on: ubuntu-latest
    needs: changes
    if: needs.changes.outputs.tests == 'true'
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'npm'

      - name: Install dependencies
        run: npm ci --prefer-offline --no-audit

      - name: Build application
        run: npm run build

      - name: Run accessibility tests
        run: npm run test:a11y -- --reporter=junit

  collect-results:
    runs-on: ubuntu-latest
    needs: [quality-checks, unit-tests, e2e-tests, accessibility-tests]
    if: always()
    steps:
      - name: Download all artifacts
        uses: actions/download-artifact@v4
        with:
          path: artifacts

      - name: Generate Allure Report
        uses: simple-elf/allure-report-action@master
        if: always()
        with:
          allure_results: artifacts
          allure_report: allure-report
          gh_pages: allure-results

Pipeline Features

Quality Gates

Minimum 80% test coverage
Zero ESLint errors
TypeScript compilation
Security vulnerability checks
WCAG 2.1 AA accessibility

Performance

Parallel test execution
Dependency caching
Path-based filtering
Test sharding
Artifact optimization

Reporting

Allure test reports
Code coverage dashboards
Bundle size analysis
Slack notifications
GitHub PR status checks

More Configuration Examples

GitHub Actions Templates

React + TypeScript + VitestView

FastAPI + Python TestingView

WordPress Plugin TestingView

Docker Multi-stage BuildsView

Bitbucket Pipelines Templates

WordPress + Capistrano DeployView

Node.js + Docker DeploymentView

Multi-environment PipelinesView

Security & Compliance ScansView

Need a custom configuration? Use our Testing Configuration Generator to create a tailored pipeline for your specific project requirements.