Как ждать, пока элемент исчезнет в кипарисе

Question

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

Я видел, как некоторые используют следующее, но это не кажется мне полезным, а также я не хочу, чтобы это было утверждением. cy.get('element, {timeout: 10000}).should('not.exist);

У кого-нибудь есть какие-нибудь советы?

Answer 1

ИМХО, самый чистый способ - не использовать ожидания или тайм-ауты с get, это своего рода антипаттерн.

Я бы рекомендовал использовать команду Cypress waitUntil и использовать что-то вроде:

 cy.waitUntil(function() {
  return cy.get('element').should('not.exist');

или в зависимости от кода приложения вы можете использовать not.visible.

Answer 2

cypress-wait-untilне работал для меня. Я просто использовал основное:

      cy.get('.ant-drawer-body').should('not.exist');

Он ждет автоматически.

Answer 3

Если вам конкретно нужно подождать, вы можете использовать wait() Функция кипариса, прежде чем сделать утверждение, и предоставить количество времени ожидания до истечения времени ожидания.

Но обратите внимание, это анти-шаблон, как вы можете найти в документах:

Вам почти никогда не нужно ждать произвольный период времени. Всегда есть лучшие способы выразить это в Cypress.

Тем не менее, если ваш индикатор загрузки привязан к какому-либо сетевому запросу, вы можете подождать, пока он завершит работу, прежде чем делать утверждение. Это может быть достигнуто с помощью этого примера:

// Wait for the route aliased as 'getAccount' to respond
// without changing or stubbing its response
cy.server()
cy.route('/accounts/*').as('getAccount')
cy.visit('/accounts/123')
cy.wait('@getAccount').then((xhr) => {
  // we can now access the low level xhr
  // that contains the request body,
  // response body, status, etc
})

Более подробную информацию об ожидании запросов можно найти здесь.

Также убедитесь, что вы действительно хотите использовать .should('not.exist') и не .should('not.be.visible'),

Answer 4

Реализации загрузочного счетчика часто просто скрывают элемент, а не удаляют его из DOM. Следовательно,should("not.exist") у них не сработает.

cy.get("element").should("not.be.visible")- правильный подход в таких случаях (как уже намекнул Диого).

Answer 5

Подход Диого Роша важен для использования во многих случаях, но чтобы быть уверенным, что изображение исчезло, вам нужно следовать совету Филзена. Утверждают, что его не видно, и тестовое воспроизведение дождется его исчезновения.

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

Answer 6

.findByTestId('loading-spinner-data-testid').should('not.be.visible')

Для меня это работает в аналогичном контексте.

По состоянию на "@testing-library/cypress": "^5.3.1",

Просто убедитесь, что вы присвоили компоненту счетчика атрибут data-testid.

<LoadingSpinner data-testid='loading-spinner-data-testid'>

Answer 7

Используйте cypress-wait-until :

cypress/support/commands.js:

      import 'cypress-wait-until'

test.spec.js:

      cy.waitUntil(() => cy.get('element').then($el => $el.length === 0))

Answer 8

Вы сделали почти правильно

      cy.get('element', {timeout: 10000}).should('not.exist');

означает, что вы будете ждать 10000 мс (например, 10 секунд), чтобы найти элемент, и после проверки, если он не существует ( обратите внимание на 10 секунд на поиск элемента, а не на ожидание, пока он не исчезнет ). Нам нужно дождаться завершения действия и после этого проверить, что индикатор исчез . Это означает, что вам нужно подождать, пока индикатор загрузки не погаснет .

Есть как минимум 2 способа сделать это

Хороший способ

      cy.get('element', {timeout: 10000}).should('not.exist', {timeout: 60000});

например, подождите 10 секунд, чтобы найти элемент, и подождите еще 60 секунд, пока он не исчезнет. Если он исчезнет, ​​скажем, через 7 секунд, мы больше не будем ждать и перейдем к следующему тесту (-ам).

Не очень хороший способ

      cy.wait(60000) // wait in ANY case 60 seconds
cy.get('element', {timeout: 10000}).should('not.exist');

Вы можете использовать cy.wait(timeInMilliseconds) - но это антипаттерн, как сказано в документации по кипарису здесь

Answer 9

Любой из них должен работать:

      .should('not.be.visible')

или

      .should('not.exist')

В противном случае перейдите к установке и использованию:

кипарис-подождите-пока