在Playwright的iframe中运行TypeScript函数遇evaluate报错求助

第一个错误：Property 'evaluate' does not exist on type 'FrameLocator' #

问题出在TypeScript的类型推断上：contentFrame()返回的是Frame | null，仅用expect断言不会改变类型推断结果，导致编辑器认为iframe可能是FrameLocator或null，而只有Frame类型具备evaluate方法。

解决方法：
先通过if判断做非空校验，让TypeScript明确iframe是有效的Frame实例：

const iframeElement = page.locator('#bucketFrame');
const iframe = await iframeElement.contentFrame();
if (!iframe) {
  throw new Error('无法获取iframe内容');
}

// 此时可正常调用iframe.evaluate
const pixelPosition = await iframe.evaluate((_, coords) => {
  const viewer = window['viewer']; 
  const cartesian = Cesium.Cartesian3.fromDegrees(coords.longitude, coords.latitude);
  const scene = viewer.scene;
  const windowPosition = scene.camera.worldToScreen(cartesian);

  if (windowPosition) {
    return { x: windowPosition.x, y: windowPosition.y };
  }
  return null;
}, { longitude, latitude });

注：Frame的evaluate回调第一个参数是iframe的window对象，这里用_占位，第二个参数才是你传入的坐标数据。

第二个错误：Property 'longitude' does not exist on type 'SVGElement | HTMLElement' #

问题根源：调用locator('canvas').evaluate时，回调的第一个参数是定位到的canvas DOM元素，你错误地尝试从元素上解构longitude和latitude，自然会触发类型错误。

解决方法：
如果确实需要通过canvas元素执行代码（其实这里没必要，因为要访问的是全局的window.viewer），需把传入的数据放在回调的第二个参数位置：

const pixelPosition = await iframe.locator('canvas').evaluate((_, coords) => {
  const viewer = window['viewer']; 
  const cartesian = Cesium.Cartesian3.fromDegrees(coords.longitude, coords.latitude);
  const scene = viewer.scene;
  const windowPosition = scene.camera.worldToScreen(cartesian);

  if (windowPosition) {
    return { x: windowPosition.x, y: windowPosition.y };
  }
  return null;
}, { longitude, latitude });

总结 #

优先用第一种方案：直接通过Frame的evaluate执行代码，因为你要操作的是iframe全局的window.viewer，不需要依赖DOM元素。只要确保iframe非空，就能正常调用方法并传递参数。

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