在使用Cypress.io进行测试时，如何使用nuxt.js和nuxt-auth以编程方式登录

Question

使用Cypress.io进行测试，我想在我的Nuxt应用程序上触发一个“存根”登录。

我已经尝试过阻止登录和用户细节XHR调用nuxt模块触发。

我使用了一个自定义插件来向Cypress公开Nuxt应用程序的上下文。看上去很成功。

/plugins/cypress.js

const isCypress = typeof window.Cypress !== 'undefined'
export default context => {
  if (isCypress) {
    window.nuxtApp = context
  }
}

在Cypress规范文件中，我调用了nuxt的$auth.loginWith('local', {…})，它似乎将Vuex $state.loggedIn设置为true，并使用我的固定文件的内容设置了用户对象。

我的Cypress登录命令示例

Cypress.Commands.add('login', () => {
  // Use as cy.login()
  cy.server()
  cy.fixture('userLogin').as('userLoginJson')
  cy.fixture('userDetails').as('userDetailsJson')
  cy.route({
    method: 'POST',
    url: '/api/auth/login',
    response: '@userLoginJson'
  }).as('postLogin')
  cy.route({
    method: 'GET',
    url: '/api/user/details',
    response: '@userDetailsJson'
  })
  cy.visit('/')
  cy.window().should('have.property', 'nuxtApp') // is TRUE
  cy.window().then(window => {
    console.log('nuxtApp', window.nuxtApp) // Nuxt context visible in console
    window.nuxtApp.$auth
      .loginWith('local', {
        data: {
          email: 'anything',
          password: 'anything',
          remember_me: true
        }
      })
      .then(response => response)
  })
  cy.visit('/user') // Middleware denies this route. Consistent with being logged out.
})

我希望这个应用程序表现为它已经登录了，但是中间件仍然拒绝访问登录路由，并且拒绝组件中的任何v-if="$auth.loggedIn"作为注销。

/中间件/认证.

export default ({ store, redirect }) => {
  // If the user is not authenticated
  if (!store.state.auth.loggedIn) {
    return redirect('/login')
  }
}

我最好的猜测是，Nuxt的服务器端呈现方式正在阻碍…但它可能是任何‍♂️。

谢谢

一些灵感来自：

• https://www.cypress.io/blog/2017/11/28/testing-vue-web-application-with-vuex-data-store-and-rest-backend/

Answer 1

我想我能办到这件事。我正在从SPA切换到Universal，所以我不得不添加一个额外的检查，看看我是否在客户机中，还是在插件中：

const isCypress = process.client && typeof window.Cypress !== 'undefined'

export default context => {
  if (isCypress) {
    window.nuxtApp = context
  }
}

那么我的测试看起来是这样的：

it('displays a list of objective types', () => {
    cy.visit('/admin/objective_types')
    cy.window()
      .then(window => {
        window.nuxtApp.$auth.loginWith('local', {
          data: {
            user: {
              email: 'admin@pyx.com',
              password: 'password'
            }
          }
        }).then(cy.contains('td.title', 'Department'))
      })

  })

Answer 2

还可以通过添加命令在测试之前执行登录操作。

cypress/support/command.js .

Cypress.Commands.add("login", user => {
    cy.request("POST", `${apiUrl}/auth/login`, user)
        .its("body.data.access_token")
        .should("exist")
        .then(token =>
            localStorage.setItem("auth._token.local", `Bearer ${token}`)
        );
});

简单的e2e测试：

describe("CART WHEN USER IS AUTHORIZED", () => {
    beforeEach(() => {
        cy.login();

        cy.get("[cart-button]").click();

        cy.get(".event").as("event");
        cy.get("[button-delete]")
            .first()
            .as("delete");
    });
});

Answer 3

没有必要创建插件，这里是我使用的插件。

  Cypress.Commands.add("login", (email, password) => {
  cy.intercept("GET", "api/sanctum/csrf-cookie").as("csrfCookie");

  cy.intercept("POST", "/api/login", {
    fixture: "auth/user-login.json",
  }).as("userLogin");

  cy.fixture("auth/user-info.json").then((user) => {
    user.email = email;
    cy.intercept("GET", "/api/user", user).as("userInfo");
  });

  cy.window()
    .its("$nuxt")
    .then((nuxt) => {
      nuxt.$auth.loginWith("laravelSanctum", {
        data: {
          email: email,
          password: password,
          //   remember_me: true,
        },
      });
      cy.wait("@userInfo");
    });