持续测试：GitLab CI/CD中的测试自动化集成_千锋教育

stages:
  - test
  - performance

variables:
  LIGHTHOUSE_THRESHOLD_PERFORMANCE: 85
  LIGHTHOUSE_THRESHOLD_ACCESSIBILITY: 90
  LIGHTHOUSE_THRESHOLD_BEST_PRACTICES: 90
  LIGHTHOUSE_THRESHOLD_SEO: 85

performance-test:
  stage: performance
  image: cypress/browsers:node18.12.0-chrome107
  script:
    - npm install -g @lhci/cli
    - npm install
    - npm run build
    - npm run start & sleep 5
    - lhci autorun --config=./lighthouserc.js
  artifacts:
    reports:
      performance: lighthouse-report.json
  rules:
    - if: $CI_MERGE_REQUEST_IID
    - if: $CI_COMMIT_BRANCH == "main"

module.exports = {
  ci: {
    collect: {
      url: ['http://localhost:3000'],
      numberOfRuns: 3,
      startServerCommand: 'npm run start',
      settings: {
        preset: 'desktop',
        throttling: {
          cpuSlowdownMultiplier: 4,
          downloadThroughputKbps: 1638.4,
          uploadThroughputKbps: 768,
          latencyMs: 150
        }
      }
    },
    assert: {
      assertions: {
        'categories:performance': ['warn', {minScore: 0.85}],
        'categories:accessibility': ['error', {minScore: 0.9}],
        'categories:best-practices': ['error', {minScore: 0.9}],
        'categories:seo': ['warn', {minScore: 0.85}]
      }
    },
    upload: {
      target: 'temporary-public-storage'
    }
  }
};

webpagetest-performance:
  stage: performance
  image: node:18
  script:
    - npm install -g webpagetest
    - |
      wpt run \
        --key $WPT_API_KEY \
        --location Dulles:Chrome \
        --connectivity "Cable" \
        --runs 3 \
        --firstViewOnly \
        --video \
        --timeline \
        --headers "Authorization: Bearer $CI_JOB_TOKEN" \
        https://staging.example.com
    - sleep 60
    - wpt results --key $WPT_API_KEY --json
  artifacts:
    paths:
      - wpt-results.json
  rules:
    - if: $CI_COMMIT_BRANCH == "main"

{
  "data": {
    "median": {
      "firstView": {
        "loadTime": 2847,
        "TTFB": 432,
        "render": 1560,
        "fullyLoaded": 5231,
        "SpeedIndex": 3892,
        "requests": 78,
        "bytesIn": 2456789
      }
    }
  }
}

const wptResults = require('./wpt-results.json');
const metrics = wptResults.data.median.firstView;

const thresholds = {
  loadTime: 3000,
  ttfb: 500,
  speedIndex: 3000,
  fullyLoaded: 5000,
  requests: 80,
  bytesIn: 3000000
};

let failed = false;
Object.keys(thresholds).forEach(key => {
  if (metrics[key] > thresholds[key]) {
    console.error(`FAIL: ${key} = ${metrics[key]}ms, threshold = ${thresholds[key]}ms`);
    failed = true;
  } else {
    console.log(`PASS: ${key} = ${metrics[key]}ms, threshold = ${thresholds[key]}ms`);
  }
});

if (failed) process.exit(1);

merge_requests:
  when: pipeline_succeeds
  only:
    - protected_branches

performance-comment:
  stage: performance
  image: alpine:latest
  before_script:
    - apk add --no-cache curl jq
  script:
    - |
      SCORE=$(cat lighthouse-report.json | jq '.categories.performance.score * 100')
      if [ "$SCORE" -lt "$LIGHTHOUSE_THRESHOLD_PERFORMANCE" ]; then
        curl -X POST \
          -H "PRIVATE-TOKEN: $CI_JOB_TOKEN" \
          -H "Content-Type: application/json" \
          -d "{
            \"body\": \"⚠️ **性能告警**\n\nLighthouse性能评分：**$SCORE**（阈值：$LIGHTHOUSE_THRESHOLD_PERFORMANCE）\n\n### 优化建议\n1. 压缩图片：使用WebP格式\n2. 延迟加载：非关键资源加loading='lazy'\n3. 减少HTTP请求：合并CSS/JS文件\n4. 启用CDN：静态资源走CDN\n5. 服务端渲染：首屏内容SSR\n\n[查看完整报告]($CI_PIPELINE_URL)\"
          }" \
          "https://gitlab.com/api/v4/projects/$CI_PROJECT_ID/merge_requests/$CI_MERGE_REQUEST_IID/notes"
      fi
  rules:
    - if: $CI_MERGE_REQUEST_IID

performance-test:
  tags:
    - performance-runner
  variables:
    FF_USE_FASTZIP: "true"
  script:
    - lhci autorun --config=./lighthouserc.js --no-lighthouserc

// wpt-script.js
(function() {
  // 拦截第三方请求
  const blockedDomains = [
    'google-analytics.com',
    'facebook.net',
    'hotjar.com'
  ];
  
  const originalFetch = window.fetch;
  window.fetch = function(url, options) {
    if (blockedDomains.some(domain => url.includes(domain))) {
      return Promise.reject(new Error('Blocked'));
    }
    return originalFetch.apply(this, arguments);
  };
})();

variables:
  MAIN_THRESHOLD: 90
  DEVELOP_THRESHOLD: 80
  FEATURE_THRESHOLD: 70

performance-test:
  script:
    - |
      if [ "$CI_COMMIT_BRANCH" == "main" ]; then
        THRESHOLD=$MAIN_THRESHOLD
      elif [ "$CI_COMMIT_BRANCH" == "develop" ]; then
        THRESHOLD=$DEVELOP_THRESHOLD
      else
        THRESHOLD=$FEATURE_THRESHOLD
      fi
    - lhci autorun --config=./lighthouserc.js --assert.minScore=$THRESHOLD

performance-test:
  parallel:
    matrix:
      - URL: ["https://example.com", "https://example.com/about", "https://example.com/product"]
  script:
    - lhci autorun --url=$URL