Подождите, пока все элементы будут иметь z-индекс меньше 2

Question

У меня есть ряд элементов, которые анимируются (вручную путем установки позиции в JS, а не через CSS-преобразования), и я хочу подтвердить их положение, когда они все остановились.

Самый простой способ, которым я имеюопределения того, являются ли они анимирующими, заключается в том, что все элементы анимации будут иметь z-индекс 2 (позже я сделаю рефакторинг, чтобы добавить атрибуты data-, чтобы сделать его более надежным, но сейчас это так).

В документах Cypress говорится, что утверждения будут автоматически ждать, пока они не пройдут, но это не то поведение, которое я вижу:

Cypress.Commands.add('getNumberOfMovingElements', () => {
  cy.get(`[data-test-element="square"]`)
    .then(squares => {
      const movingSquares = Array.from(squares).filter(square => square.style.zIndex === '2');
      return movingSquares.length;
    })
});


Cypress.Commands.add('getPosition', () => {
  cy
    .getNumberOfMovingElements().should('be.at.most', 0)
    .etc

Это терпит неудачу, потому что, когда я это называю, у меня есть один подвижный квадрат.Как я могу ждать, пока утверждение верное?

Answer 1

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

Хитрость заключается в том, чтобы объединить .should с .invoke:

Cypress.Commands.add('getNumberOfMovingElements', () => {
  cy.get('.someclass')
  .should($el =>
    $el.fn = () => {
      return $el.toArray().filter(el => getZindex(el) === 2)
    })
  .invoke('fn')
})

const getZindex = (el) => {
  const doc = el.ownerDocument
  const zindex = doc.defaultView.getComputedStyle(el).zIndex

  return +zindex
}

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

имейте в виду, что getComputedStyle метод получения свойства css потребуетучитывать как таблицы стилей, так и встроенные стили.Если вы продолжаете получать auto z-index, , проверьте этот ответ здесь

Редактировать: лично я бы реорганизовал его для лучшего повторного использования (вы можете позвонитьили вызовите команду выключения cy):

const getNumberOfMovingElements = () => {
  Cypress.log({ name: 'GET', message: 'getNumberOfMovingElements' })

  return cy.get('.someclass')
  .should($el =>
    $el.fn = () => {
      return $el.toArray().filter(el => getZindex(el) === 2)
    })
  .invoke('fn')
}

const getZindex = (el) => {
  const doc = el.ownerDocument
  const zindex = doc.defaultView.getComputedStyle(el).zIndex

  return +zindex
}

Cypress.Commands.addAll({prevSubject: false}, { getNumberOfMovingElements })