Cypress - 别名

Cypress 别名是具有多种用途的重要组件。这些用途列于下方 −

共享上下文

我们必须使用 .as() 来为我们必须共享的内容设置别名。要为对象和原语设置别名，请使用 Mocha 上下文对象。可以使用 this.* 访问别名对象。

默认情况下，Mocha 会为适用于测试的所有钩子共享上下文，并且别名属性会在测试执行后刷新。

describe('element', () => {
   beforeEach(() => {
      cy.wrap('eleone').as('x')
   })
   context('subelement', () => {
      beforeEach(() => {
         cy.wrap('eletwo').as('y')
      })
         it('aliases properties', function () {
            expect(this.x).to.eq(' eleone ')
            expect(this.y).to.eq(' eleone ')
         })
      })
   })
})

我们可以通过共享上下文来处理装置。我们还可以使用 cy.get()（这是一个异步命令）借助 @ 符号来访问别名（而不是使用 this.*）。这是一个同步命令。

beforeEach(() => {
   // alias fixtures
   cy.fixture('users.json').as('u')
})
it('scenario', function () {
   // '@' to handle aliases
   cy.get('@u').then((u) => {
      // access element argument
      const i = u[0]
      //verification
      cy.get('header').should('contain', u.name)
   })
})

元素

别名可以与文档对象模型 (DOM) 元素一起使用，以后可以重复使用。在下面的示例中，默认情况下，Cypress 引用作为别名 cols 获得的 td 集合。要使用相同的 cols，我们必须使用 cy.get() 命令。

// 别名 td in tr
cy.get('tr').find('td').as('cols')
cy.get('@cols').first().click()

正如我们在 cy.get() 中使用 @ 一样，Cypress 会搜索当前别名 (cols) 并产生其引用。

路由

别名可以与路由一起使用。它确保应用程序已发出请求。然后，它等待服务器的响应并访问请求以进行验证。

cy.intercept('POST', '/users', { id: 54 }).as('u')
cy.get('#btn').click()
cy.wait('@u').then(({ request }) =>{
//assertion
   expect(request.body).to.have.property('name', 'User')
})
cy.contains('User added')

请求

请求可以使用别名。我们可以为请求设置别名，然后使用其属性。这可以按如下方式完成−

cy.request('https://jsonplaceholder.cypress.io/comments').as('c')
// 如果有其他实现
cy.get('@c').should((response) => {
   if (response.status === 404) {
      // assertion
         expect(response).to.have.property('duration')
      } else {
         // do something else
      }
   })
})