synthetics-node-browser-runtime

镜像概述和主要用途

synthetics-node-browser-runtime 是一个集成了 Node.js 环境和浏览器运行时的 Docker 镜像，专为合成监控(Synthetic Monitoring)场景设计。该镜像提供了执行自动化浏览器测试和模拟用户交互的完整运行环境，可用于监控 Web 应用性能、验证前端功能完整性以及执行定时自动化测试任务。

核心功能和特性

• 完整运行环境：预配置 Node.js 环境与浏览器运行时，无需额外安装依赖
• 多浏览器支持：内置主流浏览器引擎，支持模拟不同浏览器环境
• 自动化API：集成常用自动化测试库，支持可编程式浏览器控制
• 轻量级设计：优化的镜像大小，适合快速部署和扩展
• 无头模式支持：可在无图形界面环境下运行浏览器测试
• 性能指标收集：内置性能数据采集功能，支持页面加载时间、资源性能等指标监控

使用场景和适用范围

• Web应用合成监控：定时模拟用户访问，监控应用可用性和响应时间
• 前端性能测试：测量和分析页面加载性能、资源加载效率
• 跨浏览器兼容性测试：验证Web应用在不同浏览器环境下的表现
• 自动化UI测试：执行端到端(E2E)测试，验证用户交互流程
• API监控：结合浏览器环境测试前端与后端API的集成效果
• CI/CD集成：作为持续集成流程的一部分，在部署前执行前端自动化测试

使用方法和配置说明

基本使用

bash
docker run --rm synthetics-node-browser-runtime [测试脚本路径]

挂载测试脚本

bash
docker run --rm -v $(pwd)/tests:/app/tests synthetics-node-browser-runtime /app/tests/monitor.js

环境变量配置

示例: 带环境变量的运行命令

bash
docker run --rm \
  -e BROWSER_TYPE=firefox \
  -e HEADLESS_MODE=false \
  -e PAGE_LOAD_TIMEOUT=60000 \
  -v $(pwd)/tests:/app/tests \
  synthetics-node-browser-runtime /app/tests/performance-test.js

Docker Compose 配置

yaml
version: '3.8'
services:
  synthetics-monitor:
    image: synthetics-node-browser-runtime
    environment:
      - BROWSER_TYPE=chrome
      - HEADLESS_MODE=true
      - PERFORMANCE_LOGGING=true
    volumes:
      - ./synthetic-tests:/app/tests
      - ./results:/app/results
    command: /app/tests/ecommerce-checkout.js
    restart: unless-stopped

自定义测试脚本示例

javascript
// simple-monitor.js
const { browser } = require('synthetics-runtime');

async function runTest() {
  // 启动浏览器
  const page = await browser.newPage();
  
  try {
    // 设置视口大小
    await page.setViewport({ width: 1280, height: 720 });
    
    // 访问目标页面
    await page.goto('[***] { waitUntil: 'networkidle0' });
    
    // 记录页面加载时间
    const loadTime = await page.evaluate(() => {
      return performance.timing.loadEventEnd - performance.timing.navigationStart;
    });
    
    console.log(`页面加载时间: ${loadTime}ms`);
    
    // 截图
    await page.screenshot({ path: '/app/results/screenshot.png' });
    
    // 简单交互示例
    await page.click('a[href="/about"]');
    await page.waitForNavigation({ waitUntil: 'networkidle0' });
    
  } finally {
    // 关闭浏览器
    await browser.close();
  }
}

// 执行测试
runTest().catch(console.error);

高级配置

性能监控模式

启用详细性能监控:

bash
docker run --rm \
  -e PERFORMANCE_LOGGING=true \
  -e OUTPUT_PERFORMANCE_DATA=/app/results/performance.json \
  -v $(pwd)/results:/app/results \
  synthetics-node-browser-runtime /app/tests/performance-monitor.js

定时任务配置

结合 cron 实现定时监控:

bash
docker run --name synthetics-cron \
  -v $(pwd)/tests:/app/tests \
  -v $(pwd)/cron:/etc/cron.d \
  synthetics-node-browser-runtime \
  cron -f /etc/cron.d/monitor-cron

其中 monitor-cron 文件内容:

*/5 * * * * root /usr/local/bin/node /app/tests/monitor.js >> /var/log/synthetics.log 2>&1

部署方案示例

Docker Compose 完整配置

yaml
version: '3.8'

services:
  synthetics-monitor:
    image: synthetics-node-browser-runtime
    container_name: web-synthetics-monitor
    restart: always
    environment:
      - BROWSER_TYPE=chrome
      - HEADLESS_MODE=true
      - PAGE_LOAD_TIMEOUT=45000
      - TARGET_URL=[***]
    volumes:
      - ./tests:/app/tests
      - ./results:/app/results
      - ./logs:/var/log/synthetics
    command: /app/tests/main-monitor.js
    networks:
      - monitoring-network

networks:
  monitoring-network:
    driver: bridge

Kubernetes 部署

yaml
apiVersion: batch/v1beta1
kind: CronJob
metadata:
  name: synthetics-monitor
spec:
  schedule: "*/10 * * * *"
  jobTemplate:
    spec:
      template:
        spec:
          containers:
          - name: synthetics-monitor
            image: synthetics-node-browser-runtime
            env:
            - name: BROWSER_TYPE
              value: "chrome"
            - name: HEADLESS_MODE
              value: "true"
            - name: TARGET_URL
              value: "[***]"
            volumeMounts:
            - name: test-scripts
              mountPath: /app/tests
            - name: results
              mountPath: /app/results
          volumes:
          - name: test-scripts
            configMap:
              name: synthetics-test-scripts
          - name: results
            persistentVolumeClaim:
              claimName: synthetics-results
          restartPolicy: OnFailure