Сложности с Cypress ScrollTo метод
У меня есть несколько проблем при тестировании компонента виртуальной прокрутки с Cypress. У меня есть тест, который проверяет элементы li, присутствующие в DOM после прокрутки до дна контейнера.
Когда написано так, тест проходит:
cy.get('.virtual-scroll').scrollTo('bottom')
cy.wait(0)
cy.get('li').last().children('h4').contains('1999')
Когда написано так, это не так:
cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('li').last().children('h4').contains('1999')
Это также не удается:
cy.get('.virtual-scroll').scrollTo('bottom').get('li').last().children('h4').contains('1999')
Во втором и третьем примерах get('li') возвращает элементы li, присутствующие до завершения прокрутки, и, следовательно, не проходит тест. Я могу исправить это, добавив.wait, но не до конца понимаю поведение и задаюсь вопросом, является ли это ошибкой.
Есть идеи?
2 ответа
Сделайте утверждение, которое всегда пройдет, когда DOM отображается, например, с использованием .get() для элемента, который добавляется к DOM
ex) если у вас был <ul class="myloadedlist">....:
cy.get('.virtual-scroll').scrollTo('bottom')
cy.get('ul.myloadedlist')
cy.get('li').last().children('h4').contains('1999')
Таким образом, Cypress продолжит тестирование, как только этот элемент станет видимым.
Зачем?
Я предполагаю, что элементы добавляются к DOM в каком-то свитке eventListener, В этом случае это правильное поведение.
По сути, то, что вы тестировали, - это состояние гонки, когда пользователь очень быстро прокручивает страницу вниз, чтобы убедиться, что DOM еще не закончил рендеринг - действительный сенарио.
Так как вы нацелены на last()li Cypress находит последний элемент страницы перед DOM обновляется и ожидает его contain1999, чего он не делает, даже после Cypress повторяется в течение 4 секунд.
На самом деле это отличная особенность Cypress, потому что вы можете проверить состояние DOM время от времени, что пользователь может видеть только на долю секунды.
В моем случае добавление продолжительности к опции прокрутки помогло.cy.get("@dialogContent").scrollTo("center", { duration: 500 });