如何在 cypress 测试之前准备 Db？

Question

我正在使用 cypress 来测试我的后端节点 api。

我想在之前的函数中将我的 Db 重置为干净状态。这涉及使用 axios（因此接收承诺）向我的 json-server“db”发送 post、put 和 delete 请求。

我熟悉 cypress 的命令文件（已经将它用于我的登录功能），但我似乎无法让它适用于我的“重置数据库”行为。

因此我简化了问题，直到将我的用户发布到“it”功能中，但它仍然不起作用

柏树测试：

const axios = require('axios')

describe('Auth', function() {
  beforeEach(function() {
    cy.visit('http://localhost:8080')
  })

  describe('login with non existing user', function() {
    it('should show an error message', function() {      
      cy.login('non.existing.user@example.com', 'password')
      cy.get('#app > div.container > div > div > div > div > div > form > div.alert.form-group.alert-danger')
        .should('have.text', 'Invalid Credentials')
    })
  })


  describe('login with an invalid password', function() {
    it('should show an error message', async function() {
      cy.putUserToDb('existingUser', 'existing.user@test.test', 'Existing User', 'password')
      cy.login('existing.user@test.test', 'pass')
      cy.get('#app > div.container > div > div > div > div > div > form > div.alert.form-group.alert-danger')
        .should('have.text', 'Invalid Credentials')
    })
  })
})

柏树命令：

const axios = require('axios')
const bcrypt = require('bcrypt')

Cypress.Commands.add("login", (email, password) => {
  cy.contains('Log In')
    .click()
  cy.url()
    .should('include', '/signin')
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(1) > input')
    .clear()
    .type(email)
    .should('have.value', email)
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(2) > input')
    .clear()
    .type(password)
    .should('have.value', password)
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(3) > button')
    .click()
})

Cypress.Commands.add("putUserToDb", async (id, email, name, password) => {
  const jsonServerUrl = 'http://localhost:5000'
  console.log(`${jsonServerUrl}/users/${id}`)
  await axios
    .put(`${jsonServerUrl}/users/${id}`, {
      email: email,
      name: name,
      password: bcrypt.hashSync(password)
    })
})

我在 cypress 中收到此错误：

tests?p=cypress\integration\auth.js-872:37810 Uncaught Uncaught TypeError: Cannot read property '_handle' of undefined

This error originated from your test code, not from Cypress.

When Cypress detects uncaught errors originating from your test code it will automatically fail the current test.

Cypress could not associate this error to any specific test.

We dynamically generated a new test to display this failure.

Check your console for the stack trace or click this message to see where it originated from.
    at http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:37810:16
    at Array.forEach (<anonymous>)
    at module.exports (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:37809:36)
    at Object.<anonymous> (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:35419:1)
    at Object.249._process (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:35719:4)
    at o (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:1:265)
    at http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:1:316
    at Object.<anonymous> (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:32284:11)
    at Object.242.../package.json (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:32473:4)
    at o (http://localhost:59099/__cypress/tests?p=cypress\integration\auth.js-872:1:265)

您知道如何在一组测试之前正确重置我的数据库吗？

提前致谢！

Answer 1

我终于明白问题出在哪里了：只是 bcrypt 库正在使用底层 C 库，因此在 node 中工作，而不是在浏览器中。 将其替换为 bcryptjs 解决了我的问题。

之后，由于我的 putUserToDb 命令未返回赛普拉斯承诺，我的测试无法正常工作。

修复该问题后，我的代码现在如下所示：

command.js：

import axios from 'axios'
import bcrypt from 'bcryptjs'

Cypress.Commands.add("login", (email, password) => {
  cy.contains('Log In')
    .click()
  cy.url()
    .should('include', '/signin')
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(1) > input')
    .clear()
    .type(email)
    .should('have.value', email)
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(2) > input')
    .clear()
    .type(password)
    .should('have.value', password)
  cy.get('#app > div.container > div > div > div > div > div > form > div:nth-child(3) > button')
    .click()
})

Cypress.Commands.add("putUserToDb", (id, email, name, password) => {
  const jsonServerUrl = 'http://localhost:5000'
  return new Cypress.Promise((resolve, reject) => {
     axios.put(`${jsonServerUrl}/users/${id}`, {
      id: id,
      email: email,
      name: name,
      password: bcrypt.hashSync(password)
    })
    .then((data) => {
      resolve()
    })
    .catch((err) => {
      reject(err)
    })
  })
})

auth.js：

describe('Auth', function() {
  before(() => {
    cy.putUserToDb('existingUser', 'existing.user@test.test', 'Existing User', 'password')
  })

  beforeEach(function() {
    cy.visit('http://localhost:8080')
  })

  describe('login with non existing user', function() {
    it('should show an error message', function() {
      cy.login('non.existing.user@example.com', 'password')
      cy.get('#app > div.container > div > div > div > div > div > form > div.alert.form-group.alert-danger')
        .should('have.text', 'Invalid Credentials')
    })
  })


  describe('login with an invalid password', function() {
    it('should show an error message', function() {
      cy.login('existing.user@test.test', 'pass')
      cy.get('#app > div.container > div > div > div > div > div > form > div.alert.form-group.alert-danger')
        .should('have.text', 'Invalid Credentials')
    })
  })
})