Cypress 简明教程

Cypress - Aliases

Cypress 别名是一个重要的组件，有多种用途。这些用途如下所列 −

Cypress aliases are an important component that have multiple uses. These uses are listed below −

Sharing Context

我们必须使用 .as() 来标记我们必须共享的内容。要标记对象和基元，Mocha 上下文对象被使用。可以用 this.* 访问别名对象。

We have to use .as() to alias something that we have to share. To alias objects and primitives, Mocha context objects are used. The alias object can be accessed with this.*.

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

Mocha by default, shares context for all the hooks applicable for the test and the alias properties are flushed post the execution of a test.

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.*）来访问别名。这是一个同步命令。

We can handle fixtures by sharing context. We can also use cy.get(), which is an asynchronous command, to access an alias with the help of @ symbol (instead of using this.*) This is a synchronous command.

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)
   })
})

Elements

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

Alias can be used with Document Object Model (DOM) elements and later be reused. Here in the below example, by default Cypress makes a reference to td collection obtained as the alias cols. To use the same cols, we have to use cy.get() command.

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

因为我们在 cy.get() 中使用了 @，所以 Cypress 搜索当前的别名 (cols) 并生成它的引用。

As we used @ in cy.get(), Cypress searches for the present alias (cols) and yields its reference.

Routes

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

Aliases can be utilised with routes. It makes sure that the application has made the requests. Then, it awaits a response from the server and accesses the request for verification.

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')

Requests

别名可以与请求一起使用。我们可以标记一个请求并稍后使用它的属性。这可以按如下方式完成 −

Aliases can be utilised with requests. We can alias a request and later use its properties.This can be done as follows −

cy.request('https://jsonplaceholder.cypress.io/comments').as('c')
// other implementations if any
cy.get('@c').should((response) => {
   if (response.status === 404) {
      // assertion
         expect(response).to.have.property('duration')
      } else {
         // do something else
      }
   })
})