如何用Playwright在不同网络条件下开展Web Vitals的E2E性能检测

一、配置网络节流（以慢3G为例） #

Playwright支持通过setNetworkConditions方法模拟不同网络环境，慢3G的标准参数为下载3Mbps、上传1.5Mbps、延迟150ms，实际测试中建议乘以0.8的系数模拟真实网络损耗。

方式1：单测试用例内设置 #

import { test, expect } from '@playwright/test';

test('慢3G网络下的性能测试', async ({ page }) => {
  // 配置慢3G网络
  await page.context().setNetworkConditions({
    download: ((3 * 1024 * 1024) / 8) * 0.8, // 转换为字节/秒，约2.4Mbps
    upload: ((1.5 * 1024 * 1024) / 8) * 0.8, // 约1.2Mbps
    latency: 150, // 网络延迟150ms
  });

  await page.goto('https://你的目标页面.com');
  // 后续测试逻辑
});

方式2：全局配置（所有测试生效） #

在playwright.config.ts中设置默认网络条件：

import { defineConfig, devices } from '@playwright/test';

export default defineConfig({
  use: {
    ...devices['Desktop Chrome'],
    networkConditions: {
      download: ((3 * 1024 * 1024) / 8) * 0.8,
      upload: ((1.5 * 1024 * 1024) / 8) * 0.8,
      latency: 150,
    },
  },
});

二、检测FCP、TTI等Web Vitals分数 #

1. 获取First Contentful Paint (FCP) #

FCP属于浏览器paint类型的性能条目，可直接通过performance.getEntriesByType获取：

test('检测页面FCP指标', async ({ page }) => {
  await page.goto('https://你的目标页面.com', { waitUntil: 'load' });

  const fcp = await page.evaluate(() => {
    const paintEntries = performance.getEntriesByType('paint');
    const fcpEntry = paintEntries.find(entry => entry.name === 'first-contentful-paint');
    return fcpEntry ? fcpEntry.startTime : null;
  });

  console.log(`First Contentful Paint: ${fcp}ms`);
  // 断言FCP符合优秀标准（<2000ms）
  expect(fcp).toBeLessThan(2000);
});

2. 获取Time to Interactive (TTI) #

TTI计算逻辑复杂，推荐使用官方web-vitals库来捕获：

步骤1：安装web-vitals

npm install web-vitals --save-dev

步骤2：在测试中注入并监听TTI

test('检测页面TTI指标', async ({ page }) => {
  // 注入本地web-vitals库
  await page.addScriptTag({ path: './node_modules/web-vitals/dist/web-vitals.umd.js' });

  let ttiValue: number | null = null;

  // 暴露回调函数接收TTI值
  await page.exposeFunction('onTTI', (value: number) => {
    ttiValue = value;
  });

  // 初始化TTI监听
  await page.evaluate(() => {
    // @ts-ignore
    webVitals.onTTI(metric => onTTI(metric.value));
  });

  await page.goto('https://你的目标页面.com', { waitUntil: 'networkidle' });
  // 额外等待确保TTI指标完成计算
  await page.waitForTimeout(1000);

  console.log(`Time to Interactive: ${ttiValue}ms`);
  // 断言TTI符合优秀标准（<3800ms）
  expect(ttiValue).toBeLessThan(3800);
});

3. 结合网络节流的完整测试示例 #

import { test, expect } from '@playwright/test';

test('慢3G下检测Web Vitals', async ({ page }) => {
  // 配置慢3G网络
  await page.context().setNetworkConditions({
    download: ((3 * 1024 * 1024) / 8) * 0.8,
    upload: ((1.5 * 1024 * 1024) / 8) * 0.8,
    latency: 150,
  });

  // 注入web-vitals库
  await page.addScriptTag({ path: './node_modules/web-vitals/dist/web-vitals.umd.js' });

  let fcpValue: number | null = null;
  let ttiValue: number | null = null;

  // 暴露回调函数接收指标
  await page.exposeFunction('onFCP', (value: number) => fcpValue = value);
  await page.exposeFunction('onTTI', (value: number) => ttiValue = value);

  // 初始化指标监听
  await page.evaluate(() => {
    // @ts-ignore
    webVitals.onFCP(metric => onFCP(metric.value));
    // @ts-ignore
    webVitals.onTTI(metric => onTTI(metric.value));
  });

  // 访问页面并等待网络空闲
  await page.goto('https://你的目标页面.com', { waitUntil: 'networkidle' });
  await page.waitForTimeout(1000);

  // 输出结果并断言
  console.log(`FCP: ${fcpValue}ms | TTI: ${ttiValue}ms`);
  expect(fcpValue).toBeLessThan(2000);
  expect(ttiValue).toBeLessThan(3800);
});

内容的提问来源于stack exchange，提问作者KnightCrawler