cypress.js e2e test все элементы не определены - PullRequest
0 голосов
/ 23 октября 2018

Я какое-то время работал над огромным приложением и только начал работать над написанием теста e2e.

Приложение - приложение Vue-cli 3.0, в котором была ночная часы платформы тестирования.по умолчанию, но позже изменился на «кипарис».проблема в том, что простой тест входа в систему работает, в то время как все, что больше этого, терпит крах.

то же самое приложение проходит тест с этим кодом:

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 секундыпрежде чем он показывает сообщение об ошибке при взаимодействии с элементом, но как только я загружаю приложение, сообщение об ошибке появляется мгновенно.

1 Ответ

0 голосов
/ 23 октября 2018

Ваша проблема здесь:

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

Вы не можете хранить такие значения.Ваш код запускается сразу в начале теста, прежде чем что-либо еще произойдет.Каждая команда просто говорит Cypress сделать что-то в будущем.Если вы хотите поставить в очередь свой собственный код, чтобы он выполнялся в порядке со всем остальным, вы можете использовать .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();
});

Замените последние три команды Cypress этим, и оно следует работа.Я не проверял его, но он должен, по крайней мере, поставить вас на правильный путь.

Базовое понимание того, как работает Cypress, важно для написания тестов Cypress.Если вы еще этого не сделали, я настоятельно рекомендую прочитать в документации фантастическое введение в Cypress .

...