automated-tests - 使用 Cypress 定期检索和比较元素的样式属性

Question

我有一个时间指示器，它在一个时间尺度上移动，指示器的样式属性值每 x 毫秒不断变化，我需要获取、存储和比较之前捕获的值是否大于最新值。

初始值:

最新值:

逻辑是，从一个点(左10)开始，每一秒向左移动(左-0，-1，-2，-3 ...)

我尝试了几种方法，其中一种是在同一个“cy.then”中捕获，但在那种情况下，该元素将没有最近的值。到目前为止，我试过了。它获取值并在正则表达式的帮助下，我得到了一个“可比较”的值，但我如何存储/比较这些值？此外，如果我们需要比较 2 个以上的值，最好的方法是什么？

const BTN_CONTROL_TIMEINDICATOR = '#currentTimeIndicator'
  static verifyTimeLapse() {
        //wip
        var initialVal, nextVal
        initialVal = this.getAnyValueOfAnElement(BTN_CONTROL_TIMEINDICATOR)
        cy.wait(500)
        nextVal = this.getAnyValueOfAnElement(BTN_CONTROL_TIMEINDICATOR)
        cy.log(initialVal > nextVal) 
    }

  static getAnyValueOfAnElement(element) {
        //wip
        cy.get(element)
           .then(($ele) => {
               const val=$ele.attr('style').replace(/[^\d.-]/g, '')
               cy.log(val)
               // return does not work 
            })
    }

cy.log:

Answer 1

Page 对象不能很好地与 Cypress 命令队列一起工作，这是您可以使用自定义命令执行的操作。

/* Get the numeric value of CSS left in px */
Cypress.Commands.add('getTimescaleValue', () => {
  cy.get('#currentTimeIndicator')
    .then($el => +$el[0].style.left.replace('px',''))
})

/* Get a sequence of time scale values */
Cypress.Commands.add('getTimescaleValues', ({numValues, waitBetween}) => {
  const values = [];
  Cypress._.times(numValues, () => {          // repeat inner commands n times
    cy.getTimescaleValue()
      .then(value => values.push(value))      // save value
      .wait(waitBetween)
  })
  return cy.wrap(values);
})

/* Assert a sequence of values are in descending order */
Cypress.Commands.add('valuesAreDescending', { prevSubject: true }, (values) => {
  values.reduce((prev, current) => {
    if (prev) {                       // skip first (no prev to compare)
      expect(prev).to.be.gt(current)  // assert pairs of values 
    }
    return current
  });
})


it('check the timeline', () => {
  cy.getTimescaleValues({ numValues: 10, waitBetween: 100 })
    .valuesAreDescending()
})

日志

<表类="s-表"><头><日> <日> <日> <正文>断言预计63高于58断言预期58高于48断言预期48高于43断言预期43高于33断言预计33高于23断言预计23岁以上断言预期18大于13断言期望13大于3断言预期 3 高于 -2

测试

<div id="currentTimeIndicator" style="left:63px">Target</div>
<script>
  const timer = setInterval(() => {
    const div = document.querySelector('#currentTimeIndicator')
    const left = +div.style.left.replace('px', '');
    if (left < 0) {
      clearInterval(timer)
      return
    }
    const next = (left - 5) + 'px';
    div.style.left = next;
  }, 100)
</script>

如果您的应用使用 setInterval() 进行计时，您应该能够使用 cy.clock() 和 cy.tick() 而不是 .wait(waitBetween) 以获得更精确的采样和更快的测试执行。