Skip to main content
Cypress应用

window

获取当前活动页面的 window 对象。

语法​

cy.window()
cy.window(options)

用法​

正确用法

cy.window()

参数​

options (Object)

传入一个选项对象来改变 cy.window() 的默认行为。

选项默认值描述
logtrue在命令日志中显示该命令
timeoutdefaultCommandTimeout在超时前等待 cy.window() 解析的时间

生成结果 了解主题管理​

  • cy.window() 返回 window 对象。
  • cy.window() 是一个查询命令，可以安全地链式调用其他命令。

示例​

无参数​

返回远程 window 对象​

cy.visit('http://localhost:8080/app')
cy.window().then((win) => {
  // win 是远程 window 对象
})

检查自定义属性​

如果应用设置了一个自定义属性，例如：

window.tags = {
  foo: 'bar',
}

我们的测试可以确认该属性是否正确设置。

cy.window().its('tags.foo').should('equal', 'bar')

注意： Cypress 命令是异步的，因此不能在 Cypress 命令运行前检查属性值。

it('equals bar', () => {
  let foo

  cy.window().then((win) => {
    foo = win.tags.foo
  })

  // 变量 "foo" 仍然是 undefined
  // 因为上面的 "then" 回调
  // 还未执行
  expect(foo).to.equal('bar') // 测试失败
})

应使用 cy.then() 回调来检查值。

it('equals bar', () => {
  let foo

  cy.window()
    .then((win) => {
      foo = win.tags.foo
    })
    .then(() => {
      // 变量 "foo" 已被设置
      expect(foo).to.equal('bar') // 测试通过
    })
})

应用就绪时开始测试​

如果应用启动需要时间，可以通过设置一个属性来"通知"Cypress 它已就绪。

// app.js
// 仅在 Cypress 运行测试时设置属性 "appReady"
if (window.Cypress) {
  window.appReady = true
}

Cypress 可以在每次测试前等待 window.appReady 变为 true

// spec.cy.js
beforeEach(() => {
  cy.visit('/')
  cy.window().should('have.property', 'appReady', true)
})
info
测试何时可以开始？

这篇博客文章 解释了如何使用 cy.window() 监听 DOM prototype 来检测应用何时开始向 DOM 元素添加事件监听器。当第一次发生这种情况时，Cypress 知道被测应用已启动，测试可以开始。

选项​

将超时传递给 .should() 断言​

cy.window({ timeout: 10000 }).should('have.property', 'foo')

注意事项​

Cypress 使用 2 个不同的 window。​

假设你想检查事件的类型，可能会编写如下代码：

it('test', (done) => {
  cy.get('#test-input').then((jQueryElement) => {
    let elemHtml = jQueryElement.get(0)

    elemHtml.addEventListener('keydown', (event) => {
      expect(event instanceof KeyboardEvent).to.be.true
      done()
    })
  })

  cy.get('#test-input').type('A')
})

这会失败。但有趣的是，当你 console.log(event) 时，event 的类型是 KeyboardEvent。

这是因为 Cypress 使用 iframe 来加载被测应用。换句话说，上面代码中使用的 KeyboardEvent 和构造 event 变量的 KeyboardEvent 类是不同的 KeyboardEvent。

因此，测试应这样编写：

it('should trigger KeyboardEvent with .type inside Cypress event listener', (done) => {
  cy.window().then((win) => {
    cy.get('#test-input').then((jQueryElement) => {
      let elemHtml = jQueryElement.get(0)

      elemHtml.addEventListener('keydown', (event) => {
        expect(event instanceof win['KeyboardEvent']).to.be.true
        done()
      })
    })
  })

  cy.get('#test-input').type('A')
})

规则​

要求 了解命令链​

  • cy.window() 需要链式调用 cy。

断言 了解断言​

  • cy.window() 会自动重试，直到所有链式断言通过。

超时设置 了解超时机制​

  • cy.window() 可能会因等待添加的断言通过而超时。

命令日志​

获取 window

cy.window()

上述命令将在命令日志中显示为：

命令日志窗口

点击命令日志中的 window 时，控制台会输出以下内容：

控制台日志窗口

历史​

版本变更
0.20.0可以在 cy.window() 上调用 .focus() 和 .blur()
0.11.6cy.window() 会记录到命令日志

另请参阅​

目录