使用赛普拉斯定期检索和比较元素的样式属性

Question

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

初始值：

最新值：

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

我尝试了几种方法，其中一种是在同一个 'cy.then' 中捕获，但在那种情况下，该元素将没有最近的值。到目前为止，我试过了。它获取值并在正则表达式的帮助下，我得到了一个 'comparable' 值，但我如何才能 store/compare 这些值？另外，如果我们需要比较 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

我不知道初始值是从哪里来的。但在它改变之前，也许在页面加载时，也许作为点击的第一份工作，等等你可以做这样的事情：

let item = document.querySelector("#currentTimeIndicator");
item.dataset.left = parseFloat(item.style.left);

console.log(item);

<div id="currentTimeIndicator" style="left:-20px"></div>

Answer 2

页面对象不能很好地与 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()
})

日志


	assert	expected 63 to be above 58
	assert	expected 58 to be above 48
	assert	expected 48 to be above 43
	assert	expected 43 to be above 33
	assert	expected 33 to be above 23
	assert	expected 23 to be above 18
	assert	expected 18 to be above 13
	assert	expected 13 to be above 3
	assert	expected 3 to be above -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) 以获得更精确的采样和更快的测试执行.

使用赛普拉斯定期检索和比较元素的样式属性

Retrieve and compare the style attribute of an element periodically using using cypress

automated-tests

cypress

ui-testing