Cypress中如何对voyage-ol-map元素调用centerOn实现地图居中

错误原因 #

你之前的写法报错的核心原因是：cy.get('voyage-ol-map') 返回的是jQuery包装的元素集合对象，而centerOn是挂载在原生<voyage-ol-map>自定义元素实例上的方法，jQuery对象本身不存在这个方法，因此cy.invoke()直接调用会提示属性不存在。

正确写法 #

方案1：通过then获取原生元素后调用 #

这是最直观的写法，拿到jQuery对象后取下标为0的原生DOM元素，再调用目标方法：

cy.get('voyage-ol-map')
  .then($mapEl => {
    // 取原生自定义元素实例，等价于Devtools中选中元素后的$0
    const nativeMapElement = $mapEl[0]
    // 执行居中方法
    nativeMapElement.centerOn([0, 0], true)
  })

方案2：链式invoke调用 #

如果要保持链式写法，可以先调用jQuery的get(0)方法拿到原生元素，再调用目标方法：

cy.get('voyage-ol-map')
  // 取jQuery集合中第一个原生DOM元素
  .invoke('get', 0)
  // 调用原生元素上的centerOn方法
  .invoke('centerOn', [0, 0], true)

兼容元素未完全初始化的场景 #

如果自定义元素是异步渲染挂载方法的，可添加断言等待方法存在后再执行，避免偶现报错：

cy.get('voyage-ol-map')
  .invoke('get', 0)
  // 等待centerOn方法挂载完成，超时时间可根据实际情况调整
  .should('have.property', 'centerOn')
  .invoke('call', null, [0, 0], true)

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