Как проверить, не виден ли элемент в тестировании Cypress e2e? - PullRequest
Новая
       10

Как проверить, не виден ли элемент в тестировании Cypress e2e?

0 голосов
/ 12 декабря 2018

Есть ли способ утверждать, что элемент никогда не виден при маршрутизации в Cypress?

У меня есть веб-приложение, отображаемое на сервере, которое иногда показывает состояние "загрузки", когда это не нужнот.Поэтому, когда я перемещаюсь между страницами, индикатор «загрузки» отображается в течение нескольких секунд, а затем исчезает.

Я знаю, что утверждения Cypress иногда будут «ждать», но в этом случае это приводит к тому, что мое утверждение не выполняется, потому чтоиндикатор загрузки гаснет, и это заставляет тест думать, что он прошел.

Я использую эти два утверждения:

cy.get('[data-test="loading"]').should('not.exist');

cy.get('[data-test="loading"]').should('not.be.visible');

Но оба они проходят, потому что индикатор загрузки гаснет.

Я проверил всю документацию, но, похоже, не существует какого-либо метода для проверки того, что элемент никогда не видно.Есть какой-то метод, который я пропускаю, или какой-нибудь хак, чтобы проверить это по-другому?

Ответы [ 2 ]

0 голосов
/ 13 декабря 2018

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

@ Тесты Маккурта применяются всякий раз, когда происходит изменение.

Вы хотите, чтобы стрельба продолжалась до минимума, поэтому найдите ближайшего (или ближайшего) родителя проверяемого элемента.

Примечание это охватывает exists тесты, но не должно быть необходимым для visible проверяет, присутствует ли элемент все время, но просто не виден.

В этом примере кнопка добавляется к body.
Первый тест наблюдает за span(который никогда не добавляется, поэтому тест завершается успешно).
2-й тест отслеживает button и завершается неудачей. 

describe('watching for an element to not appear', () => {

  const watchAndTest = function(parentSelector, assert) {
    Cypress.$(parentSelector).bind('DOMNodeInserted', function(event) {
      assert()
    });
  }

  it('should succeed because "span" does not exist', () => {
    const parentSelector = 'body'
    const watchForSelector = 'span'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

  it('should fail because "button" exists', () => {
    const parentSelector = 'body'
    const watchForSelector = 'button'
    watchAndTest(parentSelector, 
      () => {
        // Place your 'assert' code here
        cy.get(`${parentSelector} ${watchForSelector}`,{ timeout: 0 })
          .should('not.exist');
      }
    )

    // Place your 'act' code here
    cy.get(parentSelector).then(parent => {
      var newElement = document.createElement('button');
      parent[0].appendChild(newElement)
    })
    Cypress.$(parentSelector).unbind('DOMNodeInserted')
  })

})
0 голосов
/ 12 декабря 2018

Возможно, я сумасшедший, и я еще не проверял это, но я хотел бы добавить это

Я предполагаю, что вы проверяете, что НИКОГДА не должно быть индикатора загрузки, и он ожидает значения по умолчанию 4секунд и индикатор гаснет, и, следовательно, ваш тест пройден.Поэтому ниже я установил ожидание на ноль, чтобы оно не ожидало.Меня также смущает, почему вы не исправляете реальный код, поэтому вы не видите индикатор, если вы не должны этого делать.Возможно, у вас нет доступа к коду .. 

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.exist');

cy.get('[data-test="loading"]',{ timeout: 0 }).should('not.be.visible');
...