Question

我从事大型应用程序的工作已有一段时间了，刚刚开始编写e2e测试。

该应用程序是Vue-cli 3.0应用程序，该应用程序的测试平台默认为“ nightwatch”，但后来更改为“ cypress”。问题是，一个简单的登录测试就可以工作，而任何大于这个的崩溃都会崩溃。

同一个应用程序，使用以下代码通过了测试：

import { email, password } from '../../testinfo'

describe('login test', () => {
  it('login', () => {
    cy.visit('/')
    cy.contains('#btnLogin', 'Login')
    // cy.contains('#btnSignUp', 'Sign up')
    cy.get('#btnLogin').click()
    cy.get('#input-email > input').type(email)
    cy.get('#input-pw > input').type(password)
    cy.get('#btnProceedLogin').click()
    cy.wait(3000)
    cy.contains('a', 'Team')
    cy.contains('a', 'Tournament')
  })
})

但是此代码失败：

import { email, password } from '../../testinfo'
import nanoid from 'nanoid'

describe('team related stuff test', () => {
  it('team creation and delete', () => {
    cy.visit('/')
    cy.contains('#btnLogin', 'Login')
    cy.contains('#btnSignUp', 'Sign up')
    cy.get('#btnLogin').click()
    cy.get('#input-email > input').type(email)
    cy.get('#input-pw > input').type(password)
    cy.get('#btnProceedLogin').click()
    cy.wait(3000)
    cy.get('#navTeam').should('exist')
    cy.get('#navTeam').trigger('mousedown')
    cy.get('.make > button').click()
    cy.get('#full-form-name > input').type(`[test]${nanoid}`)
    cy.get('#full-form-select-game > div > div > button').click()
    const gameMax = cy.get('#full-form-select-game > div > ul').length
    const targetGameIdx = Math.floor(Math.random() * gameMax)
    cy.get('#full-form-select-game > div > ul')[targetGameIdx].click()
  })
})

我无法理解的是第二个测试规范失败，并显示一条消息cannot read property click of undefined。我把cy.wait(3000)放在前面还是延迟都没关系。

有趣的是，如果我将cy.wait()放在最前面，它应该至少等待3秒钟，直到显示关于与元素交互的错误消息，但是一旦我启动应用程序，该错误消息立即弹出。

Answer 1

您的问题在这里：

const gameMax = cy.get('#full-form-select-game > div > ul').length

您不能存储这样的值。您的代码会在测试运行开始时立即全部运行，然后再进行其他操作。每个命令仅告诉赛普拉斯将来要做一些事情。如果要排队自己的代码以使其与其他所有命令一起运行，则可以使用.then()，如下所示：

// ...
cy.get(#full-form-select-game > div > ul').then(elements => {
    const gameMax = elements.length;
    const targetGameIdx = Math.floor(Math.random() * gameMax);
    cy.get('#full-form-select-game > div > ul')[targetGameIdx].click();
});

以此替换最后三个赛普拉斯命令，应该起作用。我尚未对其进行测试，但这至少应该使您走上正确的轨道。

对赛普拉斯工作原理的基本了解对于编写赛普拉斯测试至关重要。如果您还没有的话，我强烈建议您阅读文档中奇妙的introduction to Cypress。

cypress.js e2e测试所有元素均未定义

1 个答案: