Integration Patterns

Integration Patterns

This guide shows various ways to integrate the GUI-Based Testing Code Review action with your existing CI/CD pipelines.

Table of Contents

• [Basic Patterns]
• [Advanced Patterns]
• [Framework Integration]
• [Performance Optimization]
• [Enterprise Patterns]

Basic Patterns

1. Simple All-in-One

The easiest way to get started:

name: GUI Test Review
on:
  pull_request:
    branches: [main]

jobs:
  test-and-review:
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      pages: write
      id-token: write
    
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0  # For comparison
          
      - uses: DigitalProductInnovationAndDevelopment/Code-Reviews-of-GUI-Tests@v1
        with:
          github-token: ${{ secrets.GITHUB_TOKEN }}
          enable-visual-comparison: 'true'

2. Enhance Existing Test Pipeline

Add visual review to your current tests:

name: CI Pipeline
on: [pull_request, push]

jobs:
  # Your existing test job
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: actions/setup-node@v4
      - run: npm ci
      - run: npm test
      
      # Generate Playwright report
      - run: npx playwright test --reporter=json
      
      # Upload for dashboard
      - uses: actions/upload-artifact@v4
        with:
          name: test-results
          path: |
            playwright-report/
            test-results/
            playwright-metrics.json
  
  # Add visual dashboard
  visual-review:
    needs: test
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      pages: write
      id-token: write
      
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
      
      - uses: DigitalProductInnovationAndDevelopment/Code-Reviews-of-GUI-Tests@v1
        with:
          mode: 'dashboard-only'
          custom-artifacts-path: '.'

3. Separate Lint and Test

Run components in parallel:

name: Parallel CI
on: [pull_request]

jobs:
  lint:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
      - uses: DigitalProductInnovationAndDevelopment/Code-Reviews-of-GUI-Tests@v1
        with:
          mode: 'lint-only'
          
  test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
        with:
          fetch-depth: 0
      - uses: DigitalProductInnovationAndDevelopment/Code-Reviews-of-GUI-Tests@v1
        with:
          mode: 'test-only'
          enable-visual-comparison: 'true'
          
  dashboard:
    needs: [lint, test]
    runs-on: ubuntu-latest
    permissions:
      contents: read
      pull-requests: write
      pages: write
      id-token: write
      
    steps:
      - uses: actions/checkout@v4
      - uses: actions/download-artifact@v4
      - uses: DigitalProductInnovationAndDevelopment/Code-Reviews-of-GUI-Tests@v1
        with:
          mode: 'dashboard-only'

Best Practices

DO:

• ✅ Use fetch-depth: 0 for visual comparison
• ✅ Set appropriate permissions for your needs
• ✅ Cache dependencies for faster runs
• ✅ Use matrix strategies for comprehensive testing
• ✅ Implement smart retries for flaky tests

DON'T:

• ❌ Run all tests on every commit (use path filters)
• ❌ Ignore security warnings from npm audit
• ❌ Use fail-on-test-failure: true without retry logic
• ❌ Forget to clean up resources (Docker, servers, etc.)

Performance Tips:

1. Use GitHub's larger runners for heavy test suites
2. Parallelize independent test suites
3. Cache everything possible (dependencies, browsers, build outputs)
4. Use shallow clones when comparison isn't needed
5. Consider test sharding for very large suites