时间戳

首页 > 解决方案 > 如何检查元素宽度是否小于或等于赛普拉斯中的像素大小？

cypress - 如何检查元素宽度是否小于或等于赛普拉斯中的像素大小？

问题描述

我的目标是在 Cypress 中编写一个测试来检查元素的宽度是否小于或等于 355px。

我有这个代码，但它只检查确切的尺寸：

cy
.get('.mat-dialog-container:visible')
.should('have.css', 'width', '355px')

标签： cypress

解决方案

任何可以自动化的东西都应该是（当然，除非实现和维护的成本超过了这样做的预期效用），因此我认为自动化 RD 测试是一个好主意。检查容器尺寸是否是实现它的方法是一个悬而未决的问题（可以说您应该检查是否应该隐藏、隐藏的元素以及应该可见的元素是否可见，以及 UI 是否正常工作预期的）。

唉，这里是如何实现你想要的。

我会选择 jQuery outerWidth ，这是您通常想要检查的内容，而不是width（如果有paddingor border）：

cy.get(selector).invoke('outerWidth').should('be.lt', 355);

如果您真的希望断言实际计算的 css 值，您确实可以使用 jQuerycss助手（或使用window.getComputedStyle，这并不重要）：

cy.get(selector).invoke('css', 'width')
    .then(str => parseInt(str)).should('be.lt', 355);

// or use jQuery.prototype.width (I'm not sure if there's any meaningful
//  difference, but there might be --- better check the docs)
cy.get(selector).invoke('width').should('be.lt', 355);

推荐阅读