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

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

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

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


任何可以自动化的事情都应该（除非这样做的预期效用被实现和维护的成本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');

,

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


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

**

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