如何在Cypress中结合cy.origin使用页面对象/应用操作？

问题核心 #

你遇到的页面对象实例undefined问题，本质是cy.origin的回调函数运行在跨域页面的独立沙箱上下文里，外部定义的变量（比如测试文件顶部创建的fpo、spo）无法穿透这个沙箱，所以访问不到。

而未用cy.origin时before块重复执行，是因为Cypress切换不同域URL时会重置测试上下文，导致before钩子重复触发，cy.origin就是用来保持跨域测试的上下文连贯性。

解决步骤 #

1. 在cy.origin回调内初始化页面对象

把页面对象的导入和实例化放到cy.origin的回调函数里，确保在跨域页面的上下文里正常访问。

2. 调整before块逻辑

将仅需执行一次的前置操作放在顶级before块中，结合cy.origin处理跨域场景。

修改后的完整代码示例 #

import { firstPageObjects } from '../some/file.po'

describe('测试内容描述', () => {
  before(() => {
    // 仅执行一次的前置操作，比如主域登录
    cy.visit('main-domain-url')
    // 这里添加登录等前置逻辑...
  })

  it('测试场景一（同域）', () => {
    cy.visit('firsturl')
    const fpo = new firstPageObjects()
    fpo.this.click()
    fpo.that.type('foo')
  })

  it('测试场景二（跨域）', () => {
    cy.origin('secondurl-domain', () => {
      // 在跨域上下文内导入并实例化页面对象
      import { secondPageObjects } from '../other/file.po'
      const spo = new secondPageObjects()

      cy.visit('secondurl') // 可写完整URL或域名相对路径
      spo.this.click(7)
      spo.that.type('bar')
    })
  })
})

关键注意事项 #

• 上下文隔离：cy.origin的回调是独立环境，外部变量、Cypress状态无法直接共享，如需传递数据，可用第二个参数传递：

  cy.origin('secondurl-domain', { args: { inputText: 'bar' } }, ({ inputText }) => {
    import { secondPageObjects } from '../other/file.po'
    const spo = new secondPageObjects()
    cy.visit('secondurl')
    spo.that.type(inputText)
  })
  

• 导入路径：回调内的import路径规则和外部一致，需相对于当前测试文件位置。
• 复用实例：若多个测试用例针对同一跨域页面，可把页面对象实例化封装成函数，在回调内调用。

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