Question

我有一个具有无限滚动功能的React应用程序，因此当用户滚动到页面底部时，会发出ajax请求来检索更多结果。我一直在努力测试此代码，以下是我能够基于google / stackoverflow搜索工作的内容。我不清楚Cypress.$的功能是什么，或者说Cy.*命令有什么不同。

我觉得我不清楚如何使逻辑与赛普拉斯的异步特性协同工作。以下代码被注释以解释我的想法。

  it("should scroll to bottom, retrieve & display next results", () => {
    // wait because some ajax request takes longer upon page load
    cy.wait(500);
    let initialCount = null;
    // store the length of elements in variable
    initialCount = Cypress.$("div.experienceThumbnail").length;
    // scroll down to bottom
    cy.scrollTo("bottom", { duration: 1000 });
    // wait because an ajax request is made for the pagination
    cy.wait(1111);
    // get the same elements again
    cy.get("div.experienceThumbnail")
      .its("length")
    // compare the new count to prev. count we stored above in initialCount var
      .should("be.gt", initialCount);
  });

我的主要问题是测试上述类似内容的正确方法是什么。

Answer 1

在Cypress中，如果您想更好地控制断言，则必须学会与嵌套Promises一起生活。

我还没有测试以下两个建议，但是其中至少一个应该有效：

it("should scroll to bottom, retrieve & display next results", () => {
  const selector = "div.experienceThumbnail"
  cy.wait(500);
  cy.get(selector).then($els => {
    const initialCount = $els.length
    cy.scrollTo("bottom", { duration: 1000 });
    cy.wait(1111);

    cy.get(selector)
      .its("length")
      .should("be.gt", initialCount);
  })
});

it("should scroll to bottom, retrieve & display next results", () => {
  const selector = "div.experienceThumbnail"
  cy.wait(500);
  cy.get(selector).then($els => {
    const initialCount = $els.length
    cy.scrollTo("bottom", { duration: 1000 });
    cy.wait(1111);

    cy.get(selector).then($els2 => {
      const currentCount = $els2.length
      expect(initialCount <= currentCount).to.be.true
    })
  })
});

Answer 2

我认为 Cypress 的缺点之一（与其他测试自动化工具相比）。前后对比。要么您有这样一个只能在这个特定位置使用的嵌套函数，要么您将变量存储在别名中。两者都不令人满意。由于 Toteff 没有编写别名版本，我的尝试（也没有验证代码），但在类似情况下工作：

const initialCount = Cypress.$("div.experienceThumbnail").length;
cy.wrap(initialCount).as('before');
cy.scrollTo("bottom", { duration: 1000 });
const afterCount = Cypress.$("div.experienceThumbnail").length;
cy.wrap(afterCount).as('after');     
this.compareAliasNumbers('after', 'before', 'After <= Before');

那么这个util函数：

compareAliasNumbers(smaller: string, bigger: string, message: string) {
    cy.get(`@${bigger}`).then((a1) => {
      const biggerNr = parseInt(a1 as unknown as string, 10) + 1; // plus one = greater than or equal
      cy.get(`@${smaller}`).then((a2) => {
        // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
        const smallerNr = parseInt(a2 as unknown as string, 10);
        expect(initialCount <= biggerNr).to.be.true
      });
    });
  }

在我看来：两个版本（由 Toteff 嵌套或通过别名创建）都难以阅读。代码重用只能在后者中实现，但我也不喜欢它（来自另一个自动测试工具）。还有其他解决方案吗？

赛普拉斯测试：如何在AJAX调用之前和之后比较元素计数

2 个答案: