Question

我有一个项目需要通过赛普拉斯进行测试。顺便说一下，我是“赛普拉斯”的新手。

在遇到类似这样的事情时，我很难找到有关基于角色的测试的解决方案：

如果xhr响应为用户提供了角色为admin的数据，它将重定向到dashboard/admin。否则，如果xhr响应为用户数据指定了角色user，它将重定向到dashboard/user。

此后，对于哪种类型的用户登录，每个视图可能具有不同的操作和行为。

请看一下我的脚本：

const BASE_URL = Cypress.env('BASE_URL')
const APP_NAME = Cypress.env('APP_NAME')
const AUTH_ID = Cypress.env('AUTH_ID')
const PASSWORD = Cypress.env('PASSWORD')

describe('Login Test', () => {
    it('can perform a login action', () => {
        cy.visit(BASE_URL)
        cy.contains(APP_NAME)

        cy.get('input[name="contact"]')
            .type(AUTH_ID)
            .should('have.value', AUTH_ID)

        cy.get('input[name="password"]')
            .type(PASSWORD)
            .should('have.value', PASSWORD)

        cy.get('#submit-button').click()
        cy.url().should('contain', 'dashboard')
    })
})

，也请看看我的Vue.js脚本：

<template>
  <div id="login">
    <div class="login-card p-4">
      <h1 class="text-center font-weight-bold text-primary py-5">STTKD</h1>

      <!-- phone number input -->
      <div class="form-group">
        <label for="contact">Nomor Telepon</label>
        <input
          name="contact"
          type="number"
          class="form-control"
          min="0"
          placeholder="08xxx atau 628xxxx"
          v-model="user.contact"
        />
      </div>

      <!-- password-input -->
      <div class="form-group">
        <label for="password">Password</label>
        <input
          name="password"
          type="password"
          class="form-control"
          placeholder="Masukkan password"
          v-model="user.password"
        />
      </div>

      <div class="form-group text-right">
        <a href="#" class="text-primary">Forgot password?</a>
      </div>

      <!-- login-button -->
      <div class="form-group">
        <button
          id="submit-button"
          type="button"
          class="btn btn-primary btn-block"
          @click="onSubmit"
        >LOGIN</button>
      </div>

      <div class="form-group text-center">
        <p class="mb-0">
          Don't have account?&nbsp;
          <router-link :to="{ name: 'register' }" class="text-primary">Create a new one!</router-link>
        </p>
      </div>
    </div>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        user: {
          contact: "",
          password: ""
        }
      };
    },

    methods: {
      onSubmit() {
        axios
          .post("auth/login", this.user)
          .then(resp => {
            VueCookies.set("access_token", resp.data.access_token);
            VueCookies.set("token_type", resp.data.token_type);
            VueCookies.set("expires_at", resp.data.expires_at);

            // redirect with" user" param if the roles array from the response includes "user"
            if (resp.data.user.roles.includes("user")) {
              this.$router.replace({
                name: "dashboard",
                params: {
                  role: "user"
                }
              });
              return;
            }

            // else, redirect with "admin" param
            this.$router.replace({
              name: "dashboard",
              params: {
                role: "admin"
              }
            });
          })
          .catch(err => console.error(err));
      }
    }
  };
</script>

正如您在上面看到的那样，它的运行没有问题，但是我不知道下一步该怎么做，因为用户行为是动态的。

请帮助我解决此问题，如果有任何参考文献对我都有好处。

谢谢。

如何在赛普拉斯中创建基于角色的测试？

0 个答案: