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

【问题标题】：How to check if element width is less than or equal to a pixel size in Cypress?如何检查元素宽度是否小于或等于赛普拉斯中的像素大小？
【发布时间】：2019-12-10 11:58:28
【问题描述】：

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

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

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

【问题讨论】：

你为什么要测试这个，用赛普拉斯还是根本不？另外，您为什么认为这不会测试确切的值？
我正在测试它以确保元素正确调整大小。这在 Cypress 中很容易做到，我可以轻松地切换视口。我不想测试确切的值，因为可能会出现滚动条。
我通常建议使用 Cypress 来测试应用的实际行为，最好手动审查响应式设计之类的内容。
我不得不强烈反对。我的观点是赛普拉斯真的擅长测试响应式设计 - 手动测试不是测试。但这是另一个讨论:)
您可以使用 Percy 处理很多布局，请参阅 Testing how an application renders a drawing with Cypress and Percy.io。 WRT 到滚动条的可见性，对于固定的测试夹具应该是一致的。

标签： cypress

【解决方案1】：

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

唉，这是实现您想要的目标的方法。

我会选择 jQuery 的 outerWidth，而不是 width（如果有 padding 或 border）：

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

如果你真的想断言实际计算出来的 css 值，你确实可以使用 jQuery css helper（或者使用 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);

【讨论】：

【解决方案2】：

最近刚尝试过这段代码，它在我的系统中完美运行。

cy.get('.vc_icon_element-inner')
.invoke('height').should('be.greaterThan', 47).and('be.lessThan',50)

在此 Invoke 函数默认情况下从 get 参数 .vc_icon_element-inner 中获取 Height CSS，从字段中修剪 px 值并获取整数。

断言是否应该检查给定范围内的范围并显示输出。

工作截图

【讨论】：

【解决方案3】：

我用它来获取元素的宽度（在本例中为画布）

 cy.get("#canvas").then(function(objCanvas) {
     var width = objCanvas.prop("width")
     var height = objCanvas.prop("height")
     var style = objCanvas.prop("style")
     cy.log("Width: "+width)
     cy.log("Height: "+height)
     cy.log("Style :"+style)
 })

 cy.get('#canvas').invoke('width').then(function(owidth){
     cy.log(owidth)
 });

 cy.get('#canvas').invoke('height').then(function(oHeight){
     cy.log(oHeight)
 });

【讨论】：