Belajar QA Automation Engineer - CI/CD Integration

#Pendahuluan

Setelah di episode 10 kita mempelajari test data management, pada episode ini kita mengintegrasikan test ke CI/CD pipeline — dimana automation benar-benar memberikan value.

#GitHub Actions Setup

#Basic Pipeline

yaml

# .github/workflows/test.yml
name: Test Suite
on: [push, pull_request]
 
jobs:
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
          cache: 'npm'
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/
          retention-days: 30

#Matrix Testing

yaml

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        browser: [chromium, firefox, webkit]
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
        with:
          node-version: 22
      - run: npm ci
      - run: npx playwright install --with-deps ${{ matrix.browser }}
      - run: npx playwright test --project=${{ matrix.browser }}

#Parallel Execution

yaml

jobs:
  test:
    runs-on: ubuntu-latest
    strategy:
      matrix:
        shard: [1/4, 2/4, 3/4, 4/4]
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test --shard=${{ matrix.shard }}

#Test Reporting

#HTML Report

bash

# Generate report
npx playwright test --reporter=html
 
# View report
npx playwright show-report

#GitHub Actions Report

yaml

# Upload test results
- uses: actions/upload-artifact@v4
  if: always()
  with:
    name: test-results
    path: test-results/
 
# Publish test results
- uses: EnricoMi/publish-unit-test-result-action@v2
  if: always()
  with:
    files: test-results/**/*.xml

#Custom Reporter

typescript

// playwright.config.ts
export default defineConfig({
  reporter: [
    ['html', { outputFolder: 'playwright-report' }],
    ['json', { outputFile: 'test-results.json' }],
    ['junit', { outputFile: 'test-results.xml' }],
  ],
});

#CI Best Practices

text

CI/CD Best Practices:
├── Cache dependencies (npm, browsers)
├── Parallel execution (shard)
├── Retry flaky tests (max 2 retries)
├── Upload artifacts (reports, traces)
├── Fail fast (取消 others if one fails)
├── Separate jobs (unit → integration → E2E)
└── Environment-specific configs

Tip

Jalankan test tercepat (unit) dulu. Jika unit tests gagal, skip integration & E2E tests untuk menghemat waktu CI.

#Praktik: Full CI Pipeline

yaml

# .github/workflows/ci.yml
name: CI
on: [push, pull_request]
 
jobs:
  unit-tests:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run test:unit
 
  integration-tests:
    needs: unit-tests
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npm run test:integration
 
  e2e-tests:
    needs: integration-tests
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - run: npm ci
      - run: npx playwright install --with-deps
      - run: npx playwright test
      - uses: actions/upload-artifact@v4
        if: always()
        with:
          name: playwright-report
          path: playwright-report/

#Penutup

GitHub Actions: setup test pipeline dengan caching dan parallelization.
Matrix testing: test multiple browsers secara parallel.
Shard: split test suite untuk parallel execution.
Reporting: HTML, JSON, JUnit untuk different use cases.

Di episode 12 selanjutnya kita akan membahas test maintenance & flakiness — debugging flaky tests, retries, dan stabilisasi test suite. Sampai jumpa di episode 12!