cypress.io как удалить элементы 'n' раз, не предсказуемо, при повторном рендеринге самого списка

Question

У меня есть непредсказуемый список строк, которые нужно удалить

Я просто хочу нажать на каждый значок .fa-times

Проблема в том, что после каждого щелчка приложение vue.jsперерисовать оставшиеся строки.

Я также пытался использовать .each, но в этом случае я получил ошибку, потому что элемент (родительский элемент, я думаю) был отсоединен от DOM;cypress.io предлагает использовать охрану для предотвращения этой ошибки, но я понятия не имею, что это значит

Как - получить список значков - нажать сначала - выжить при повторном просмотре приложения - нажать затем- выжить при повторном просмотре приложения ... etch ...

?

Answer 1

Прежде чем показать одно из возможных решений, я бы хотел предвосхитить рекомендацию о том, что тесты должны быть предсказуемыми. Вы должны каждый раз создавать определенное количество элементов, чтобы вам не приходилось делать подобные хаки.

Подробнее об условном тестировании вы можете прочитать здесь: https://docs.cypress.io/guides/core-concepts/conditional-testing.html#Definition

Этопри этом, может быть, у вас есть действительный вариант использования (возможно, какое-то нечеткое тестирование?), так что давайте.

В следующем примере я делаю (1) настройку поведения рендеринга / удаления, которое выполняетто, что вы описываете, происходит в вашем приложении. Фактическое решение (2) таково: выясните, сколько элементов вам нужно удалить, запросив DOM и проверив length, а затем поставьте в очередь то же число кипарисов, которые каждый раз запрашивают DOM, чтобы вы получили свежуюссылка на элемент.

Предупреждение: После каждого удаления я жду, пока элемент (его кнопка remove будет точной) не будет существовать в DOM, прежде чем продолжить. Если ваше приложение повторно отображает остальные элементы по отдельности, то через после целевой элемент удаляется из DOM, вам нужно будет утверждать что-то еще, например, другой элемент (не тот,удаляется (удаляется) из DOM.

describe('test', () => {
  it('test', () => {

    // -------------------------------------------------------------------------
    // (1) Mock rendering/removing logic, just for the purpose of this 
    //     demonstration.
    // -------------------------------------------------------------------------

    cy.window().then( win => {
      let items = ['one', 'two', 'three'];
      win.remove = item => {
        items = items.filter( _item => _item !== item );
        setTimeout(() => {
          render();
        }, 100 )
      };
      function render () {
        win.document.body.innerHTML = items.map( item => {
          return `
            <div class="item">
              ${item}
              <button class="remove" onclick="remove('${item}')">Remove</button>
            </div>
          `;
        }).join('');
      }
      render();
    });

    // -------------------------------------------------------------------------
    // (2) The actual solution
    // -------------------------------------------------------------------------

    cy.get('.item').then( $elems => {
      // using Lodash to invoke the callback N times
      Cypress._.times($elems.length, () => {
        cy.get('.item:first').find('.remove').click()
          // ensure we wait for the element to be actually removed from DOM
          //  before continuing
          .should('not.exist');
      });
    });
  });
});