javascript - 如何创建函数以避免重复步骤？

Question

我想创建一个函数来避免赛普拉斯上的代码重复。

任务：

我需要使用不同类型的用户（具有不同权限）登录，并想检查哪种类型的用户在所需路径上收到“403 Forbidden”错误。由于我有 6 种类型的用户和 11 条不同的路径，因此下面的代码会针对每个用户/路径重复，我对此并不满意。

        cy.visit('/abc')

          .get('[data-qa="http-error.section"]')
          .should('exist')
          .contains('403')
          .visit('/def')
          .get('[data-qa="http-error.section"]')
          .should('exist')
          .contains('403')

          .get('[data-qa="logout"]')
          .click()

如何创建一个函数，例如 check403()，并在其中实现一组控件？这样代码将如下所示：

          cy.visit('/abc')
            .check403()
            .visit('/def')
            .check403()
            .get('[data-qa="logout"]')
            .click()

如果我可以创建这样的东西，我将能够删除大量重复的代码。

我尝试了什么：

• 我试图创建一个赛普拉斯自定义命令，但它没有用。
• 我试图创建一个函数并将其移到实际案例之外并像这样调用它，cy.check403()但后来我cy.check403() is not a function在 Cypress 上遇到错误。

更新

我已经users.json在 Fixtures 文件夹下定义了所有用户。我分别与每个用户登录并完成其余的工作。我的代码放在afterlogin.spec.js.

这是完整的代码，但完成这样一个基本任务太长了。也许它有帮助：

it('Unauthorized users are redirected to a 403 page', () => {
cy.fixture('users.json').then(users => {
  cy.login(
    users[Cypress.env('ENVIRONMENT')].driver,
    Cypress.env('DEFAULT_USER_PASSWORD')
  ).then(response => {
    cy.setCookie('__bl_pp__', response.body.result.access_token)
      .visit('/me')
      .get('[data-qa="roles"]')
      .contains('driver')
      .visit('/offers')
      .get('[data-qa="http-error.section"]')
      .should('exist')
      .contains('403')
      .get('[data-qa="back-to-homepage"]')
      .should('exist')
      .visit('/drivers')
      .get('[data-qa="http-error.section"]')
      .should('exist')
      .contains('403')
      .get('[data-qa="logout"]')
      .click()

    cy.login(
      users[Cypress.env('ENVIRONMENT')].dispatcher,
      Cypress.env('DEFAULT_USER_PASSWORD')
    ).then(response => {
      cy.setCookie('__bl_pp__', response.body.result.access_token)
        .visit('/me')
        .get('[data-qa="roles"]')
        .contains('dispatcher')
        .visit('/offers')
        .get('[data-qa="http-error.section"]')
        .should('exist')
        .contains('403')
        .get('[data-qa="logout"]')
        .click()

      cy.login(
        users[Cypress.env('ENVIRONMENT')].provider,
        Cypress.env('DEFAULT_USER_PASSWORD')
      ).then(response => {
        cy.setCookie('__bl_pp__', response.body.result.access_token)
          .visit('/me')
          .get('[data-qa="roles"]')
          .contains('provider')
          .visit('/planned')
          .get('[data-qa="http-error.section"]')
          .should('exist')
          .contains('403')
          .visit('/finished')
          .get('[data-qa="http-error.section"]')
          .should('exist')
          .contains('403')
          .get('[data-qa="logout"]')
          .click()

        cy.login(
          users[Cypress.env('ENVIRONMENT')].reviewer,
          Cypress.env('DEFAULT_USER_PASSWORD')
        ).then(response => {
          cy.setCookie('__bl_pp__', response.body.result.access_token)
            .visit('/me')
            .get('[data-qa="roles"]')
            .contains('reviewer')
            .visit('/offers')
            .get('[data-qa="http-error.section"]')
            .should('exist')
            .contains('403')
            .visit('/planned')
            .get('[data-qa="http-error.section"]')
            .should('exist')
            .contains('403')
            .get('[data-qa="logout"]')
            .click()

          cy.login(
            users[Cypress.env('ENVIRONMENT')].admin,
            Cypress.env('DEFAULT_USER_PASSWORD')
          ).then(response => {
            cy.setCookie('__bl_pp__', response.body.result.access_token)
              .visit('/me')
              .get('[data-qa="roles"]')
              .contains('admin')
              .visit('/offers')
              .get('[data-qa="http-error.section"]')
              .should('exist')
              .contains('403')
              .visit('/planned')
              .get('[data-qa="http-error.section"]')
              .should('exist')
              .contains('403')
              .visit('/finished')
              .get('[data-qa="http-error.section"]')
              .should('exist')
              .contains('403')
              .get('[data-qa="logout"]')
              .click()
          })
        })
      })
    })
  })
})

标签： javascriptmocha.jscypress

Answer 1

您可以使用自定义命令来实现此目的。您说您尝试了一个但没有用，但是我在测试中成功地做了类似的事情。

Cypress.Commands.add("check403", () => {
  cy.get('[data-qa="http-error.section"]')
    .should('exist')
    .should('contain', '403'); // I changed this - you didn't mention that it
      // didn't work, but it would have been returning an element, not asserting
});