在Cypress的cy.origin()中调用其他类方法报错，求解决方法

问题原因 #

cy.origin()的回调函数运行在独立的浏览器上下文中，当你传递已经实例化的对象ex时，Cypress会对其进行序列化（类似JSON.stringify），这个过程只会保留对象的属性值，而原型链上的方法（比如getFunctionA）会丢失，所以会出现TypeError: ex.getFunctionA is not a function的报错。

解决方案 #

方案1：在cy.origin()回调内部重新导入类并实例化 #

直接在回调里导入example1类，创建的实例属于当前上下文，方法可正常访问：

// example2.js
import example1 from '../example1.js'

class example2 {
  describe('测试用例', () => {
    it('测试跨origin调用类方法', () => {
      cy.origin('https://example.com/', () => {
        // 根据项目模块配置选择导入方式，这里以CommonJS为例
        const Example1 = require('../example1.js').default;
        const ex = new Example1();
        ex.getFunctionA();
      })
    })
  })
}

方案2：传递类的定义，在回调内实例化 #

把类本身作为参数传递，在回调中完成实例化，避免重复导入：

// example2.js
import example1 from '../example1.js'

class example2 {
  describe('测试用例', () => {
    it('测试跨origin调用类方法', () => {
      cy.origin('https://example.com/', { args: { Example1: example1 } }, ({ Example1 }) => {
        const ex = new Example1();
        ex.getFunctionA();
      })
    })
  })
}

方案3：提取方法为独立函数传递（适合无状态方法） #

如果getFunctionA不需要依赖实例状态，可将其提取为独立函数直接传递：

// example1.js
export function getFunctionA() {
  // 原方法逻辑
}

export class example1 {
  getFunctionA() {
    return getFunctionA();
  }
}

// example2.js
import { getFunctionA } from '../example1.js'

class example2 {
  describe('测试用例', () => {
    it('测试跨origin调用类方法', () => {
      cy.origin('https://example.com/', { args: { getFunctionA } }, ({ getFunctionA }) => {
        getFunctionA();
      })
    })
  })
}

注意事项 #

• 回调内的模块导入路径要确保正确，不同上下文可能影响路径解析；
• 若项目使用ES模块，可在回调中使用动态导入：

  cy.origin('https://example.com/', async () => {
    const { default: Example1 } = await import('../example1.js');
    const ex = new Example1();
    ex.getFunctionA();
  })
  

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