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

Question

假设我在DOM中具有div，'200px'宽度和class 'target'' 。

为了用柏树测试其宽度，我应该写下面的代码：

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

还有很多测试，测试宽度和元素的高度...

...

今天发生了一些奇怪的事情！

所有这些测试都失败了，因为柏树发现的宽度的值为200.00.000000000000032038799956012px而不是200px ！！！

我想到的第一个解决方案是在实际数字上测试它们（ex，200），而不是字符串（ex，'200px'）成立;我认为这是一个昂贵的主意！

您认为我如何克服这个问题！？

Answer 1

您可以匹配而无需任何转换，

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

Answer 2

测试断言.should（'have.css'，...）是 window.getCompentedStyle（）在应用所有CSS后读取实际渲染值。

它并不总是与以内联样式或样式表应用的“输入”设置相对应，具体取决于其他设置，例如理由，Flex设置，媒体查询。

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

• 用于内联样式
  .should（'have.attr'，'style'，'宽度：200px'）
• for Style Sheets

  .should（'have.class'，'target'）

---

或者使用chai-几乎插件来检查关闭数字值。

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 3

您可以首先将200px转换为一个数字，然后检查数字是否在该范围内。像：

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