在 cypress 测试中检查近似属性值答案

【问题标题】：Check for approximate attribute value in cypress test在 cypress 测试中检查近似属性值
【发布时间】：2021-02-02 16:27:49
【问题描述】：

我编写了以下赛普拉斯测试来测试我的 Angular 应用程序中的 SVG 元素：

it("should have the right size", () => {
  cy.get(".rectangle")
    .first()
    .should("have.attr", "width", "80")
    .and("have.attr", "height", "60");
});

很遗憾，width 和 height 的值可能略有不同。所以我宁愿允许一些小的偏差。

推荐的、最短的和/或最优雅的方法是什么？

【问题讨论】：

通常的逃生舱口是should。
抱歉，我的代码示例中的第一个“and”是最初更大的测试的遗留物。我修好了它。我的问题的重点是与例如比较80，我想允许像 70-90 这样的东西。
但是你仍然可以使用回调的形式来获取元素。如果您只对一个属性进行断言，您可以链接到该属性（使用双参数形式，参见例如stackoverflow.com/a/57736128/3001761），但要同时执行这两项操作，您需要该元素。
@jonrsharpe 哦，我明白了！现在我设法推导出一个适合我的solution。谢谢！

标签： javascript testing svg integration-testing cypress

【解决方案1】：

我根据should-callback 和this answer 从jonrsharpe 的评论中得出以下解决方案：

it("should have the right size", () => {
  cy.get(".rectangle")
    .first()
    .should(($rect) => expect(+$rect.attr("width")).to.be.closeTo(80, 10))
    .and(($rect) => expect(+$rect.attr("height")).to.be.closeTo(60, 10));
});

或者，我们可以将两个期望组合到一个函数中：

it("should have the right size", () => {
  cy.get(".rectangle")
    .first()
    .should(($rect) => {
      expect(+$rect.attr("width")).to.be.closeTo(80, 10);
      expect(+$rect.attr("height")).to.be.closeTo(60, 10);
    });
});

【讨论】：