Cypress系列（43）- wait() 指令詳解

如果想從頭學起Cypress，可以看下面的系列文章哦

作用

等待數毫秒或等待别名資源解析，然後再繼續執行下一個指令

文法格式

cy.wait(time)
cy.wait(alias)
cy.wait(aliases)
cy.wait(time, options)
cy.wait(alias, options)
cy.wait(aliases, options)      

參數講解

正确格式

cy.wait(500)
cy.wait('@getProfile')      

wait() 指令傳回的對象

當傳了 time 時

cy.wait() 産生與上一個指令相同的主題

當傳了 alias 時

cy.wait() 産生一個對象，其中包含 XHR 的 HTTP 請求和響應屬性

等待一個别名的栗子

it.skip('栗子1', function () {
    cy.server()
    cy.route({
        url: '**/login',
        status: 503,
        response: {
            success: false,
            data: 'Not success'
        },
    }).as("login")
    cy.get("input[name=username]").type(username)
    cy.get("input[name=password]").type(`${password}{enter}`)

    // 等待請求的響應
    cy.wait('@login').then((res) => {
        // 針對響應進行斷言
        expect(res.status).to.eq(503)
        expect(res.responseBody.data).to.eq('Not success')
        expect(res.responseHeaders).to.have.property('x-token', 'abc-123-foo-bar')
    })
});      

等待别名數組的栗子

cy.server()
cy.route('users/*').as('getUsers')
cy.route('activities/*').as('getActivities')
cy.route('comments/*').as('getComments')
cy.visit('/dashboard')

cy.wait(['@getUsers', '@getActivities', '@getComments']).then((xhrs) => {
  // xhrs現在将是比對的XHR的數組
  // xhrs[0] <-- getUsers 的響應
  // xhrs[1] <-- getActivities 的響應
  // xhrs[2] <-- getComments 的響應
})