如何确保在Playwright截图前图片已渲染到Konva React画布？

针对你遇到的Playwright截图时Konva画布图片未加载完成的问题，这里有几个可靠的解决方案，无需依赖硬等待：

方案1：利用useImage的加载状态暴露DOM标记 #

react-konva的useImage钩子会返回加载状态（第二个返回值），我们可以把这个状态同步到DOM属性上，让Playwright能精准等待图片加载完成：

修改你的Figure组件：

import { useImage } from 'react-konva';
import { Group, Image } from 'react-konva';

const Figure: React.FC<FigureProps> = ({ url, x, y }) => {
  // 解构出加载状态status
  const [image, status] = useImage(url);

  return (
    // 给外层Group添加data属性标记加载状态
    <Group data-image-ready={status === 'loaded'}>
      <Image x={x} y={y} image={image} />
    </Group>
  );
};

export default Figure;

在Playwright测试中，等待这个属性变为true后再截图：

// 等待图片加载完成的标记出现
await page.waitForSelector('[data-image-ready="true"]');
// 执行截图
await page.locator('canvas').screenshot({ path: 'canvas-screenshot.png' });

方案2：监听Konva Image的load事件 #

Konva的Image组件会在图片绘制完成后触发onLoad事件，我们可以通过这个事件设置状态并同步到DOM：

修改组件：

import { useImage } from 'react-konva';
import { Group, Image } from 'react-konva';
import { useState } from 'react';

const Figure: React.FC<FigureProps> = ({ url, x, y }) => {
  const [image] = useImage(url);
  const [isImageDrawn, setIsImageDrawn] = useState(false);

  return (
    <Group data-image-drawn={isImageDrawn}>
      <Image 
        x={x} 
        y={y} 
        image={image} 
        // 图片绘制完成后更新状态
        onLoad={() => setIsImageDrawn(true)}
      />
    </Group>
  );
};

export default Figure;

Playwright测试代码和方案1类似，等待[data-image-drawn="true"]即可。

方案3：等待Konva舞台的绘制完成事件（全局场景） #

如果你的画布上有多个图片，也可以监听整个Konva舞台的draw事件，当所有元素绘制完成后标记状态：

在根组件中添加状态：

import { Stage } from 'react-konva';
import { useState } from 'react';

const CanvasStage = () => {
  const [isStageReady, setIsStageReady] = useState(false);

  return (
    <Stage 
      width={800} 
      height={600}
      onDraw={() => {
        // 舞台绘制完成后标记状态
        setIsStageReady(true);
      }}
      data-stage-ready={isStageReady}
    >
      {/* 你的图层和组件 */}
    </Stage>
  );
};

测试中等待[data-stage-ready="true"]再截图。

这些方案都是通过组件暴露加载/绘制完成的状态，让Playwright能精准等待，完全避免了硬等待的不可靠性。

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