# 克隆仓库
git clone https://github.com/WPO-Foundation/webpagetest.git
cd webpagetest
 
# 使用 Docker Compose 启动
docker-compose up -d
 
# 访问 http://localhost:8888

# 官方 Node.js 客户端
npm install webpagetest
 
# 或使用 REST API 直接调用

# 提交测试
curl "https://www.webpagetest.org/runtest.php?url=https://example.com&f=json&k=YOUR_API_KEY"
 
# 获取测试结果
curl "https://www.webpagetest.org/jsonResult.php?test=TEST_ID&k=YOUR_API_KEY"
 
# 获取测试页面
curl "https://www.webpagetest.org/results.php?test=TEST_ID"

import WebPageTest from 'webpagetest';
 
const wpt = new WebPageTest('www.webpagetest.org', 'YOUR_API_KEY');
 
// 基础测试
wpt.runTest('https://example.com', {
  location: 'Dulles:Chrome',
  connectivity: 'Cable',
  runs: 3,
  video: true,
}, (err, data) => {
  if (err) {
    console.error('Test failed:', err);
    return;
  }
 
  console.log('Test ID:', data.data.testId);
  console.log('Results URL:', data.data.summaryURL);
 
  // 获取详细结果
  wpt.getTestResults(data.data.testId, (err, results) => {
    if (err) {
      console.error('Failed to get results:', err);
      return;
    }
 
    const run = results.data.runs[1]; // 第一次运行
    console.log('First View:');
    console.log('  Load Time:', run.firstView.loadTime, 'ms');
    console.log('  Speed Index:', run.firstView.SpeedIndex);
    console.log('  TTFB:', run.firstView.TTFB, 'ms');
    console.log('  LCP:', run.firstView['lastViewedCell']?.largestContentfulPaint);
 
    if (run.repeatView) {
      console.log('Repeat View:');
      console.log('  Load Time:', run.repeatView.loadTime, 'ms');
      console.log('  Speed Index:', run.repeatView.SpeedIndex);
    }
  });
});

// 自定义脚本测试（模拟登录等操作）
const script = `
  navigate  https://example.com/login
  setValue  name=username testuser
  setValue  name=password testpass
  submitForm  name=loginForm
  waitForComplete
  navigate  https://example.com/dashboard
`;
 
wpt.runTest(script, {
  location: 'Dulles:Chrome',
  connectivity: 'Cable',
  runs: 3,
  video: true,
  chromeOptions: {
    mobile: {
      deviceScreen: { width: 375, height: 667 },
      emulatedDevice: 'iPhone 6/7/8',
    },
  },
}, callback);

# GitHub Actions 集成
name: WebPageTest CI
on: [pull_request]
 
jobs:
  wpt-test:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v4
 
      - name: Install WebPageTest CLI
        run: npm install -g webpagetest
 
      - name: Run Performance Test
        env:
          WPT_API_KEY: ${{ secrets.WPT_API_KEY }}
        run: |
          RESULT=$(wpt https://example.com \
            --key $WPT_API_KEY \
            --server www.webpagetest.org \
            --location Dulles:Chrome \
            --connectivity Cable \
            --runs 3 \
            --json)
 
          SCORE=$(echo $RESULT | jq '.data.median.firstView.SpeedIndex')
          echo "Speed Index: $SCORE"
 
          if [ "$SCORE" -gt 3000 ]; then
            echo "::warning::Performance regression detected"
          fi

// 封装 WPT API 调用
class WPTClient {
  constructor(server = 'www.webpagetest.org', apiKey = '') {
    this.server = server;
    this.apiKey = apiKey;
    this.baseUrl = `https://${server}`;
  }
 
  async runTest(url, options = {}) {
    const params = new URLSearchParams({
      url,
      f: 'json',
      k: this.apiKey,
      location: options.location || 'Dulles:Chrome',
      connectivity: options.connectivity || 'Cable',
      runs: options.runs || 3,
      video: options.video ? 1 : 0,
      ...options,
    });
 
    // 提交测试
    const submitRes = await fetch(`${this.baseUrl}/runtest.php?${params}`);
    const submitData = await submitRes.json();
 
    if (submitData.statusCode !== 100) {
      throw new Error(`WPT submit failed: ${submitData.statusText}`);
    }
 
    const testId = submitData.data.testId;
 
    // 轮询等待结果
    return this.waitForResults(testId);
  }
 
  async waitForResults(testId, maxWait = 300000) {
    const startTime = Date.now();
 
    while (Date.now() - startTime < maxWait) {
      await this.delay(10000); // 每 10 秒轮询
 
      const res = await fetch(
        `${this.baseUrl}/jsonResult.php?test=${testId}&k=${this.apiKey}`
      );
      const data = await res.json();
 
      if (data.statusCode === 200) {
        return data.data;
      } else if (data.statusCode >= 400) {
        throw new Error(`WPT test failed: ${data.statusText}`);
      }
    }
 
    throw new Error('WPT test timed out');
  }
 
  delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
  }
}

// 定义性能预算
const budgets = {
  speedIndex: { firstView: 3000, repeatView: 1500 },
  ttfb: { firstView: 800 },
  lcp: { firstView: 2500 },
  cls: { firstView: 0.1 },
  requests: { firstView: 50 },
  bytesIn: { firstView: 3000000 }, // 3MB
};
 
function checkBudgets(results) {
  const fv = results.median.firstView;
  const violations = [];
 
  for (const [metric, budget] of Object.entries(budgets)) {
    const value = fv[metric] || fv[metric + 'Ms'];
    const threshold = budget.firstView || budget;
 
    if (value && value > threshold) {
      violations.push(`${metric}: ${value} > ${threshold}`);
    }
  }
 
  return {
    passed: violations.length === 0,
    violations,
    summary: results,
  };
}