当计算出的宽度不准确时，如何在柏树中测试元素的宽度？

Question

假设我在 DOM 中有一个 div，宽度为 '200px'，class 为 'target'。

为了用cypress测试它的宽度，我应该写下面的代码：

cy.get('.target').should('have.css', 'width', '200px');

还有一堆测试，测试元素的宽度和高度...

...

今天发生了一件奇怪的事！

所有这些测试都失败了，因为 cypress 找到的 width 的值是 200.0000000000032038879956012px 而不是 200px !!!

我想到的第一个解决方案是用实际数字（例如，200）而不是柏树找到的字符串（例如，'200px'）来测试它们；我认为这是一个昂贵的想法！

你觉得我怎样才能克服这个问题！？

Answer 1

测试断言 .should('have.css', ...) 是 Window.getComputedStyle() 的包装器，它在应用所有 CSS 之后读取实际呈现的值。

它并不总是对应于以内联样式或通过样式应用的“输入”设置 sheet，具体取决于其他设置，例如对齐方式、弹性设置、媒体查询。

从测试的角度来看，您可以切换到测试“输入”参数，

用于内联样式
.should('have.attr', 'style', 'width: 200px')
样式 sheets
.should('have.class', 'target')

或者使用 chai-almost 插件来检查接近的数值。

const chaiAlmost = require('chai-almost');
chai.use(chaiAlmost(1))                           // 1 pixel variance

cy.get('.target')
  .invoke('css', 'width')                         // extract computed width 
  .then(widthStr => +widthStr.replace('px', ''))  // convert to number
  .should('almost.equal', 200);                   // approximate 200 +/- 1 px

Answer 2

您可以先将200px转换成数字，再检查数字是否在范围内。类似于：

cy.get('.target')
  .invoke('css', 'width')
  .then((width) => {
    expect(+width.replace('px', '')).to.be.within(200, 201)
  })

Answer 3

无需任何转换即可匹配，

cy.get('div')
  .invoke('css', 'width')
  .should('match', /200.*px/)   // matches 200.0000000000032038879956012px or 200px

当计算出的宽度不准确时，如何在柏树中测试元素的宽度？

How to test element's width in cypress when the calculated width isn't accurate?

css

testing

rounding-error

e2e-testing

cypress