Playwright如何获取Chart.js图表数据并验证数据渲染正确性？

1. 直接读取Chart.js实例的原始数据 #

Chart.js的getChart('id')必须在页面上下文内执行才能拿到完整实例。你可以通过Playwright的page.evaluate()方法访问页面中的Chart对象，直接提取核心数据和预期值对比：

// Playwright测试代码
const chartData = await page.evaluate(() => {
  const chart = Chart.getChart('your-chart-id');
  if (!chart) return null;
  // 返回需要验证的关键数据
  return {
    labels: chart.data.labels,
    datasets: chart.data.datasets.map(ds => ({
      label: ds.label,
      data: ds.data
    }))
  };
});

// 断言数据匹配预期
expect(chartData.labels).toEqual(['一月', '二月', '三月']);
expect(chartData.datasets[0].data).toEqual([15, 28, 36]);

2. 验证数据点的视觉位置与提示框内容 #

如果要确认数据实际渲染的视觉表现，可以通过以下两种方式：

• 触发hover读取tooltip内容：

// 获取第一个数据点的坐标
const firstPoint = await page.evaluate(() => {
  const chart = Chart.getChart('your-chart-id');
  const point = chart.getDatasetMeta(0).data[0];
  return { x: point.x, y: point.y };
});

// 模拟鼠标hover到数据点
await page.mouse.move(firstPoint.x, firstPoint.y);

// 读取tooltip文本并断言
const tooltipText = await page.locator('.chartjs-tooltip').textContent();
expect(tooltipText).toContain('一月: 15');

• 验证数据点坐标：根据图表尺寸、坐标轴范围计算数据点应处的位置，再和point.x/point.y对比，确认渲染位置正确。

3. 全局暴露图表数据（简化测试） #

如果页面中直接访问Chart实例有阻碍，可以在应用代码里把核心数据挂载到全局对象，方便测试直接读取：

// 应用初始化图表后添加
const chart = new Chart('your-chart-id', chartConfig);
window.chartTestData = {
  labels: chart.data.labels,
  datasetValues: chart.data.datasets[0].data
};

// Playwright测试中直接读取
const testData = await page.evaluate(() => window.chartTestData);
expect(testData.datasetValues).toEqual([15,28,36]);

4. 数据断言+视觉快照（双重验证） #

如果需要兼顾数据准确性和视觉渲染效果，可以结合数据断言与Playwright的视觉快照：

// 先验证数据正确性
const chartData = await page.evaluate(() => Chart.getChart('your-chart-id').data);
expect(chartData.datasets[0].data).toEqual([15,28,36]);

// 再验证整体视觉渲染
await expect(page.locator('#your-chart-id')).toHaveScreenshot();

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