如何创建一个函数来避免重复步骤？

Question

我想创建一个函数来避免 Cypress 上的代码重复。

任务：

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

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

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

我试过的：

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

更新

我已经在 fixtures 文件夹下 users.json 中定义了所有用户。我分别登录每个用户并完成剩下的工作。我的代码放在 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()
          })
        })
      })
    })
  })
})

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

Answer 2

不能 100% 确定用户和路径在所示代码中的位置，但您可以使用简单的 javascript 循环重复测试，例如

const users = ['Joe', 'Jim', 'John']
const paths = ['Add', 'Edit', 'Remove']

users.forEach(user => {
  paths.forEach(path => {

    it(`should test user '${user}' and path '${path}'`, => {
      // test code here
    })

  })
})

也许是这样，

const roles = ['driver', 'dispatcher', 'provider', 'reviewer', 'admin'];

context('Unauthorized users are redirected to a 403 page', () => {
  cy.fixture('users.json').then(users => {

    const user = users[Cypress.env('ENVIRONMENT')];
    roles.forEach(role => {

      it(`testing user '${user}' and role '${role}'`, () => {

        cy.login(user[role], Cypress.env('DEFAULT_USER_PASSWORD'))
          .then(response => {
            cy.setCookie('__bl_pp__', response.body.result.access_token);
            cy.visit('/me').get('[data-qa="roles"]').contains(role);
            cy.visit('/offers').get('[data-qa="http-error.section"]')
              .should('exist').contains('403')
              .get('[data-qa="back-to-homepage"]').should('exist')
            cy.visit('/drivers').get('[data-qa="http-error.section"]')
              .should('exist').contains('403')
              .get('[data-qa="logout"]').click()
          })
      })
  })

如何创建一个函数来避免重复步骤？

How to create a function to avoid repetitive steps?

javascript

mocha.js

cypress