使用chai-colors插件测试颜色

Question

我正试图将chai-colors插件添加到Cypress，从如何安装插件"Chai排序"# 2441

Chris breding给出

import chaiSorted from "chai-sorted"
chai.use(chaiSorted)

对于chai-colors

import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.should('be.colored', '#000000') 

，但这给出了错误"超时重试后4000ms:实际。Equals不是函数">

Answer 1

要在.should()中使用chai-colors，您需要传递颜色代码本身(而不是元素)

import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.then($el => $el.css('color'))       // get color value
.should('be.colored', '#000000') 

---

但是注意，这失败了

import chaiColors from 'chai-colors'
chai.use(chaiColors)
cy.visit(...)
cy.get(selector)
.then($el => $el.css('backgroundcolor'))       // get color value
.should('be.colored', '#000000') 

期望#000000与#000000相同的颜色

因为$el.css('backgroundcolor')返回rgba()而不是rgb()。

您最好导入chai-colors内部使用的onecolet。

然后以任何你想要的方式使用转换器(加上文档更好)。

import color from 'onecolor'
cy.visit(...)
cy.get(selector)
.then($el => $el.css('backgroundcolor'))       // get color value
.should(colorValue => {
expect(color(colorValue).hex()).to.eq('#000000') 
})