Question

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

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

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

Answer 1

任何可以自动化的事情都应该（除非这样做的预期效用被实现和维护的成本of course所抵消），所以我认为自动化RD测试是一个好主意。检查容器尺寸是否是实现它的方法是一个悬而未决的问题（可以说您应该检查应该隐藏，隐藏，以及应该可见，可见以及用户界面是否按以下方式工作的其他元素）预期）。

A，这是实现您想要的方式的方法。

我会使用jQuery的outerWidth，而不是width，这通常是您要检查的（如果有padding或border）：

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

如果您真的希望断言实际的css值，则可以使用jQuery css辅助函数（或使用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');

Answer 2

I used this to get the width of an element (a canvas in this case)

>         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)
>     });

Answer 3

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

**

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

**

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

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

Working screenshot

如何在Cypress中检查元素宽度是否小于或等于像素大小？

3 个答案: