修复 cypress 中的片状测试的建议

Question

我有一个基于地图的应用程序（如谷歌地图），我正在为放大选项编写​​测试。放大时覆盖所有缩放级别的测试。我的测试正在运行，但结果不一致且不稳定。

我的代码：

static verifyAllAvailableZoomInZoomSizeInNM() {
var expectedValues = [500,200,100,50,20,10,5,2,1,0.5,0.2,0.1,0.05,0.02,0.01,0.005,0.002,0.001,0.0005,0.0002,0.0001,0.00005,0.00002];
    cy.getCurrentZoomSizes({
      numValues: 26,//I expect to give 23 but I just gave 26 in order to capture all sizes
      waitBetween: 1000,
      elementLocator: BTN_MAP_ZOOMIN,
    }).should("be.eql", expectedValues);
  }

赛普拉斯命令：

/* Get the numeric value of zoom size in nm */
Cypress.Commands.add("getCurrentZoomSize", () => {
    cy.get('div[class="ol-scale-line-inner"]').then(
    ($el) => +$el[0].innerText.replace(" nm", "")
  ); 
});

/* Get a sequence of zoom size values */
Cypress.Commands.add("getCurrentZoomSizes", ({ numValues, waitBetween, elementLocator }) => {
  const values = [];
  Cypress._.times(numValues, () => {
    cy.getCurrentZoomSize()
      .then((value) => values.push(value))
          
    cy.get(elementLocator)
        .click()
        .wait(waitBetween);
  });
  return cy.wrap(values);
});

以及测试结果1：

测试结果2：

正如您在屏幕截图中看到的，一些缩放尺寸重复了。我尝试在每次放大点击之间给予足够的等待，但这也无济于事。有什么办法可以解决这个不稳定的测试吗？

Answer 1

循环的执行速度比 Cypress 命令或缩放操作快得多，如果您在循环内添加 console.log() 就可以看到它

Cypress._.times(numValues, (index) => {
  console.log(index)

这不一定是问题，它只是很快填满了命令队列，然后命令就会消失。

但在getCurrentZoomSize() 调用之间，您需要放慢速度以完成缩放，而使用.wait(waitBetween) 可能是事情变得不稳定的原因。

如果您将.should() 应用于每个缩放级别，您将重试并在每个缩放操作之间等待。

问题在于弄清楚如何安排事情以便发生正确的重试。

如果你这样做

cy.getCurrentZoomSize()
  .should('eq', currentZoom);

相当于

cy.get('div[class="ol-scale-line-inner"]')
  .then($el => +$el[0].innerText.replace(" nm", "") ) 
  .should('eq', currentZoom);

它不起作用，.then() 内部的转换妨碍了重试。

这行得通，

cy.get('div[class="ol-scale-line-inner"]')
  .should($el => {
    const value = +$el[0].innerText.replace(" nm", "")
    expect(value).to.eq(expectedValue) 
  })

或者这个

cy.get('div[class="ol-scale-line-inner"]')
  .invoke('text')
  .should('eq', `${currentZoom} nm`);

所以完整的测试可能是

Cypress.Commands.add("getCurrentZoomSizes", (expectedValues, elementLocator) => {

  const numValues = expectedValues.length;
  Cypress._.times(numValues, (index) => {

    const currentZoom = expectedValues[index];

    cy.get('div[class="ol-scale-line-inner"]')
      .invoke('text')
      .should('eq', ${currentZoom} nm`);       // repeat scale read until zoom finishes
                                               // or fail if never gets there
    cy.get(elementLocator).click();            // go to next level
  });
});

const expectedValues = [...
cy.getCurrentZoomSizes(expectedValues, BTN_MAP_ZOOMIN)